Forum Moderators: open
First off I have a Cycle function that effectively changes show/hide 2 divs that I have created, upon completion of the first of 2 clickable MOVE div functions.
I would like to know how to implement the CYCLE function to automatically initiate upon reaching the pixel limit (400) of MOVEDIVRIGHT, so that when I reach this limit, the first div will hide and the second div, displaying the MOVEDIVLEFT link will show and then do the same thing after the MOVEDIVLEFT is done moving back to original position.
This is the result I would love:
Click "Open"
It moves to style.left = 400px
Initiate Cycle (onclick on function Timeout? whatever is best)
This should change Div to New Div with the "Close" link on it.
Click "Close" and div moves back to original position Initiate Cycle again for displaying the Original "Open" link.
This would make me very very happy man.
Here is the 3 functions. So far everything works great. But I dont' know how mold them together.
SCRIPTS
<!--
// CYCLE from OPEN DIV to CLOSE DIV once OPEN position is REACHED
//
var shcnsi=0;
var nshcnsas=2;
function Cycle()
{
eval("document.all.shcns"+shcnsi+".style.display='none'");
shcnsi=(((shcnsi%nshcnsas)+1)%nshcnsas);
eval("document.all.shcns"+shcnsi+".style.display=''");
}
// MOVEDIVRIGHT to 400px, 2px at a time, from 0px absolute position.
//
var the_timeout;
function moveDivRight()
{
var the_style = getStyleObject("myDiv");
if (the_style)
{
var current_left = parseInt(the_style.left);
var new_left = current_left + 2;
if (document.layers)
{
the_style.left = new_left;
}
else
{
the_style.left = new_left + "px";
}
if (new_left < 400)
{
the_timeout = setTimeout('moveDivRight();',1);
}
}
}
//MOVEDIVLEFT to 0px, 2px at a time, from 400px absolute position reached with MOVEDIVRIGHT.
//
function moveDivLeft()
{
var the_style = getStyleObject("myDiv");
if (the_style)
{
var current_left = parseInt(the_style.left);
var new_left = current_left - 2;
if (document.layers)
{
the_style.left = new_left;
}
else
{
the_style.left = new_left + "px";
}
if (new_left > 0)
{
the_timeout = setTimeout('moveDivLeft();',1);
}
}
}
//BROWSER STUFF
//
function getStyleObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}
// -->
HTML
the moving DIV with SHOW/HIDE Containers
<div id = "myDiv" style="position:absolute; top:150px; left:0px;">
<div ID="shcns0" style="display: ;">
<a href="#" onClick="the_timeout=setTimeout('moveDivRight();',100); return false;">Open</a> - <a href="javascript: Cycle()">Show CLOSE Div(Need Automation on these)</a></div>
<div ID="shcns1" style="display: none;">
<a href="#" onClick="the_timeout=setTimeout('moveDivLeft();',100); return false;">Close</a> - <a href="javascript: Cycle()">Show OPEN Div(Need Automation on these)</a></div>
</div>
Thanks in advance all. Hope this posts correctly.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>astupidtitle</title>
<script type="text/javascript">function toggleDisplay(id1,id2) {
var elem1 = getElement(id1), elem2 = getElement(id2);
elem1.style.display = (elem1.style.display == '' ¦¦ !elem1.style.display) ? 'none' : '';
elem2.style.display = (elem2.style.display == '' ¦¦ !elem2.style.display) ? 'none' : '';
return false;
}var the_interval;
//id is id of element to move, in quotes,
//dir is direction ~ 'left' or 'right' in quotes,
//amt is number of pixels from left to move to (negative numbers will work too),no quotes on numbers!
//tog1 and tog2 each are an id of elements to toggle display properties of
function moveDiv(id,dir,amt,tog1,tog2) {
window.clearInterval(the_interval);
var elem = getElement(id), currentPos, ready, newPos;
if (elem) {
the_interval = window.setInterval(function () {
currentPos = parseInt(elem.style.left);
ready = (dir == 'left' && currentPos > amt) ? true : (dir == 'right' && currentPos < amt) ? true : false;
if (ready) {
newPos = (dir == 'left') ? currentPos - 2 : currentPos + 2;
if (document.layers) {
elem.style.left = newPos;
} else {
elem.style.left = newPos + "px";
}
} else {
window.clearInterval(the_interval);
toggleDisplay(tog1,tog2);
}
},1);
}
return false;
}//I changed this function from 'getStyleObject' to 'getElement',
//'getStyleObject' is too restrictive IMO, better to deal with the element first
function getElement(id) {
if (document.getElementById) {
return document.getElementById(id);
} else if (document.all) {
return document.all[id];
} else if (document.layers) {
return document.layers[id];
} else {
return false;
}
}</script>
</head>
<body>
<div id = "myDiv" style="position:absolute; top:150px; left:0px; width:400px; height:400px; border:1px solid black;">
<div ID="shcns0">
<a href="#" onclick="return moveDiv('myDiv','right',400,'shcns0','shcns1');">Open</a>
</div>
<div ID="shcns1" style="display:none;">
<a href="#" onclick="return moveDiv('myDiv','left',0,'shcns0','shcns1');">Close</a>
</div>
</div>
</body>
</html>
Please note, in the toggleDisplay function, these two lines:
elem1.style.display = (elem1.style.display == '' ¦¦ !elem1.style.display) ? 'none' : '';
elem2.style.display = (elem2.style.display == '' ¦¦ !elem2.style.display) ? 'none' : '';
I've had all the ways to do it separately.. and you making them into one is like a dream come true.
Can't thank you enough, kind sir :)
Imagine the possibilities with this script :P
I'm speechless... seriously. It's amazing the things good people can come up with. I'm learning this language, as well as PHP atm.. This alone can open up many doors for me as to how JS really works..
Simply amazing!
This will make my site like 100 times better than before!
Cheers mate!
Sneaky
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>astupidtitle</title>
<script type="text/javascript">var the_interval;
//id is id of element to move, in quotes,
//dir is direction ~ 'left' or 'right' in quotes,
//amt is number of pixels from left to move to (negative numbers will work too),no quotes on numbers!
//tog1 and tog2 each are an id of elements to toggle display properties of
function movediv(id,dir,amt,tog1,tog2) {
window.clearInterval(the_interval);
var elem = document.getElementById(id), currentPos, ready, newPos;
if (elem) {
the_interval = window.setInterval(function (){
currentPos = parseInt(elem.style.left);
ready = (dir == 'left' && currentPos > amt) ? true : (dir == 'right' && currentPos < amt) ? true : false;
if (ready) {
newPos = (dir == 'left') ? currentPos - 2 : currentPos + 2;
if (document.layers) {
elem.style.left = newPos;
} else {
elem.style.left = newPos + "px";
}
} else {
window.clearInterval(the_interval);
toggleDisplay("shcns0","shcns1");
}
},1);
}
}
function toggleDisplay(div1, div2){
var elem1 = document.getElementById(div1);
var elem2 = document.getElementById(div2);
if (elem1.style.display == ''){
elem1.style.display = 'none'
}else{
elem1.style.display = ''
}
if (elem2.style.display == ''){
elem2.style.display = 'none'
}else{
elem2.style.display = ''
}
}
</script>
</head>
<body>
<div id = "mydiv" style="position:absolute; top:150px; left:0px; width:400px; height:400px; border:1px solid black;">
<div ID="shcns0">
<a href="#" onclick="movediv('mydiv','right',400,'shcns0','shcns1');">Open</a>
</div>
<div ID="shcns1" style="display:none;">
<a href="#" onclick="movediv('mydiv','left',0,'shcns0','shcns1');">Close</a>
</div>
</div>
</body>
</html>
