Section 9 Designs

www.section9.ca

Resources

Below are some tutorials and links with information some of you may find useful.

 Online Resources

 Tutorial: Style Sheet Changer

Category: HTML/CSS/JavaScript

Level: intermediate/novice - Some knowledge of HTML, CSS and JavaScript required.

Description: Learn to dynamically change the look of your website with the click of a button.

Why should we have more than one stylesheet?
  • Gives your audience a choice to the look and formatting of your site. Adjustable themes.
  • Accessibility. Page could be formatted for people who may not have broadband internet and require less bandwidth.
Examples:
Part I - Stylesheets
There are 3 types of stylesheets:
  • Persistent - always on and combined with any other active stylesheets that are loaded.
  • Preferred - if there's more than one stylesheet, this would be the default.
  • Alternate - alternate stylesheets the audience can choose.
Persistent:
<link href="stylesheet1.css" rel="stylesheet" type="text/css" />
Preferred:
<link href="stylesheet1.css" rel="stylesheet" type="text/css" title="default" />
Alternate:
<link href="stylesheet2.css" rel="alternate stylesheet" type="text/css" title="alternate1" />

The first link tag is the default stylesheet, or "persistant". This stylesheet is "always on"

The second link tag is the default stylesheet. This contains the styles when the page is first loaded. It's relation should be set to "stylesheet".

Any alternate styles should have the relation of "alternate stylesheet". You can have as many alternate styles as you want.

For the purpose of this example, your head should look like this:

<link href="stylesheet1.css" rel="stylesheet" type="text/css" title="default" />
<link href="stylesheet2.css" rel="alternate stylesheet" type="text/css" title="alternate1" />

In the "title" attribute, you give your stylesheet a name. the <a href> tags that will change the styles will refer to this when changing stylesheets.

Part II - Switching Styles

After the stylesheets have been linked, in a browser such as FireFox you can change the styles by going into View>Page Style> and choose the style of your choice. However, IE offers no such option, so it has to be done through JavaScript.

Part III - The JavaScript

The JavaScript we will be using is written by Paul Sowden, and can be found in this article on "A List Apart".

In addition to linking to your stylesheets in the document head, you will need to link the Javascript as well:

<script src="styleswitcher.js" type="text/javascript"></script>
What this script will do is:
  • Differentiate the 3 types of stylesheets
  • Change the styles
  • stores cookies so that the style is applied to all the pages of the site once it's selected, and not just this one page
Part IV - Making it all work

Include the following code in your a href tags to enable style switching:

<a href="#" onclick="setActiveStyleSheet('default');return false;">Default Stylesheet</a>
<a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">Alternate Stylesheet</a>

Where it says "default" and "alternate1" you put the name you've given your stylesheet in the "title" attribute where you linked them to this document. Each link will now change the style of the page to the stylesheet you've linked to.

 Tutorial: Flash Countdown Timer with Actionscript

Category: Flash - Actionscript

Level: intermediate/novice - some knowledge of Flash and actionscript required.

Description: What the following tutorial will teach you is how to make a counter that will count down to "0". This can be used for things such as time limits for flash games, or have a movie run when the count is finished.

Step 1:

First create 2 layers in Flash. Have the top layer named "actions".

Step 2:

In your actions layer, create 3 keyframes. This is where your scripting for the countdown timer will take place.

Step 3:

In the first key frame you set the time you want the counter to count down from. So if you want it to count down from 10 seconds, your actionscript should look like this:

Frame 1 script:
Timer=10;
Step 4:

In the second keyframe, you will have an "if" statement that will check the timer. If it is greater than "0", it will play the next frame, else it will gotoAndPlay the next action set in the else statement. So, your actionscript should look something like this:

Frame 2 script:
//if the number is grater than 0, it will do the following and then play the next frame.
if (Number(Timer)>0) {
	//change value of Timer as it loops each time
	Timer=Timer-0.05;
   //round ot the nearest whole number. Makes for neater display.
   displayTimer=Math.round(Timer);
} else {
   //if the number is not greater than 0, do the following
   gotoAndPlay(4);
}
Step 5:

In the third keyframe, it should just help complete the loop for the counter. This frame will only be played if the value of the Timer is greater than "0" and will loop it back to frame 2 to perform the timer check again.

Actionscript should look like the following:

Frame 3 script:
gotoAndPlay(2);
Step 6:

Now that the main scripting is done, you need to somehow have it display on your stage. On the layer below your actions layer, call it "timer" and make sure the timeline is at least 3 frames long.

Step 7:

Now select your Text tool and in your properties panel, make sure your "Text type" is set to "Dynamic Text" and not "Static Text" as the numbers will be changing on the fly, based on your Timer.

Step 8:

Still in your properties panel for the Text, under "Var:", type the variable for the timer you used. If you followed the exampled used on this page, type"displayTimer" in that field. This will let the field know to display the countdown in the loop.

Step 9:

In frame 4, create a blank keyframe and type some static text on it, or draw a picture. Then apply a stop action to it. This frame will display after the countdown is complete.

After all this is done, you will have sucessfully created your first countdown timer in flash.

Download demo source files:

FLA file

SWF file

This page uses the domCollapse script. This script can be found at www.onlinetools.org.