swapping divs dynamically -- my code too funky....;)

[maya]

hi,

have this functioning as I want it..
http://www.mayacove.com/misc/swap_divs.html
divs have to swap on mouseOver, on mouseOut they have to go back to div
one..

but: the JS code I wrote is very repetitive.....

function getDiv2() {
var div1 = document.getElementById("one");
var div2 = document.getElementById("two");
var div3 = document.getElementById("three");
var div4 = document.getElementById("four");
var div5 = document.getElementById("five");
var div6 = document.getElementById("six");
div1.style.display = "none";
div2.style.display = "block";
div3.style.display = "none";
div4.style.display = "none";
div5.style.display = "none";
div6.style.display = "none";
}

and repeat function (getDiv3(), getDiv4(), etc and also getDiv1() to go
back to div one..) for each div...

I can't tell function what div is currently loaded, b/c link to chg divs
will be an img, and will be OUTSIDE the divs... (layout will be as
portrayed in url above..) so I can't do a for-loop and say if current
div equals... etc.. b/c function doesn't know which one current div is..

divs are not positioned absolutely, so I can't do stuff like

div_new.style.visibility = "visible";

also, I have to repeat var-decl's in each function, b/c those vars
(div1, dev2, etc) are not avail. to the functions if I declare them
outside the functions (don't get this var-scope thing.. how can I decl.
a var outside functions so they're available to all functions??)
all code is here, http://www.mayacove.com/misc/swap_divs.html

thank you very much..

 

[Doug Gunnoe]

hi,

have this functioning as I want it..http://www.mayacove.com/misc/swap_divs..html
divs have to swap on mouseOver, on mouseOut they have to go back to div
one..

but: the JS code I wrote is very repetitive.....

function getDiv2() {
   var div1 = document.getElementById("one");
   var div2 = document.getElementById("two");
   var div3 = document.getElementById("three");
   var div4 = document.getElementById("four");
   var div5 = document.getElementById("five");
   var div6 = document.getElementById("six");
        div1.style.display = "none";
        div2.style.display = "block";
        div3.style.display = "none";
        div4.style.display = "none";
        div5.style.display = "none";
        div6.style.display = "none";

}

and repeat function (getDiv3(), getDiv4(), etc and also getDiv1() to go
back to div one..)  for each div...

So onmouseover hide all divs but the current one, onmouseout hide all
but div1?

I can't tell function what div is currently loaded, b/c link to chg divs
will be an img, and will be OUTSIDE the divs...  (layout will be as
portrayed in url above..)  so I can't do a for-loop and say if current
div equals... etc.. b/c function doesn't know which one current div is..

divs are not positioned absolutely, so I can't do stuff like

   div_new.style.visibility = "visible";

also, I have to repeat var-decl's in each function, b/c those vars
(div1, dev2, etc) are not avail. to the functions if I declare them
outside the functions (don't get this var-scope thing.. how can I decl.
a var outside functions so they're available to all functions??)
all code is here,http://www.mayacove.com/misc/swap_divs.html

thank you very much..

you can make a var global by declaring it outside of all functions
using the var keyword, or just don't use the var keyword anywhere and
the var will be global.

<script>
var x; //Global
function dok(){}
</script>

<script>
function dok(){var x;//Local}
</script>

<script>
function dok(){x = 1;//Global}
</script>


As to your problem, I'm pretty sure you could do the whole thing with
one function and a switch statement.

 

[SAM]

maya a écrit :

hi,

have this functioning as I want it..
http://www.mayacove.com/misc/swap_divs.html
divs have to swap on mouseOver, on mouseOut they have to go back to div
one..

function getDiv(whichOne) {
var divs =["one","two","three","four","five","six"];
// hide all those divs :
for(var i=0; i<divs.length; i++)
document.getElementById(divs).style.display = 'none';
// reveal the right one
document.getElementById(divs[whichOne]).style.display = 'block';
}

for 6 divs 'whichOne' varies from 0 to 5

onmouseover="getDiv(2);"
onmouseout="getDiv(0);"


Other way :

function getDiv(whichOne) {
var divs =["one","two","three","four","five","six"];
// hide all those divs :
for(var i=0; i<divs.length; i++)
document.getElementById(divs).style.display = 'none';
// reveal the right one
document.getElementById(whichOne).style.display = 'block';
}

'whichOne' will have to be the right id

onmouseover="getDiv('three');"
onmouseout="getDiv('one');"

 

[maya]

maya a écrit :

hi,

have this functioning as I want it..
http://www.mayacove.com/misc/swap_divs.html
divs have to swap on mouseOver, on mouseOut they have to go back to
div one..

function getDiv(whichOne) {
var divs =["one","two","three","four","five","six"];
// hide all those divs :
for(var i=0; i<divs.length; i++)
document.getElementById(divs).style.display = 'none';
// reveal the right one
document.getElementById(divs[whichOne]).style.display = 'block';
}

for 6 divs 'whichOne' varies from 0 to 5

onmouseover="getDiv(2);"
onmouseout="getDiv(0);"


Other way :

function getDiv(whichOne) {
var divs =["one","two","three","four","five","six"];
// hide all those divs :
for(var i=0; i<divs.length; i++)
document.getElementById(divs).style.display = 'none';
// reveal the right one
document.getElementById(whichOne).style.display = 'block';
}

'whichOne' will have to be the right id

onmouseover="getDiv('three');"
onmouseout="getDiv('one');"

this looks great... thank you very much...

 

[maya]

maya a écrit :

hi,

have this functioning as I want it..
http://www.mayacove.com/misc/swap_divs.html
divs have to swap on mouseOver, on mouseOut they have to go back to
div one..

function getDiv(whichOne) {
var divs =["one","two","three","four","five","six"];
// hide all those divs :
for(var i=0; i<divs.length; i++)
document.getElementById(divs).style.display = 'none';
// reveal the right one
document.getElementById(divs[whichOne]).style.display = 'block';
}

for 6 divs 'whichOne' varies from 0 to 5

onmouseover="getDiv(2);"
onmouseout="getDiv(0);"


Other way :

function getDiv(whichOne) {
var divs =["one","two","three","four","five","six"];
// hide all those divs :
for(var i=0; i<divs.length; i++)
document.getElementById(divs).style.display = 'none';
// reveal the right one
document.getElementById(whichOne).style.display = 'block';
}

'whichOne' will have to be the right id

onmouseover="getDiv('three');"
onmouseout="getDiv('one');"

used 2nd option... worked like a charm... thank you very much.. now I
know..