Moving DIV layer up and Down - Help

deathmill

06-12-2003, 11:17 AM

Hi

IM sure this is pretty easy but I just can't see out side the box here.

I have a DIV layer, which I want to just move up once and down once onclick. Problems I have at the moment is when I click up it goes up and up and up again when I click. Same when I click down. How can i strict it and just have it on one button?

Script below:

<SCRIPT language="JavaScript">

var DHTML = (document.getElementById || document.all || document.layers);

function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}

var SwitchD = 294;

function move(amount)
{
if (!DHTML) return;
var x = new getObj('ContentMain');
SwitchD += amount;
x.style.top = SwitchD;
}

//-->
</SCRIPT>

<Body>
<A href="javascript:move(-220);">Down</A>
<A href="javascript:move(220);">Up</A>

<div id="ContentMain" position:absolute; left:115px; top:294px; z-index:30; width: 550px; height: 274px; overflow: visible;>

</body>

Thanks Inadvanced

D

Mr J

06-12-2003, 03:53 PM

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">

var DHTML = (document.getElementById || document.all || document.layers);

function getObj(name){

if (document.getElementById){
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all){
this.obj = document.all[name];
this.style = document.all[name].style;
}

else if (document.layers){
this.obj = document.layers[name];
this.style = document.layers[name];
}
}

var SwitchD = 294;

function move(amount){
if (!DHTML) return;
var x = new getObj('ContentMain');
SwitchD += amount;
x.style.top = SwitchD;
}

//-->
</SCRIPT>

<Body>
<A href="#null" onclick="move(220)">Down</A>
<A href="#null" onclick="move(-220)">Up</A>

<div id="ContentMain" style="position:absolute; left:115px; top:294px; z-index:30; width: 550px; height: 274px; overflow: visible;background-color:blue"></div>

</BODY>
</HTML>

Choopernickel

06-12-2003, 04:09 PM

don't forget to close the </div>

that still doesn't answer your question, though.

i'd set a global var or two which holds whether the movement is allowed, then swap its value with the move function.

Mr J

06-12-2003, 05:55 PM

Your right, I must learn to read messages properly

See if this is alright

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">

var DHTML = (document.getElementById || document.all || document.layers);

function getObj(name){

if (document.getElementById){
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all){
this.obj = document.all[name];
this.style = document.all[name].style;
}

else if (document.layers){
this.obj = document.layers[name];
this.style = document.layers[name];
}
}

var SwitchD =294;

moved_up=0
moved_down=0

function move(amount,dir){
if (!DHTML) return;
if(moved_up==0&&dir=="down"){
var x = new getObj('ContentMain');
SwitchD += amount;
x.style.top = SwitchD;
moved_up=1
}

if(moved_down==0&&dir=="up"){
var x = new getObj('ContentMain');
SwitchD += amount;
x.style.top = SwitchD;
moved_down=1
}

}
//-->
</SCRIPT>

<Body>
<A href="#null" onclick="move(220,'down')">Down</A>
<A href="#null" onclick="move(-220,'up')">Up</A>

<div id="ContentMain" style="position:absolute; left:115px; top:294px; z-index:30; width: 550px; height: 274px; overflow: visible;background-color:blue"></div>

</BODY>
</HTML>

deathmill

06-12-2003, 06:14 PM

Oh dude your sooooo close...

One little thing, I can only go up and one once. If i try and go up and down again it wont let me. Its 95% there :thumbsup:

D

Choopernickel

06-12-2003, 06:21 PM

replace the function with this:

function move(amount,dir){
if (!DHTML) return;
if(moved_up==0&&dir=="down"){
var x = new getObj('ContentMain');
SwitchD += amount;
x.style.top = SwitchD;
moved_up=1;
moved_down=0;
}

if(moved_down==0&&dir=="up"){
var x = new getObj('ContentMain');
SwitchD += amount;
x.style.top = SwitchD;
moved_down=1;
moved_up=0;
}

but really, you asked for just move once. little clearer next time, maybe?

deathmill

06-12-2003, 06:26 PM

Thanks all - works like a dream - very much appreciated for your help :)

But this is bad I know but how would I get it to action on the one button, instead of the 2 up and down.

I just noticed something. When I first load the page I can click down it goes down. Can this be stopped?

Aka Death = $MIll

Danne

06-12-2003, 07:58 PM

I think

...
var SwitchD =294;

moved_up=0
moved_down=1

function move(amount,dir){
...

should do it...

Choopernickel

06-12-2003, 10:04 PM

Use Danne's suggestion to prevent moving down first, definitely.

To turn this into a toggle function (same button/link, both pieces of functionality) try changing the function to this:

function move(amount){
var dir = moved_up?down:up;
if (!DHTML) return;
if(moved_up==0&&dir=="down"){
var x = new getObj('ContentMain');
SwitchD += amount;
x.style.top = SwitchD;
moved_up=1;
moved_down=0;
}
if(moved_down==0&&dir=="up"){
var x = new getObj('ContentMain');
SwitchD -= amount;
x.style.top = SwitchD;
moved_down=1;
moved_up=0;
}

and your toggle link into this:

<a href="#" onclick="move(220)">Move!</a>

Mr J

06-12-2003, 11:15 PM

Sorry Choopernickel, get getting an error message with your addition

The following works

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">

var DHTML = (document.getElementById || document.all || document.layers);

function getObj(name){

if (document.getElementById){
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all){
this.obj = document.all[name];
this.style = document.all[name].style;
}

else if (document.layers){
this.obj = document.layers[name];
this.style = document.layers[name];
}
}

var SwitchD =294;

moved_up=0
moved_down=0

dir="down" // initial direction

function move(amount){
if(dir == "down"){
dir="up"
}
else{
dir="down"
}
if (!DHTML) return;
if(moved_up==0&&dir=="down"){
var x = new getObj('ContentMain');
SwitchD += amount;
x.style.top = SwitchD;
moved_up=1;
moved_down=0;
}
if(moved_down==0&&dir=="up"){
var x = new getObj('ContentMain');
SwitchD -= amount;
x.style.top = SwitchD;
moved_down=1;
moved_up=0;
}

}
//-->
</SCRIPT>

<Body>

<P><a href="#" onclick="move(220)">Move!</a>
<div id="ContentMain" style="position:absolute; left:115px; top:294px; z-index:30; width: 550px; height: 274px; overflow: visible;background-color:blue"></div>

</BODY>
</HTML>

deathmill

06-12-2003, 11:40 PM

Thanks again for your help :thumbsup:

Death = $Mill