Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Oct 2002
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moving DIV layer up and Down - Help

    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

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    <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>
    Last edited by Mr J; 06-12-2003 at 06:39 PM.

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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>

  • #5
    New Coder
    Join Date
    Oct 2002
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Soooooo close

    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

    D

  • #6
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #7
    New Coder
    Join Date
    Oct 2002
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    works like a dream - thank

    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
    Last edited by deathmill; 06-12-2003 at 07:40 PM.

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    São Paulo, Brazil
    Posts
    367
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think
    Code:
    ...
    var SwitchD =294;
    
    moved_up=0
    moved_down=1
    
    function move(amount,dir){
    ...
    should do it...
    /Daniel

  • #9
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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:

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

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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>



  • #11
    New Coder
    Join Date
    Oct 2002
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks 4 help

    Thanks again for your help

    Death = $Mill


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •