hidng divs with javascript

eon201 · #1 Nov 30th, 2007, 09:09

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

<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 · #2 Nov 30th, 2007, 10:39

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 · #3 Nov 30th, 2007, 10:53

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 · #4 Nov 30th, 2007, 10:53

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 · #5 Nov 30th, 2007, 12:40

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 · #6 Nov 30th, 2007, 15:41

Thanks guys.

As helpfull as ever! Eon201

eon201 · #7 Nov 30th, 2007, 15:54

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Im getting a gap between 2 divs :-(	danny322	Web Page Design	1	Jan 9th, 2008 08:46
Having two divs which do not affect each other?	LGS	Web Page Design	11	Oct 28th, 2007 23:41
Divs in a row	hessodreamy	Web Page Design	5	Feb 17th, 2006 18:40
Divs in a row	hessodreamy	Web Page Design	1	Nov 15th, 2005 15:58

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
hidng divs with javascript