Java Design Tricks: Good and Annoying Javascript Tricks

Javascript Design Tricks

Assignment: Come to class on Monday, March 13,
with a short description of the larger goal and
focus of your next website.

Assignment: (Do after Class)

1. Adding Javascript using Dreamweaver MX

Remember most of this javascript code will go
just before the

</head> tag or just below the <body> tag.
Look at the HTML code for this webpage.
See where the

<head> ... </head> and <body> ... </body> tags are.
Also locate the HTML code for your page's links.
They should look like this:

<a href="http://www.colorado.edu/">Test links</a>
Remember most of the javascript effects code will be
contained within these tags:

<script> ..... </script>

1. Revising your websites

cclewis.com

2. Award-Winning Websites

3. Examples of Image Websites

2. Reading and Copying HTML Source Code

Make sure that you know where tags open and close:

<script> ....</script>

<body>....</body>

<head> .... </head>

<a href= "index.htm">Home Page </a>

4. Inserting Javascripts into your Webpage
using, The Javascript Source, Codelifter.com ,
Nick's Javascript Page , Free JavaScripts, and
T he HTML Help Guide, Javascript Examples

Open link in Full Window (the same
as using the F11 key)

Code for this trick-- Full Screen 2 Trick
Put this code right after the </title> tag:

<SCRIPT LANGUAGE="JavaScript">




</script>

and put this code in the body section after
the <body> tag

<a href="JavaScript:window.close(self)">Click here
to return to normal window size</a>
Open link in Completely Full Window
(1024 x 768 browser window)

Code for this trick-- Full Screen Trick
Put this code in the body, it is a regular link:

<a href="http://www.cclewis.com/photos/index4.htm"
target="Console" onclick="if (window.open)
{Console=window.open(this.href,this.target,
'toolbar=no,location=no,directories=no,status=no,
menubar=no,scrollbars=no,resizable=no,
width=1024,height=768'); return false;} else { return true;}">
Open link in Full Window</a> <br>

And put this code in the body section of the
page you are opening in full size:

<a href="JavaScript:window.close(self)">Click here
to return to normal window size</a>

10. Link Mouseover Status Bar Text: Place your cursor over
this link and look at the status bar.

Code for this trick--

<a HREF="http://www.colorado.edu/AmStudies/lewis/Design/javadt.htm" onMouseOver=" window.status='This text will appear in the status bar.'; return true" onMouseOut="window.status=' '; return true"><b>Link Mouseover Status Bar Text:<br>

8. Image Cycling Javascript

-Sewall Hall Photo Tour

--Sewall Hall Welcome Images

No Right-Click Trick, Another No Right-Click script

-Example of No Right-Click Page
--Another Example of No Right-Click page
Disabling the My Image Toolbar in Internet
Explorer 6
--Sewall Hall Welcome Images Example of Warning
See Protecting your Images on the Web A really cool
"no-right-click" trick Using nested tables, you can "hide"
an image, and prevent it from being right clicked. When
someone right clicks your image, they will download
the blank image. Keep in mind that placing background
image in tables won't work on some older browsers.
Also, from an accessibility standpoint, nested tables
are frowned upon.
Create a table the same size as the image you wish
to protect (use absolute values for table width, instead
of percentages).

Insert the image you want to protect into the table's
background ().

Create a new table within the first table (also known
as a "nested" table).

Insert a blank image (a one pixel by one pixel
transparent image is good) into a table cell in the
second table. Use , which is a transparent
gif with a 6 pixel border so that you can see
it. Download this image -- transgif.gif -- and put
it as the image in a table where the background image
of the table is the real image you want to show through.

--See Example of Image with Transparent Gif Trick

6. Encrypted Password Protection Trick

-Example of Password Protected Page
The password is "cclewis"

7. Stripped-down version of my Image Swapping webpage

Open this webpage in Internet Explorer. Go to
"View" and select "Source." Copy all of the
HTML Source code for this page.
Copy the source code for this page and paste
it into a blank Dreamweaver Page
Using Dreamweaver, copy the HTML Source code
for my "Javascript effect" and paste it into the
HTML Source code for your page.
After you have copied the HTML Source code from
my page to yours, check to see if all the code copied
properly. Does it look the same in your HTML
Source code as it does in mine?
After class, find four of your own images and add
their names to this code, so that this file will come
up with your photos instead of mine.

Here is the code for one of the image swap mouseovers:

<ahref="#"onMouseOver="MM_swapImage
('title','','Reece2c.jpg',1)">

Photo1</a>

7. Static Background trick

8. Download Codelifter.5. This shareware program
lets us see the code on a webpage that you want to
copy.

9. Image Javascript Effects for Photo Slideshows

8. Using Javascript Behaviors in Dreamweaver:

Use Free JavaScripts, Codelifer 5.0 , Java Applets

Java and Javascript are not the same thing.
Javascript is a scripting language that is used
to set the properties of a webpage. Java
is a compiling programming language that
is used to develop program applications.
You can use "Behaviors" window in
Dreamweaver to insert javascript behaviors
into your webpage
But in order to use the "Behaviors" window,
you must first download the behavior from
the Macromedia Exchange website

9. . Adding Javascript using Macromedia
Extension Manager

Go to Dreamweaver Exchange to download
javascript behaviors
In order to download extensions, you
must have Macromedia Extension Manager
on your computer
To Download Extensions Manager 1.6
Installing Extensions in Dreamweaver
Use the Behaviors Tools window to add javascript effects
to your page.
Use example of "Text Link Rollover"
In Dreamweaver, use "Insert" and select "TextRollover"
Example of Text Link Rollover using Dreamweaver

10. Adding more than one Javascript Effect to a page

One event handler, many javascript actions

EXAMPLE #1:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: <body onload="dothat()">
RESOLUTION: <body onload="dothis();dothat()">

EXAMPLE #2:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: window.onload=dothat()
RESOLUTION: <body onload="dothis();dothat()">

EXAMPLE #3:
SCRIPT 1: window.onload=dothis
SCRIPT 2: window.onload=dothat
RESOLUTION: <body onload="dothis();dothat()">

Example of Webpage with running clock

<body onLoad="show5()">
Example of Clock counting the time until
Springbreak

<body onLoad="getTime()" >
Example of Two Javascripts on the same webpage

<body onLoad="getTime();show5()">

In order for two javascripts to work on the
same page if they both use the "onLoad"
command, you must combine them. If you
put in two separate "onLoad" commands,
one of the javascripts won't work.

<body onLoad="show5()">
<body onLoad="getTime()" >
You combine the two onLoad commands by
inserting the onLoad instructions in one
command string, and separate each onLoad
command by a semi-colon.
Notice that the combined onLoad commands
are now contained with quotation marks. If
you put quotation marks around each of
the onLoad commands, your javascript
won't work.

<body onLoad="getTime();show5()">

Example of Webpage with running clock
//change font size here to your desire
myclock="<font color='000000' size='5' face='Arial' ><b><font size='5'>Current Time:</font></br>"+hours+":"+minutes+":"
+seconds+" "+dn+"</b></font>"

5. Really Annoying Javascript Tricks website
1. ---Roaming Cursor Trick Webpage
2. --Annoying Eyes Trick Webpage
3. --Annoying Blinking Links Webpage
6. Javasript code for Basic Hit Counter



<br>Number of Visitors to this site:  </font></b>

Example of Hit counter:

Number of Visitors to this site: 82678

6. Javasript code for Basic Hit Counter

<br>Number of Visitors to this site: 
</font></b>

Example of Hit counter:

Number of Visitors to this site: 82679