User Controlled Stylesheets with JavaScript and CSS Part Two
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:

Dan Wellman

Dan WellmanDan Wellman is an author and web developer based in the UK. Dan has written three books so far; the latest, jQuery UI 1.7: The User Interface Library for jQuery, was released at the end of 2009.

Dan has been writing web development tutorials for over 5 years and works by day for a local digital media agency in his home town of Southampton.

See All Postings From Dan Wellman >>

Place your review about User Controlled Stylesheets with JavaScript and CSS Part Two




You must me logged in to write a review
Reviews

Be the first to place a review