[thelist] Need some JS help - unobtrusive popup - based on CLASS not id.

ben morrison morrison.ben at gmail.com
Fri Jun 15 11:28:13 CDT 2007


On 6/15/07, Jon Hughes <hughesj at firemtn.com> wrote:
> Here's what I have so far:
>
> function detpopup() {
> if (!document.getElementsByTagName || !document.getElementById) return
> false;
> if (!document.getElementById('content').className == 'detpopupcont')
> return false;
> var detpopup = document.getElementById('content').className =
> 'detpopupcont';
> detpopup.style.visibility='visible';
> }
>
>
> The HTML is like so:
>
> <div id="content">
> <div class="detpopupcont" style="visibility:hidden">This is hidden with
> no javascript</div>
> <div class="detpopupcont" style="visibility:hidden">This is hidden with
> no javascript</div>
> <div class="detpopupcont" style="visibility:hidden">This is hidden with
> no javascript</div>
> </div>
>
> When the page loads, I want all of those to become "visibility:visible"
> but this is my first bit of JS, and I need help :-/
>

Hmm seems to be an access key to send a email using gmail!!

There are a lot of functions that have been written for the lack of
getElementsByClass, here's one:

http://www.dustindiaz.com/getelementsbyclass/


var popUps= getElementsByClass('detpopupcont');

this will return an array, so now you can loop through that array

for(i=0;i<popUps.length;i++) {
	popUps[i].style.visibility='visible'
}

It might be better to use different classes instead,  .detpopupcont {
visibility:hidden;}, .detpopupShow {visibility:visible;}
that way you have more control and it separates the logic more.

for(i=0;i<popUps.length;i++) {
	popUps[i].className='detpopupShow ';
}

ben

PS a good way to attach onload events:
simon willison's addloadevent
http://simon.incutio.com/archive/2004/05/26/addLoadEvent
-- 
Ben Morrison
http://www.benjaminmorrison.com



More information about the thelist mailing list