dcsimg
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Essential JavaScript: 8 Cross-Browser Solutions-8 : Page 8

There's a core set of problems that every JavaScript developer will run across sooner or later. This article shows you how to deal with eight of the most common situations.


advertisement

WEBINAR:

On-Demand

Building the Right Environment to Support AI, Machine Learning and Deep Learning


Showing and Hiding Layers
Problem 7: How do I show or hide content based on the user's interaction?

Showing and hiding layers is relatively simple. Create a global variable to keep track of the currently visible layer. Then hide the current layer and show the layer you'd like using the visibility property inherent in CSS:

   var currentLayer = 'initialLayer';
   function showLayer(lyr){
      hideLayer(currentLayer);
      eval(pre + lyr + post).visibility = 'visible';
      currentLayer = lyr;
   }
   function hideLayer(lyr){
      eval(pre + lyr + post).visibility = 'hidden';
   }

The code assumes that the document contains a <div> element with an id attribute set to "initialLayer" and a style attribute with the visibility property set to 'visible'. All the other layers on the page have their visibility property set to 'hidden'. Each trigger mechanism, such as a button or link, includes the appropriate event to show the associated layer:



   <div id="initialLayer" style="visibility: 
      visible;">Initial Content</div>
   <div id="about" style="visibility:hidden;">
      About Content</div>
   <!--Other content -->
   <a href="javascript:showLayer('about')">
      About Trigger</a>

This script only works if you have hidden browser differences in object variables (see the topic Writing Cross-Browser Scripts)



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date