hidng divs with javascript

[eon201]

Hi Im trying to hide div classes with the following method:

Code: Select all

<script language="JavaScript">
function setVisibility(class, visibility) {
document.getElementById(class).style.display = visibility;
}
</script>

<input type=button name=type value='Today' onclick="setVisibility('a', 'inline'); setVisibility('b', 'none'); setVisibility('c', 'none'); setVisibility('d', 'none'); setVisibility('e', 'none');";>

<div class="a"><?php //This is the today div ?>a</div>
<div class="b"><?php //This is last (today) div ?>b</div>
<div class="c"><?php //This is the  last week avg div ?>c</div>
<div class="d"><?php //This is this date last month div ?>d</div>
<div class="e"><?php //This is the last month avg div ?>e</div>

<div class="a"><?php //This is the today div ?>a</div>
<div class="b"><?php //This is last (today) div ?>b</div>
<div class="c"><?php //This is the  last week avg div ?>c</div>
<div class="d"><?php //This is this date last month div ?>d</div>
<div class="e"><?php //This is the last month avg div ?>e</div>

Now the problem is that, I have to use div class's so I can hide multiple divs (there are loads of these classes 6x each) but the code refuses to work. But it will work when there is only one class that the javascript is displaying/hiding. Why is this? Can I work around it?

Thanks in advance. Eon201 ;D

[MikeHopley]

This code is highly misleading. Your functions say, "setVisibility(class, visibility)", but really it's operating on IDs: "document.getElementById".

Change all your <div> classes to IDs, and it should work. This will mean a lot more function calls, however. Alternatively, keep the classes and write something like:

Code: Select all

var x = document.getElementsByTagName("div")
for (i=0; i<x.length; i++) {
if (x[i].className == "a") { x[i].style.display = "none" }
}

Or you can go find one of the custom-built getElementsByClassName functions.

[eon201]

Thanks mike. I have now changed the classes to id's and it has done the trick, although I do have to call each seperatly. Long winded code but it does the job well!

Thanks for the help. Eon201

[welshstew]

you can check out these links to see some examples:
http://www.plus2net.com/javascript_t...hide-layer.php
http://www.geocities.com/technofundo.../showhide.html
http://www.adesdesign.net/php/tutori...hide_div.html#
http://www.dyn-web.com/dhtml/show-hide/

[Rakuli]

If you are using just one class per div you could use something like

Code: Select all

var divs = document.getElementsByTagName('div');


// send the classes as an array
function setVisibility(class, visibility)
{
   
// cycle through all of the divs
       for (i=0; i< divs.length; i++)
       {
            
           // now go through the list of class names
            for (j=0; j< class.length; j++)
            {
                 // if this divs className is one of the one's that we wish to toggle, do so
                 if (divs[i].className == class[j])
                      divs[i].style.display = visibility;
             }
         }
               
}

Now you can call your function thusly

onclick="setVisibility(new Array('a'), 'inline'); setVisibility(new Array('b','c','d','e','f','etc'), 'none');"

This should knock it back to two function calls per click, the code is a doing a bit more work than before but because the divs are held in reference from the outset, cycling through a few arrays is not a big overhead and it decreases the amount of code which is cleaner and faster to load.

Hope that helps,

[eon201]

Thanks guys.

As helpfull as ever! Eon201

[eon201]

So. that part is sorted. Brilliant advice as always.

Here comes the bit that is v confusing for me.

So the code currently looks like so.

Code: Select all

<meta http-equiv="refresh" content="30">

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

<input type=button name=type value='Today' onclick="setVisibility('a1', 'inline'); setVisibility('b1', 'none'); setVisibility('c1', 'none'); setVisibility('d1', 'none'); setVisibility('e1', 'none'); setVisibility('a2', 'inline'); etc...
<input type=button name=type value='<?php echo "Last $today"; ?>' onclick="setVisibility('a1', 'none'); setVisibility('b1', 'inline'); setVisibility('c1', 'none'); setVisibility('d1', 'none'); setVisibility('e1', 'none'); setVisibility('a2', 'none'); etc...

<div id="a1"> Insert this text 1 </div>
<div id="b1"> Insert this text 2 </div>
<div id="c1"> Insert this text 3 </div>
<div id="d1"> Insert this text 4 </div>
<div id="e1"> Insert this text 5 </div>

<div id="a2"> Insert this text 6 </div>
<div id="b2"> Insert this text 7 </div>
<div id="c2"> Insert this text 8 </div>
<div id="d2"> Insert this text 9 </div>
<div id="e2"> Insert this text 10 </div>

etc...

The css automatically. Hides averything apart from any div beginning with 'a'. And it all works well.

The page has to refresh. This again works.

The only problem is if you are displaying the 'b' divs and the page refreshes it shows divs 'a' by default.

Is there anyway to lose the meta refresh and have a javascript one that refreshes every 30 secs but will keep displaying the selected divs??

I hope this isnt confusing - if it is please say so!

Thanks in advance Eon201.