hiding groups of layers

@W8_4meSep 23.2005

#nav2, #nav3, #nav4, #nav5, #nav6, #nav7 { display: none; }

Is there any way to shorten the above? I’d like to do something like…

#nav2-7 { display: none; }

I don’t want to hide all divs though, just groups like the above.

cheers

to post a comment

JavaScript

12 Comments(s) _↴

@David_HarrisonSep 23.2005 — #Well you could apply a class to them all and then just say:

.nav{
 display:none;
 }

However I'd take a guess that you want to use JavaScript to show them all at the appropriate time, if that is the case then it would be better to use JavaScript to hide them all in the first place so that users who do not have JavaScript will still be able to see all of the content.

@W8_4meauthorSep 23.2005 — #Cheers but it'd be like swapping #nav2, #nav3, #nav4 for class="nav".

I'm trying to reduce the amount of text to type out.

I'll check in the javascript forum.

@W8_4meauthorSep 23.2005 — ##nav2, #nav3, #nav4, #nav5, #nav6, #nav7 { display: none; }

Is there any way to shorten the above? I'd like to do something like...

#nav2-7 { display: none; }

I don't want to hide all divs though, just groups like the above.

I have already posted this in the CSS forum, but no one seems to be able to do it with CSS.

Is there a javascript alternative? I have alot of layers to hide!

thanks

@David_HarrisonSep 23.2005 — #There was no need to create a duplicate thread. Moved and merged threads.

Try this:

&lt;script type="text/javascript"&gt;
 
 for(var n=2;n&lt;=100;n++){
 document.getElementById("nav"+n).style.display="none";
 }
 
 &lt;/script&gt;

@David_HarrisonSep 23.2005 — #There was no need to create a new thread.

Try this:

&lt;script type="text/javascript"&gt;
 
 for(var n=2;n&lt;=100;n++){
 document.getElementById("nav"+n).style.display="none";
 }
 
 &lt;/script&gt;

@David_HarrisonSep 23.2005 — #There was no need to create a duplicate thread. Moved and merged threads.

Try this:

&lt;script type="text/javascript"&gt;
 
 for(var n=2;n&lt;=100;n++){
 document.getElementById("nav"+n).style.display="none";
 }
 
 &lt;/script&gt;

@W8_4meauthorSep 23.2005 — #I am using the following script to flick between layers...

<i>
 </i>&lt;script type="text/javascript"&gt;
 function showN(n){ for(i=1;i&lt;=99;i++)
 { document.getElementById("nav"+i).style.display="none";
 document.getElementById("nav"+n).style.display="block"; } }
 &lt;/script&gt;

So what I have to do is :

#nav1 { display: show; }

#nav2, #nav3, #nav4 { display: none; }

Unfortunately I cannot use your script because it negates the #nav1 { display: show; }

Sorry about posting twice, I didn't realise you're a mod!

@KravvitzSep 23.2005 — #There is no display:show. You're confusing display with the visibility property for which Netscape 4.x uses a proprietary value of "show" instead "visible".

You mean display:block. Don't forget that many elements are not display:block by default.

@David_HarrisonSep 24.2005 — #Here is what I recommend, put all of your #nav's into a container element and give that container element an ID, for example, id="navContainer". Then put the following CSS into a separate file all on it's lonesome:

#navContainer div{
 display:none;
 }
 
 #navContainer #nav1{
 display:block;
 }

I am assuming that all of your #nav's are <div> tags and that each #nav does not contain any other <div> tags, (if that is not the case then you would have to show me your markup so that I can come up with a different solution).

Then put this JavaScript in a separate .js file:

var head = document.getElementsByTagName("head")[0];
 
 var newStyles = document.createElement("link");
 newStyles.type = "text/css";
 newStyles.rel = "stylesheet";
 newStyles.href = "whatever.css"; /* Whatever you called the style-sheet up there ^ */
 
 head.appendChild( newStyles );
 
 var loaded = false;
 
 function showN(n){
 
 if(loaded){
 
 <i>    </i>for(i=1;i&lt;=99;i++){
 <i>    </i>  document.getElementById("nav"+i).style.display="none";
 <i>    </i>}
 
 <i>    </i>document.getElementById("nav"+n).style.display="block";
 
 }
 
 }
 
 window.onload = function(){
 loaded = true;
 }

Then add this line of code immediately after the opening <body> tag:<script type="text/javascript" src="whatever.js"></script>What happens is as follows, the script runs and appends the stylesheet to the head section of the page, the styles are loaded and all but the first #nav are hidden, then the rest of the page goes onto load as normal.

You can call the function showN to show one layer and hide all others, however I have thrown in some code to make sure that the function will only run after the page has finished loading, to prevent there from being any errors in trying to show layers that don't exist yet.

In the case that the user doesn't have JavaScript enabled, all layers will be displayed, therefore although it doesn't keep to the originally intended design, at least the users can still see all of the content.

@KravvitzSep 24.2005 — #Wouldn't be better if you added object detection so that IE4 and NS4 users wouldn't see any errors?

@David_HarrisonSep 24.2005 — #Let them show errors, it's not worth the extra code considering [url=http://www.thecounter.com/stats/2005/September/browser.php]their usage[/url]. It won't make the code any more or less accessible, the JavaScript will simply fail to run and those browsers will fall back on the no-JavaScript accessibility.

@W8_4meauthorSep 25.2005 — #Cheers, I think I'll stick to containing the layers I want hiden in a new layer.

Also in #JavaScript _↴

Form field check and reflect.Using JS to query databases [RESOLVED] JavaScript - asynchronous request to a servlet

Success!

Help @W8_4me spread the word by sharing this article on Twitter...

Tweet This

hiding groups of layers

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

hiding groups of layers

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴