[SOLVED] Script hide multiple divs on page

[maxyme]

I have a games site and i want to have a javascript code that will hide all of the game images. I will be willing to put every image in its own individual div box if its necessary. I want a script that will hide all of the div boxes. If possible i would like it if i would not have to specify all of the div boxes individually but just name them all the same and have them all hide under the same id.

If you have any questions just ask me.

Thanks.

[Psycho]

You can't give multiple elements on a page the same ID. You can give them similar names that can be processed programatically. Just create all your divs with a common name, but with a unique number. Such as: "game_1", "game_2", "game_3", etc.

 

Then you can create a simple loop to hide all the divs (and alternatively unhide one specific div):

 

Note: to hide ALL divs, pass 'false' to the function. Or pass an index number and all divs will be hidden except the specified div

function showDiv(selectedIndex)
{
    var divIndex = 0;
    while (document.getElementById('game_'+divIndex))
    {
        var displayStyle = (divIndex==selectedIndex)?'inline':'none';
        document.getElementById('game_'+divIndex).styke.display = displayStyle;
        divIndex++;
    }
}

[maxyme]

You can't give multiple elements on a page the same ID. You can give them similar names that can be processed programatically. Just create all your divs with a common name, but with a unique number. Such as: "game_1", "game_2", "game_3", etc.

 

Then you can create a simple loop to hide all the divs (and alternatively unhide one specific div):

 

Note: to hide ALL divs, pass 'false' to the function. Or pass an index number and all divs will be hidden except the specified div

function showDiv(selectedIndex)
{
    var divIndex = 0;
    while (document.getElementById('game_'+divIndex))
    {
        var displayStyle = (divIndex==selectedIndex)?'inline':'none';
        document.getElementById('game_'+divIndex).styke.display = displayStyle;
        divIndex++;
    }
}

Ok so your script will automatically find the divs that are named game_1,game_2,game_3,ect. right?

I also believe in the 7th line after divIndex you meant to type style? instead of styke

Could you provide me with another function to hide it i don't understand what you meant in the note above the code.

[Psycho]

Yes, I meant to write "style".

 

You don't need another function. If you called the function like this

showDiv(false)

it will hide ALL the divs.

 

However, if you call the function like this

showDiv(2)

it will hide ALL the divs except the div "game_2".

[maxyme]

ok so i used that script for the first three games on the left of this page. Click the images and titles button to go to showDiv(true) and the titles only to go to showDiv(false) Why is it so messed up?

 

http://futuregamespc.com/all_games_new.html

[maxyme]

i found out how it works now and updated the page online but is there any where to override the hiding of the div? if possible please tell me how.

[Psycho]

YOu don't need to send out a PM everytime you post. Most users will check the "Show new replies to your posts." link at the top of the page to see where there have been responses that they may need to reply to.

 

As to your question of "is there any where to override the hiding of the div?" I'm not sure I follow. I already showed you how you could have one div set to be displayed. Are you wanting the ability to show all the divs? If so, I would just modify the previous function and allow all the div to be displayed by passing a 'true' parameter:

function showDiv(selectedIndex)
{
    var divIndex = 0;
    while (document.getElementById('game_'+divIndex))
    {
        var displayStyle = (divIndex==selectedIndex || selectedIndex===true)?'inline':'none';
        document.getElementById('game_'+divIndex).style.display = displayStyle;
        divIndex++;
    }
}

 

This would hide all the divs

showDiv(false)

 

This would show all the divs

showDiv(true)

 

This would hide all the divs except the one with the id 'game_3'

showDiv(3)

[Psycho]

Also, you have some bad code in your pages. Whn I clicked one of the image links, it opened a new browser window. That window had quite a bit of "lag". I thin notices that IE was taking up 20% of my CPU cycles while that window is sitting idle. The browser should be taking up 0% if the user is not loading a page with the rare exception where you have a script running some type of timer loop.

[Floydian]

The best way to handle doing one thing to lots of elements is to use a class.

 

<img class="hiddenIMG">

 

Then, when you want to show that class, remove the class from the img (or the div if you chose to hide the div containing the img instead)

 

 

[maxyme]

Also, you have some bad code in your pages. Whn I clicked one of the image links, it opened a new browser window. That window had quite a bit of "lag". I thin notices that IE was taking up 20% of my CPU cycles while that window is sitting idle. The browser should be taking up 0% if the user is not loading a page with the rare exception where you have a script running some type of timer loop.

Yes i know. There is a script i use to make the boxes below the game rounded and in ie they freeze up. Though in any other browser its fine. And srry for pming u alot.

[maxyme]

Thanks Everyone for helping me on this script!

I finally got it working.