Toggling CSS "display"

[dog]

Hello,

I'm using a piece of javascript, shown below, that was working fine before I put the site online. In fact, perhaps before I passed the site to my programmer buddy.

Please take a look at this http://d599524362.bighost68.bighost.com.br/Namoda.aspx#

The link below the image grid effects the css to hide the first grid and display another full of taste links. These links also use the toggle idea to hide the whole page and display divs containing photos. An alternative to pop-ups perhaps.

Now it's online it's only working in IE. Damn!

Any ideas? I'm looking for a quick fix so I can finish the site tonight/tomorning.

Another problem with the same page:
(let me know if I should be posting a new thread for this)

I can't seem to limit the width of the div's containing the photos. "foto1", "foto2", etc. I'm included the css below. Any ideas please.

#foto1,#foto2,#foto3,#foto4,#foto5,#foto6,#foto7,#foto8,#foto9,#foto10,#foto11,#foto12 {
margin: 30px auto;
position: relative;
border: #695226 solid 1px;
border-width: 1px 1px 2px 1px;
padding: 0;
}

div#foto1 {
width: 398;
}

#foto2 {
width: 365;
}

Many thanks!

Here's the javascript:

function toggle(tag) {
if (tag.style.display=='') {
tag.style.display='none'
} else {
tag.style.display=''
}
}

function togglegal(tag, tag2) {
if (tag.style.display=='') {
tag.style.display='none'
} else {
tag.style.display=''
}
if (tag2.style.display=='') {
tag2.style.display='none'
} else {
tag2.style.display=''
}
}

[shachi]

I think you should use document.getElementById

function toggle(tag) {
var tag = document.getElementById(tag);
if (tag.style.display=='') {
tag.style.display='none';
} else {
tag.style.display='';
}
}

function togglegal(tag, tag2) {
var tag = document.getElementById(tag);
var tag2 = document.getElementById(tag2);
if (tag.style.display=='') {
tag.style.display='none';
} else {
tag.style.display='';
}
if (tag2.style.display=='') {
tag2.style.display='none';
} else {
tag2.style.display='';
}
}

[dog]

thanks for trying but that's not changed anything.

[shachi]

May be you should make a backup page (sth like index_2.html) and place that script there and upload it to the script so that you could play with the script a little and you would still have the original page, in other hand we can also see what you've changed(and why it may not be working)

[dog]

Cool. I'll do that.

[Twey]

shachi: You're wrong. document.getElementById() is not necessary in this case, it's perfectly correct to use element references as dog has done.

dog: You haven't given us the whole code. That code contains three function definitions, but nowhere you've showed us are they actually called

[dog]

Twey: thanks for the reply. I thought it'd be sufficient just to give a link to the site. You wanna see the html we're using to call the javascript, right?

Here's an example from the menu. When you click on "Coleções" you should reveal "menuCollections". But this is only working in the damned IE.

<img id="Uc_menu1_btnCollections" onclick="javascript:toggle(menuCollections)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Uc_menu1_btnCollections','','images/menu-collections-ro.gif',1)" src="images/menu-collections.gif" style="border-width:0px;cursor:hand;" />

<span id="menuCollections" style="display: none;">
<input type="image" name="Uc_menu1$btnVizu" id="Uc_menu1_btnVizu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Uc_menu1_btnVizu','','images/menu-vizu-ro.gif',1)" src="images/menu-vizu.gif" style="border-width:0px;" />

Thanks for the help

[Twey]

Aha -- here document.getElementById() is necessary You should be using:

onclick="toggle(document.getElementById('menuCollections'));"

[dog]

cheers!

i'll try that right now!

[shachi]

Oops sorry for the wrong advise Twey & dog.