Javascript, AJAX, and JSON

sopiaz57 · October 31 '03, 09:44 AM (#1)

Hey guys, i have an easy one here.

2 divs, one visible one hidden. the ID for one div is "div1", the ID for the other div is "div2"

here's my function......to be executed on roll over..

function div_swap()
{
document.div1.visibility="hidden";
document.div2.visibility="visible"
}

whats missing, i know im close.
thanks

JR · October 31 '03, 10:13 AM (#2)

Firstly, make sure that it is actually an id and not a name attribute in the div tags.

Then use this...

Code:

function div_swap()
{
document.getElementById('div1').style.visibility = "hidden";
document.getElementById('div2').style.visibility = "visible";
}

However, that is not cross-browser compatible so use...

Code:

function div_swap()
{
document.getElementById('div1').style.top = "-2000px";
document.getElementById('div1').style.left = "-2000px";
document.getElementById('div2').style.top = "0px";
document.getElementById('div2').style.left = "0px";
}

Change the px values depending on where the div is positioned. I think you must also use css positioning as a style for the JavaScript to work, IIRC.

sopiaz57 · October 31 '03, 10:24 AM (#3)

thanks, i had something to that degree but yours woked.

Here's the problem now, The one div when i mousover is below the hidden div, can i get around this by using a z-index? or do i have to use positioning??

JR · October 31 '03, 11:28 AM (#4)

You will have to use positioning. What are the divs for?

sopiaz57 · October 31 '03, 11:43 AM (#5)

the one div holds a flash movie, the other is a pic, then are being swapped and should reside in the same location.

I cant get css positioning to work at all, it's pretty wierd.

heres my <style>

#div1
{

visibility:visible;
left:388px;
top:355px;

}

#div2
{

visibility:hidden;
left:388px;
top:355px;

}

JR · October 31 '03, 11:46 AM (#6)

You will need "position: absolute;" and have one of them placed off the page.

so...

Code:

#div1
{

position: absolute;
left:388px;
top:355px;

}


#div2
{

position: absolute;
left:-2000px;
top:-2000px;

}

Javascript, AJAX, and JSON

javascript, div's