SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict djh's Avatar
    Join Date
    Apr 2000
    Location
    Long Beach, CA
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide All Div Layers (quickly!)

    Hey folks.

    Is there a quick (in terms of performance/speed) way to hide all visible layers on a page?

    Basically, I have 250+ div layers written out on a page. I use a select menu to control which layer is shown... but - and here's where it gets good - my javascript, in order to show a particular layer, has to hide every other layer, then show the particular layer. I think because there's so many layers, it's really really (really!) slow.

    The code I have to hide all layers seems really dumb - but I don't have anything else. Here's my code:
    Code:
    function hide() {
    document.all['Layer'].style.visibility = "hidden";
    document.all['Layer1'].style.visibility = "hidden";
    document.all['Layer2'].style.visibility = "hidden";
    document.all['Layer3'].style.visibility = "hidden";
    //and etc, etc, etc to 250+
    }
    There's gotta be a better way, right?

  2. #2
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, don't do it that way. first of all, using the document.all() method is a performance hog, not as quick as spelling out the whole dom path because i think he looks at every one, each time until he finds the one that matches.

    what you need is a to loop through a results array that you can get with:

    document.getElementsByTagName("div");

    i think the code would look something like this...don't hold me to this, I'm pulling this out of the air

    Code:
    <script language="javascript">
    function tester() {
      var aResults;
      aResults = document.getElementsByTagName("div");
      for(var i = 0; i<=aResults.length; i++) {
        aResults[i]].style.visibility = "hidden";
      }
    
    }
    </script>
    EDIT--
    if its not aResults.length, I think its aResults.count or something like that

  3. #3
    SitePoint Addict djh's Avatar
    Join Date
    Apr 2000
    Location
    Long Beach, CA
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Makeda,

    Thanks for the code. I need to modify it because every layer is technically named differently - i.e. "layer1", "layer2", etc. I'm passing the numeric value from a list menu (which is calling the show/hide layer function).

    I need something like:
    Code:
    <script language="JavaScript">
    function hide() {
      var aResults;
      var i=0;
      aResults = document.getElementsByTagName("layer"+i);
      for(var i = 0; i<=aResults.length; i++) {
        aResults[i]].style.visibility = "hidden";
      }
    }
    </script>
    Help?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try this:
    Code:
    function hide() {
    //get all layers with a number in it
    for (var i = 1; i < 250; i++) {
      document.getElementById("Layer" & i).style.visibility = "hidden";
    }
    //get the layer w/no number
    document.getElementById("Layer").style.visibility = "hidden";
    }
    Hope this helps!

  5. #5
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    djh,

    no you don't. if all of your tags are <div> tags but they have different id's, the code that i provided will work just fine. don't confuse getElementsById with getElementsByTagName.

  6. #6
    SitePoint Addict djh's Avatar
    Join Date
    Apr 2000
    Location
    Long Beach, CA
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    man, I've been at this all day. I'm still getting errors with your code[s]... I got my slow **** - document.all - code to work - but well it's slow ****.

    makeda, I can't use your code cause it hides every layer... I need to only hide layers that follow the "layer" + number naming convention.

    vinnie, I can't get your code to work. don't know why.

    are there known issues with the get document.getElementById code and Internet Explorer?

    Also what is that document.getElementById? Is that DOM? I want to do more research...

    please help!

  7. #7
    SitePoint Addict djh's Avatar
    Join Date
    Apr 2000
    Location
    Long Beach, CA
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YES!

    Ok, I did a couple of workarounds.

    First, I used makeda's code, and modified it a little:
    Code:
    <script language="javascript">
    function tester() {
      var aResults;
      aResults = document.getElementsByTagName("span");
      for(var i = 0; i<aResults.length; i++) {
        aResults[i]].style.visibility = "hidden";
      }
    
    }
    </script>
    Changed were the tagName - from div to span and i <= aResults.length to i < aResults.length.

    Then obviously, I changed all my 250+ layers to <span> tags instead of <div>... Don't know about cross-browser issues, but it works fast!!!

    Thanks for your help guys... Anything I can do for you let me know...

  8. #8
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice.

    As payback, why don't you ship some of your weather out here. Just got 6 inches of snow.

  9. #9
    SitePoint Addict djh's Avatar
    Join Date
    Apr 2000
    Location
    Long Beach, CA
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dude, that's rough. I think it's 70+ plus today... but hey a little weather builds character, i think.

    if - when - you move out here, give me a holla and maybe we can do some work together...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •