Back to Top
The nuts and bolts for
Creative web development

Design: Getting Back to the Grid

Linda never thought she'd live long enough to see a magazine layout applied to Web design. She talks about the 960 Grid system in this article.

Author: Linda Goin Rating: Not enough votes

HTML5: Adding Style

In part 2 of a look at HTML5, Nancy will show you how to add CSS to the previously unstyled document from part 1 and why there are some differences you need to watch out for.  In this week’s article, we are going to dive into styling the document created in part 1 and show a couple of ways styling can be done without breaking the rules.

Author: Nancy Gill Rating: Not enough votes

HTML5: It’s A Whole New Ballgame

In this article, Nancy is going to introduce you to HTML5.  This article is the first in a series that will start with an overview of the HTML5 structure and continue with a look at new tags and uses for the tags.  We will also cover what browsers are supported, which are not and how to get the support-nots to play nicely.

Author: Nancy Gill Rating: Not enough votes

Getting started with the Advanced CSS Animator

In this article, Nancy will introduce you to the DMXzone’s latest extension, the Advanced CSS Animator.  She will introduce you to the extension and take you through 3 very simple examples of how you can use it to create some wonderful CSS Animation.  And, unlike CSS animation that only works in a few browsers, the Advanced CSS Animator has seamlessly integrated jQuery functions so they work in all major browsers.

Author: Nancy Gill Rating: Not enough votes

CSS: Mini Events Calendar

In this article we will learn how to style an events calendar using CSS. We will walk through the steps of creating a calendar using an HTML table, complete with all tags and attributes to ensure that this table is accessible to users of alternate devices. Having created the calendar in the mark-up we will then move on to styling it in an attractive way using the CSS tools within Dreamweaver, in such a way that we do not add unnecessary mark-up to the page.

Advertisement DMXzone Calendar

 The DMXzone Calendar extension enables you to add a great looking calendar with many different styles and effects on your sites.  Enrich any form used for events, appointments or birthdays. Use it as a date picker or inline calendar with its unique design and in flight animation options. Embed multiple calendars, select date ranges, and limit the selection to specific dates.

Author: Rachel Andrew Rating:

User Controlled Styles with JavaScript and CSS Part Three

Welcome to the third and final part in this series; in parts one and two we created the test HTML page, a series of CSS files and the JavaScript code needed to make it all work at a basic level.  This part of the tutorial is going to look at the method by which we are going to ensure that when a user visits our site and makes some style choices, those choices remain if they navigate away from the site and then later return.

As we left things in part two, the page itself was working and the style control panel could be used to easily change the font size and theme of the page.  Visitors also had the opportunity to create a printer-friendly page consisting of just black and white styles.  Before we look at saving visitors style choices, we're just going to tidy a couple of things up.

We didn't go back to the HTML file and add the relevant event handlers or ID attributes in part two, but if you went ahead and did this anyway, you may have noticed when switching to the print medium style that the controls div loses its background colour and the link text changes to purple to denote a visited link.  This is only a trivial problem admittedly, but to me it just doesn't look professional.  You can fix it by adding the style rules to be applied when no colour stylesheet is in force to the userControlledStyles.css file.

Author: Dan Wellman Price: $3.59 Rating: Not enough votes

User Controlled Stylesheets with JavaScript and CSS Part Two

In part one of this tutorial we looked at the HTML and initial CSS required for coding the basic page and the style control panel, and styling them in the desired theme.  In this part we're going to look at extending the CSS to encompass all of the different style choices that visitors could make, as well as the JavaScript that functions as the mechanics behind the page and powers mechanisms like the opening and closing of the style control panel and the actual application of the visitor's choices.

The JavaScript is also going to be used to remember each visitor's style options so that when they return to the site, the choice they have made on their last method are applied again.  Dynamically generated sites often use a database to store this information on the server, but if you don’t have a database-driven site, you can achieve the same functionality using purely client-side techniques.

Beginning the JavaScript

The first thing we need to do is to create a function that controls the opening and closing of the style control panel.  To do this, create the following function in a blank page of your favourite text editor:

function openCpanel() {

  document.getElementById("cpanel").style.display = "block";

}

That's all there is to it.  We're also going to need a very similar function that closes the control panel once the visitor has made their selections:

Author: Dan Wellman Price: $3.59 Rating: Not enough votes

User Controlled Stylesheets with JavaScript and CSS Part One(updated)

A mark of distinction on websites is a facility that allows visitors to change the appearance of the pages they view on your site; personalisation goes a long way. One thing that it is very easy to do is to allow visitors to change things like the font size, the background and border colours or the colour theme in general.  Although some of this functionality, life changing the font size for example, is already a control within the browser that the visitor can set any time they want, it is still useful to have something right there on the page so that the visitor doesn't have to go off hunting through menus to find the setting.  Additionally, creating a single panel containing just the controls to change the visual settings of the site allows you to centralise this feature and make things even easier for your visitors.

Everything we need to do can be done with the use of simple HTML, JavaScript and good old CSS.  We will also be keeping to standards as much as possible, making sure our code is valid and compatible with the most widely used browsers around.  There are several different components that we will need to look at; initially, we'll need a space in which to keep the various style controls, but because this may be a little large, we don’t want it on screen at all times so we'll need a method of opening and closing the control panel.  Secondly we need to look at the method for the actual changing of stylesheets to reflect the choices made by visitors.  Finally, we need to come up with a method of keeping the settings on each page of the site that the visitor moves to, and of storing the choices made so that the same visual settings are applied when they return to the site.  This part will look at the HTML and initial CSS, while the next part will focus on an extension to the CSS, and the JavaScript required for making the page work.

Author: Dan Wellman Price: $3.59 Rating: Not enough votes

Search Your Site with JavaScript, XML and CSS part Two

In the first article we look at all of the associate technology; the XML file, the CSS file and the containing HTML file.  In part two, we are going to focus mainly on the JavaScript, with perhaps a little bit more CSS and a few HTML updates towards the end.  Most of the code in this article will be JavaScript, but there will also be elements of the DOM that we'll use as well.  Getting familiar with DOM scripting is an excellent road to learning the basics of AJAX but it shouldn't be confused with AJAX because it lacks some of the fundamental methods involved such as the use of the xmlHTTP object. 

The JavaScript

The first thing we want the search script to do is to open the XML file to get the list of URLs that should be included in the search.  As those of you that read the article on generating a sitemap will know, this is easily done with a very small cross-browser function.  In a text editor, start with the following:

var searchword;

var doc;

var urls;

var controlvar;

var urldata = new Array();

A set of global variables, which we'll make use of in several of our functions, and an array, the use of which will become apparent towards the end of the JavaScript file.  The first function, to be called on the main search pages onload event, will be as follows (readers of my previous tutorial will find this very familiar!):

Author: Dan Wellman Price: $3.59 Rating: Not enough votes