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.:eek:

<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.:(

[dog]

Twey: Thanks very! it works like a dream. :D

[dog]

Twey: just one thing...

now the cursor isn't displaying as a hand any longer. :o

any ideas about this.

Thanks again for the help


<img id="Uc_menu1_btnCollections"
onclick="javascript:toggle(document.getElementById('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;" />

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

[Twey]

Did I say to use javascript: ? I swear I never put javascript: in my example. javascript: is a pseudo-URL scheme, and has no business being in an event handler.
Besides, it should be cursor:pointer not cursor:hand.

[dog]

oops! sorry about the "Javascript:". Don't know where that came from. I'm acting as a bit of a middle man here and I'd like to express it was no mistake of mine.. other than to overlook the error.

About the cursor. I can see why a pointer (or :pointer) may be more appropriate but just out of interest do you know why the style="hand:cursor;" is not functioning?
:cool:

[shachi]

I am not sure about this but try using this: cursor: hand, pointer;

[Twey]

Because "hand" is not a valid cursor name. The hand cursor is called "pointer."
I think hand worked in IE5, though, which may or may not have recognised "pointer." Therefore, you should probably use:
cursor:pointer !important;cursor: hand;

[dog]

Genius!:)