Home arrow JavaScript arrow Page 4 - 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 - Using an Array
(Page 4 of 5 )

Admittedly, the code is rather hefty for simple client-side layer switching. You could reduce the amount of code by using an array to store the z-indices of the tabs and a loop to rearrange their order upon each click, but I have found that this detracts from the look of the tabs. If you wanted to do this, you first declare the array, which would need to be global in order to be used in all of the separate subroutines:

dim glblTabArray(3)

The array has 4 values stored, but the fist value in an array is always 0, hence the 3 in brackets.  Now remove all of the tab1.style.zindex="3" lines of code from all of the onclick subroutines, leaving just the visibility lines. In each of the onclick subroutines, add a subroutine call, using the tab name as an argument (remember to change the tab name in each of the calls though):

call tabchanger(tab1)

Now to create the tabchanger subroutine:

sub tabchanger(Clicked)
 dim Row
 for Row = 0 to 3
  If glblTabArray(Row).style.zindex > Clicked.style.zindex Then
            glblTabArray(Row).style.zindex = glblTabArray(Row).style.zindex - 1
  End if
 next
 Clicked.style.zindex = 3
end sub

This first sets the Row variable which will be synchronized with the z-indices, then uses a for...next loop to cycle through each of the z-indices, and changes them based on the results of the if statement.  Personally, I prefer the original code. Create a file first with the original code, then with the array code, you'll notice when testing them that the tab order looks better in the original code. This is why I prefer it.


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