www.freewebsite.0nyx.com
You are here: Home >> SlideDown Toolbar >> Lesson 1 www.freewebsite.0nyx.com - Free Website
 
Site guide
 HOME
 SITE MAP
 
Free tutorials
 Free Flash tutor
 Free HTML tutor
 Free JavaScript tutor
 Free DHTML tutor
 
Free Online Tools
 Color Picker
 MouseOver buttons
 Menus : Dropdown
 Page effects
 Scrollbar
 
More stuff
 Free sub-domains
 Make money : Banners
 Increase traffic
 Improve your website


Become a member become a member      Member's Log-in

ToolBar LESSON 1

Click me!

The above example only works in IE 4+ browsers.

By the time you finish this tutorial, you'll be able to do much better than this.

The mechanics behind this toolbar are pretty simple.

I believe that most of you are familiar with the "span" tag.

<html>
<head>
<title> Learning CSS... </title>
</head>
<body>
<span style="display: none"> </SPAN> 
</body>
Anything that is written within the above style tag will not be shown on the website.

After you press the "Click me" button, the "display: none" part disappears and you can see the content clearly.

How does the "display: none" part disappear? Javascript and DHTML.

We give the span element a name using the "id" property. The "class" property will not work in this case.

The javascript function uses the document.all[id].style.display to check the tag and ..... I'm gonna stop here. Maybe this will make more sense when you see the complete script. On to lesson 2.


< < Back     Next > >
Freewebsite: Web design tutorials for the rest of us
Lessons:      Intro 1 2 3 4 5 6 7 8 9 10

 
Praise for freewebsite
   "These tutorials are written in such simple language and they're so much fun. They're simply the best." - Mike

   "Just wanted to drop you a line to say thank you. I created my website within a month after reading your tutorials and now I make thousands with it." - Ken