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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gradually Scrolling in Div

    This is my first javascript code ever and I need a bit of help. :[
    Also, forgive the goofy styling for the nested divs; I couldn't figure out how to get them to align horizontally without wrapping =\.

    Essentially, I want the links to gradually scroll the containing div to the specified element's position. I wrote this in a roundabout manner for the sake of learning but I'll clean it up once I can get the function to work which... simply will not. Help?

    Code:
    <html>
    <head><title></title>
    
    <script type="text/javascript" src="http://kwonnie.comxa.com/js/jquery-1.2.6.min.js"></script>
    
    <script type="text/javascript">
    
      var i = scroll_clipper.pageXOffset;
      function moveToGreen() {
        while (i<slide2.offsetLeft) {
          i++;
          scroll_clipper.pageXOffset++;
          setTimeout('moveToGreen()',100);
          }
      }
    	
    </script>
    
    </head>
    <body>
    
    <a href="javascript:moveToGreen()">Green</a>
    <div style="width: 600px; height: 250px; overflow-y: hidden; overflow-x: hidden;" id="scroll_clipper">
    <div style="width: 600px; height: 250px; background: red; float: left;" id="slide1"></div>
    <div style="width: 600px; height: 250px; background: green; float: left; position: relative; top: -250px; left: 600px;" 
    
    id="slide2"></div>
    
    </div> 
    
    </body>
    </html>
    Last edited by Kwonnie; 07-11-2011 at 09:38 PM.

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Played with the code some more and got it to go from one frame to another, but it won't go gradually... anybody?

    Code:
    <html>
    <head><title></title>
    
    <script type="text/javascript" src="http://kwonnie.comxa.com/js/jquery-1.2.6.min.js"></script>
    
    <script type="text/javascript">
      var i = 0;
      function moveToGreen() {
        while (i<slide2.offsetLeft) {
          scroll_clipper.scrollLeft+=1;
          i++;
          setTimeout('moveToGreen()',100);
          }
      }
    
      function moveToRed() {
        while (i>slide1.offsetLeft) {
          scroll_clipper.scrollLeft-=1;
          i--;
          setTimeout('moveToRed()',100);
          }
      }
    	
    </script>
    
    </head>
    <body>
    
    <a href="javascript:moveToRed()">Red</a><a href="javascript:moveToGreen()">Green</a>
    <div style="width: 600px; height: 250px; overflow-y: hidden; overflow-x: hidden;" id="scroll_clipper">
    <div style="width: 600px; height: 250px; background: red; float: left;" id="slide1"></div>
    <div style="width: 600px; height: 250px; background: green; float: left; position: relative; top: -250px; left: 600px;" id="slide2"></div>
    
    </div> 
    
    </body>
    </html>
    Last edited by Kwonnie; 07-11-2011 at 11:09 PM.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    More than a little curious as to (a) why you are including jQuery library but then not using jQuery and (b) what browser this works with. I would think that only MSIE would support using element id's as if they were page scope global variables.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I took out a lot of extra code for the sake of keeping it to the essentials in my post and I guess I forgot to remove that. And changing the while loops to if statements seems to work partially. With that said, I've only tested it in Firefox so far.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    consider

    Code:
    <html>
    <head><title></title>
    
    
    <script type="text/javascript">
    
    function move(id) {
     clearTimeout(move.to);
     var obj=document.getElementById(id);
     var slide=document.getElementById('scroll_clipper');
     var lft=parseInt(slide.style.left)
     if (lft!=-obj.offsetLeft) {
      slide.style.left=lft+(lft>-obj.offsetLeft?-1:1)+'px';
      move.to=setTimeout(function(){ move(id); },20);
     }
    }
    
    </script>
    
    </head>
    <body>
    
    <a href="javascript:move('slide1');">Red</a><a href="javascript:move('slide2');">Green</a>
    <div style="position:relative;width: 600px; height: 250px;overflow:hidden;" >
    <div id="scroll_clipper" style="position:absolute;left:0px;top:0px;width:10000px;" >
    <div style="width: 600px; height: 250px; background: red; float: left;" id="slide1"></div>
    <div style="width: 600px; height: 250px; background: green; float: left; position: relative; top: 0px;" id="slide2"></div>
    </div>
    </div>
    
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Or, making minimum changes to your original code:
    Code:
    <html>
    <head><title></title>
    
    <script type="text/javascript">
      var i = 0;
      function moveToGreen() {
        if (i < document.getElementById("slide2").offsetLeft) {
          document.getElementById("scroll_clipper").scrollLeft+=1;
          i++;
          var t = setTimeout(moveToGreen,10);
          }
      }
    
      function moveToRed() {
        if (i > document.getElementById("slide1").offsetLeft) {
          document.getElementById("scroll_clipper").scrollLeft-=1;
          i--;
          var t = setTimeout(moveToRed,10);
          }
      }
    	
    </script>
    
    </head>
    <body>
    
    <a href="javascript:moveToRed()">Red</a><a href="javascript:moveToGreen()">Green</a>
    <div style="width: 600px; height: 250px; overflow-y: hidden; overflow-x: hidden;" id="scroll_clipper">
        <div style="width: 600px; height: 250px; background: red; float: left;" id="slide1"></div>
        <div style="width: 600px; height: 250px; background: green; float: left; position: relative; top: -250px; left: 600px;" id="slide2"></div>
    </div> 
    
    </body>
    </html>
    Points to make:
    (1) You can't refer to objects by their bare id's. Except in MSIE. *SOMETIMES* it works in FF, but you will get a warning message if you use Firebug, for example, and often it won't work. Learn to use document.getElementById( ).

    (2) You were using a WHILE loop. Meaning that you were running through all the movement and EACH TIME through the loop you were setting off another timeout to do the whole sequence 100 ms later. You should *NOT* combine WHILE loops with setTimeout, as a general rule. I simply changed your WHILE to IF.


  •  

    Posting Permissions

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