Home arrow JavaScript arrow Page 5 - Switching on Layers with Scripts
JAVASCRIPT

Switching on Layers with Scripts


This illustrates how to show visitors to a site which tab they are currently on. The article outlines how to create a script that manipulates the z-indices of graphical tabs to pull the one that is clicked to the top layer and show the content in that tab. There is a simple introduction to the div tag, the z-index property and DHTML scripting in general.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 11
June 08, 2004
TABLE OF CONTENTS:
  1. · Switching on Layers with Scripts
  2. · Starting with a Basic HTML Page
  3. · VBScript Subroutines
  4. · Using an Array
  5. · JavaScript Version

print this article
SEARCH DEVARTICLES

Switching on Layers with Scripts - JavaScript Version
(Page 5 of 5 )

As promised, here is the JavaScript version of the code for those of you that want maximum compatibility. Again, first define the scripting language and add the wrapper:

<script language="Javascript>
<!- -  stealth mode on

This time, you don't need to worry about subroutines, but you will need to create four functions to call when the various tabs are clicked. The first function can be defined using the following code:

function taboneontop() {
 tab1.style.zIndex="3";
 content1.style.visibility="visible";
 tab2.style.zIndex="2";
 content2.style.visibility="hidden";
 tab3.style.zIndex="1";
 content3.style.visibility="hidden";
 tab4.style.zIndex="0";
 content4.style.visibility="hidden";
 startmessage.style.visibility="hidden";
}

It's fairly simple and should be easy to follow; it simply changes the current z-indices of the tabs and un-hides the relevant content div.  Create another three functions, one for each tab that can be clicked:

function tabtwoontop() {
 tab1.style.zIndex="2";
 content1.style.visibility="hidden";
 tab2.style.zIndex="3";
 content2.style.visibility="visible";
 tab3.style.zIndex="1";
 content3.style.visibility="hidden";
 tab4.style.zIndex="0";
 content4.style.visibility="hidden";
 startmessage.style.visibility="hidden";
}
function tabthreeontop() {
 tab1.style.zIndex="2";
 content1.style.visibility="hidden";
 tab2.style.zIndex="1";
 content2.style.visibility="hidden";
 tab3.style.zIndex="3";
 content3.style.visibility="visible";
 tab4.style.zIndex="0";
 content4.style.visibility="hidden";
 startmessage.style.visibility="hidden";
}
function tabfourontop() {
 tab1.style.zIndex="2";
 content1.style.visibility="hidden";
 tab2.style.zIndex="1";
 content2.style.visibility="hidden";
 tab3.style.zIndex="0";
 content3.style.visibility="hidden";
 tab4.style.zIndex="3";
 content4.style.visibility="visible";
 startmessage.style.visibility="hidden";
}

Now just add the closing comment wrapper and end the script in the normal way:

-->
</script>

All you need to do now is add an onClick event to each of your tab div's to call the function when the object is clicked:

<div id=tab1 onClick="taboneontop()"  style="position:absolute;left:16;top:116;z-index:3">

Add a similar handler to each of the other tab div's, but remember to change the function call, i.e. for the tab2 div, add onClick="tabtwoontop()", etc.

Conclusion

The goal of this article was to create a script that manipulated first the z-indices of the graphical tabs in order to pull the one that is clicked to the top layer. This is an excellent way of showing the visitor/user which tab they are currently on. The script secondly displays content relating to the tab number in the main body of the graphic. Using these scripts can add a quality of depth to your work that is impossible using pure HTML. Feel free to use these scripts in any way you see fit and to modify them in your own way. There are probably numerous ways in which they can be improved, certainly in the case of the JavaScript file, but I hope it has been a simple introduction to the div tag, the z-index property and DHTML scripting in general.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials