SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling multiple divs on a single page

    Hello! I'm working on a project where I need to horizontally scroll images within multiple divs throughout a webpage. (Kind of like the Netflix design, for those who know what I'm talking about. :P ) I'm relatively new to JavaScript (or even jQuery) and have been looking online for resource codes but have come up short. Most scrollers seen were only used for one DIV not the others needed.

    I've noticed that nesting a div within a div is how most codes have tried the technique but the JavaScript is what has stumped me. However, I recently came across a small snippet of code online which would seem to work but doesn't. I feel it has something to do with using an unordered list and CSS to figure out what's wrong but have come up short! It does seem to work when a single large image is in it though? If an extra pair of eyes can help diagnose the problem, that would be helpful!

    In short, this is how the code looks:
    Code:
    <html>
    <body>
    <script type="text/javascript">   
    var timer1;
    function scrollDiv(divId, depl) {
      var scroll_container = document.getElementById(divId);
      scroll_container.scrollLeft -= depl;
      timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
    }
    </script>
    
    	<div style="float:left; width: 30px">
       	<input type="button" value="" style="height: 200px" onmousedown="scrollDiv('MyDiv', 3)" onmouseup="clearTimeout(timer1)" />
    	</div>
    
    	<div id="MyDiv" style="float: left; width: 200px; height: 200px; border: 1px solid; overflow: hidden;">
       	<img src="picture2.jpg" alt="image large" style="height: 200px; float: left;" />
       	<img src="picture2.jpg" alt="image large" style="height: 200px; float: left;" />
    	</div>
    
    	<div style="float:left; width: 30px">
       	<input type="button" value="" style="height: 200px" onmousedown="scrollDiv('MyDiv', -3)" onmouseup="clearTimeout(timer1)" />
    	</div>
    
    	<br style="clear:both" />
    
    	<div style="float:left; width: 30px">
       	<input type="button" value="" style="height: 200px" onmousedown="scrollDiv('MyDiv', 3)" onmouseup="clearTimeout(timer1)" />
    	</div>
    
    	<div id="MyDiv" style="float: left; width: 200px; height: 200px; border: 1px solid; overflow: hidden;">
       	<img src="picture2.jpg" alt="image large" style="height: 200px; float: left;" />
       	<img src="picture2.jpg" alt="image large" style="height: 200px; float: left;" />
    	</div>
    
    	<div style="float:left; width: 30px">
       	<input type="button" value="" style="height: 200px" onmousedown="scrollDiv('MyDiv', -3)" onmouseup="clearTimeout(timer1)" />
    	</div>
    </body>
    </html>
    P.S. I will change it to using an external CSS file get rid of the redundant code! And use an image instead of the "button" input as the navigating object. This is the code that was taken from a guide site!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Take a look at http://www.felgall.com/jstip109.htm - just set up the divs as if they were going to be static content and then add class="marquee" to each and the script will do the rest. You can have as many horizontally scrolling areas as you like containing whatever you like and the one script handles them all.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Take a look at http://www.felgall.com/jstip109.htm - just set up the divs as if they were going to be static content and then add class="marquee" to each and the script will do the rest. You can have as many horizontally scrolling areas as you like containing whatever you like and the one script handles them all.
    I'm not looking for a marquee though? I want user controlled scrolling through the content. Thanks for the suggestion though.


Bookmarks

Posting Permissions

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