Working with JavaScripts

JavaScripts can be used to ehance your website. However, choose carefully because many of them look cheap, nasty and actually compromise the usabilty of yoru site.

It's also a fun and visual introduction to understanding various codes and how they work together.

Don't worry, your not always required to write your own! There are many websites that provide free JavaScripts (no need to re-invent the wheel) which you can customise to suit your needs.

One great site is http://www.dynamicdrive.com/

Activity One: Gallery

Log into http://www.dynamicdrive.com/ and find a gallery script in the "image effects" category. I am going to use one called "Lightbox image viewer 2.03a"

Here is the link: http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Directions:

Simply download Lightbox V2.03a, and refer to the index file inside for installation instructions.

Try to figure it out. If you get stuck here is what you should have. Click here

Here is the same galery just a litle more developed... Intergrated into a structure, CSS applied to the links and photos put into a group (next button). Click here

Activity Two: Scrolling text area

Version One
Here is the standard text area that can be created in Dreamweaver by simply going to the "Windows" menu > opeing the "insert" bar and selecting from the "forms" tab. Its properties can be adjusted in the properties bar. Click here

Version Two
Here is another one from Dynamic Drive. Log into http://www.dynamicdrive.com/ and look in the "dynamic content " category. I am going to use one called "Scrollable content"

Here is the link: http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

Directions:
Simply add the following to the BODY section of your page

<ilayer name="scroll1" width=170 height=150 clip="0,0,170,150"> <layer name="scroll2" width=170 height=150 bgColor="lightyellow"> <div id="scroll3" style="width:170px;height:150px;background-color:lightyellow;overflow:scroll"> <big>T</big>his is a cool script that allows you to compact any content and confine it within a scrollable mini "window" Save valuable document space while making your page more "interactive", all at the same time! This script uses two different techniques- one for IE, one for NS- to create the scrollable window. Scrollbars will be available to IE 4 users to scroll the window, while NS users will need to use the "up" and "down" buttons instead (since NS does not support the adding of scrollbars to contents). </div></layer></ilayer><script> /*********************************************** * Scrollable content Script- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var nsstyle='display:""' if (document.layers) var scrolldoc=document.scroll1.document.scroll2 function up(){ if (!document.layers) return if (scrolldoc.top<0) scrolldoc.top+=10 temp2=setTimeout("up()",50) } function down(){ if (!document.layers) return if (scrolldoc.top-150>=scrolldoc.document.height*-1) scrolldoc.top-=10 temp=setTimeout("down()",50) } function clearup(){ if (window.temp2) clearInterval(temp2) } function cleardown(){ if (window.temp) clearInterval(temp) } </script> <br /><span style="display:none"><a href="#" onMousedown="up()" onMouseup="clearup()" onClick="return false" onMouseout="clearup()">Up</a> | <a href="#" onMousedown="down()" onMouseup="cleardown()" onClick="return false" onMouseout="cleardown()">Down</a> | <a href="#" onClick="if (document.layers) scrolldoc.top=0;return false">Top</a> | <a href="#" onClick="if (document.layers) scrolldoc.top=scrolldoc.document.height*(-1)+150;return false">Bottom</a></span>

Configuring the script:
The width of the "window" is represented by the value 170, and the height, 150. To alter the dimensions, change ALL instances of 170 to another value, and the same for 150 (just do a search-and-replace). You can also give the window a different background color. Just change "yellow" to another color name.

Click here for basic view
Click here for a more developed view (Images, Links and CSS)