SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive thumbnail carousel - window.resize

    Hi all

    I have a jsfiddle here - http://jsfiddle.net/m26Ng/3/

    Demo here - http://www.ttmt.org.uk/forum/thumbs-2/

    I have a responsive thumbnails carousel thats scrolls thumbnails when pressing the arrows.

    When the window is resized I would like to reset the thumbnails so the thumbnails return to there starting position.

    This works on window resize but after the thumbnails are reset the arrows don't work.

    They start to work if you keep pressing them but then they work incorrectly sending the thumbnails
    past the position of the last thumbnail.

    I have reset the thumbnails here.

    Code:
      $(window).resize(function() {
        $(".thumbs ul").animate({'left':'0'});
        currentPosition=0;
      });
    Can anyone see why the arrows have stopped working?

    How can I can I reset the thumbnails on resize?

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Responsive slider demo</title>
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        
        <link rel="stylesheet" href="css/reset.css" />
        
        <style type="text/css">
          *{
            margin:0;
            padding:0;
          }
          body{ 
            background:#eee;
          }
          #thumbWrap{
            max-width:80%;
            background:#fff;
            margin:50px;
            position:relative;
          }
          .thumbs{
            overflow:hidden;
            white-space: nowrap;
            margin:0 60px;
            border: 1px solid #999;
          }
          .thumbs ul{
            position:relative;
            float:left;
          }
          .thumbs ul li{
            display: inline-block;
          }
          
          .arrow{
            font-size:2em;
            display:inline-block;
            padding:5px;
            background:red;
            position:absolute;
          }
          .arrow:hover{
            cursor:pointer;
          }
          .left{
            top:100px;
            left:10px;
          }
          
          .right{
            right:10px;
            top:100px;
          }
        </style>
      </head>
      
      <body>
        
        <div id="thumbWrap">
          
          <a class="arrow left">&larr;</a>
          <div class="thumbs">
            <ul>
              <li><a href="#"><img alt="" src="images/01.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/02.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/03.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/04.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/05.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/06.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/07.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/08.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/09.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/10.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/11.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/12.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/13.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/14.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/15.jpg" /></a></li>
            </ul>
          </div>
          <a class="arrow right">&rarr;</a>
        
        </div><!-- #thumbWrap-->
        
        <script>
          $(window).load(function(){
            var $thumbsContainer = $(".thumbs ul"),
                thumbsWidth = $thumbsContainer.width(),
                thumbsWindow = $(".thumbs").width(),
                currentPosition = 0,
                scrollAmount;
    
            $('.right').click(function(){
              if(currentPosition < thumbsWidth - (thumbsWindow * 2)){
                scrollAmount = thumbsWindow;
              } else {
                scrollAmount = thumbsWidth - (thumbsWindow + currentPosition)
              }
              $thumbsContainer.filter(':not(:animated)').animate({'left': '-=' + scrollAmount }, 1000, function(){
                currentPosition = Math.abs(parseInt($thumbsContainer.css('left')));
              });
            })
    
            $('.left').click(function(){
              if(currentPosition > 0 && currentPosition > thumbsWindow){
          			scrollAmount = thumbsWindow;
          		} else {
          			scrollAmount = thumbsWidth - (thumbsWidth - currentPosition);
          		}
              $thumbsContainer.filter(':not(:animated)').animate({'left': '+=' + scrollAmount }, 1000, function(){
                currentPosition = Math.abs(parseInt($thumbsContainer.css('left')));
              });
            });
          })
          
          $(window).resize(function() {
            $(".thumbs ul").animate({'left':'0'});
            currentPosition=0;
          });
          
        </script>
      </body>
    </html>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Your code is starting to grow as you add more features to your slider, so what I would do is stick it in an object, so as to keep it nice and compartmentalized.

    Here's what I mean:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <base href="http://www.ttmt.org.uk/forum/thumbs-2/" />
        <title>Responsive slider demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <link rel="stylesheet" href="css/reset.css" />
        <style type="text/css">
          body{ 
            background:#eee;
          }
          #thumbWrap{
            max-width:80%;
            background:#fff;
            margin:50px;
            position:relative;
          }
          .thumbs{
            overflow:hidden;
            white-space: nowrap;
            margin:0 60px;
            border: 1px solid #999;
          }
          .thumbs ul{
            position:relative;
            float:left;
          }
          .thumbs ul li{
            display: inline-block;
          }
          
          .arrow{
            font-size:2em;
            display:inline-block;
            padding:5px;
            background:red;
            position:absolute;
          }
          .arrow:hover{
            cursor:pointer;
          }
          .left{
            top:100px;
            left:10px;
          }
          
          .right{
            right:10px;
            top:100px;
          }
        </style>
      </head>
      
      <body>
        <div id="thumbWrap">
          <a class="arrow left">&larr;</a>
          <div class="thumbs">
            <ul>
              <li><a href="#"><img alt="" src="images/01.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/02.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/03.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/04.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/05.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/06.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/07.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/08.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/09.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/10.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/11.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/12.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/13.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/14.jpg" /></a></li>
              <li><a href="#"><img alt="" src="images/15.jpg" /></a></li>
            </ul>
          </div>
          <a class="arrow right">&rarr;</a>
        </div><!-- #thumbWrap-->
        
        <script>
          var Slider = {
            $thumbsContainer: $(".thumbs ul"),
            thumbsWindowWidth: 0,
            thumbsTotalWidth: 0,
            currentPosition: 0,
              
            scrollRight: function(){
              var rightScrollAmount;
              
              if(Slider.currentPosition < Slider.thumbsTotalWidth - (Slider.thumbsWindowWidth * 2)){
                rightScrollAmount = Slider.thumbsWindowWidth;
              } else {
                rightScrollAmount = Slider.thumbsTotalWidth - (Slider.thumbsWindowWidth + Slider.currentPosition)
              }
              Slider.$thumbsContainer.filter(':not(:animated)').animate({'left': '-=' + rightScrollAmount }, 1000, function(){
                Slider.currentPosition = Math.abs(parseInt(Slider.$thumbsContainer.css('left')));
              });
            }, 
            
            scrollleft: function(){
              var leftScrollAmount;
              
              if(Slider.currentPosition > 0 && Slider.currentPosition > Slider.thumbsWindowWidth){
                leftScrollAmount = Slider.thumbsWindowWidth;
              } else {
                leftScrollAmount = Slider.thumbsTotalWidth - (Slider.thumbsTotalWidth - Slider.currentPosition);
              }
              Slider.$thumbsContainer.filter(':not(:animated)').animate({'left': '+=' + leftScrollAmount }, 1000, function(){
                Slider.currentPosition = Math.abs(parseInt(Slider.$thumbsContainer.css('left')));
              });
            },
            
            reinitialize: function(){
              Slider.$thumbsContainer.animate({'left':'0'});
              Slider.thumbsWindowWidth = $(".thumbs").width();
              Slider.currentPosition = 0;
            },
            
            initialize: function(){
              Slider.thumbsTotalWidth = $(".thumbs ul").width();
              Slider.thumbsWindowWidth = $(".thumbs").width();
              
              $('.right').click(function(){
                Slider.scrollRight();
              })
              
              $('.left').click(function(){
                Slider.scrollleft();
              });
            }
          };
          
          $(window).load(function(){
            Slider.initialize();
          })
          
          $(window).resize(function() {
            Slider.reinitialize();
          });
        </script>
      </body>
    </html>
    Now when the page loads you just call Slider.initialize() and when the window is resized you just call Slider.reinitialize();

    Hope that helps.

    Oh, I've fixed the scrolling issues for you, too

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo, once again thanks thats brilliant.

    I'm still having the same problems though.

    This is what I'm doing:

    Click the right button, thumbnails slide to left.

    Resize the browser, the thumbnails slide back to there starting position.

    If I then click the right button nothing happens.

    I have to click the right button 4-5 times before thumbnails will move.

    I'm testing locally and live in Safari, Chrome and Firefox on Mac 10.8.3

    I have posted the same question on Stackoverflow and the response there is the code works.

    Is there someway this problem is just on my computer.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    Can you post a link to the page where you are currently having the problem (just to make sure we are looking at the same thing), then I will check on my PC.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    This is the latest version

    http://www.ttmt.org.uk/forum/thumbs-3/

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    I just followed the exact steps you listed above on the latest Chrome, FF, Opera, Safari, IE and I couldn't reproduce your issue.
    I'm on Win8 64bit.

    Maybe it's a Mac thing?

    @ralph.m ; has a mac. Maybe he wouldn't mind having a look if he reads this.

    Apart from that, if I were you, I'd try and find another PC to test on.

    Sorry I can't help more.

  7. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'll test on a PC

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Pullo View Post
    @ralph.m ; has a mac. Maybe he wouldn't mind having a look if he reads this.
    Hm, yes, it works on page load, but if I resize the browser in any way, both arrows cease to work.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Thanks Ralph, it really seems to be a Mac thing.
    How on earth does one go about debugging something like this?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Off Topic:

    Quote Originally Posted by Pullo View Post
    How on earth does one go about debugging something like this?
    I'm waiting for you to answer that.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Off Topic:

    Nah man, you're the Mac user

  12. #12
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to debug this?

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Try this.
    Does that make a difference?

  14. #14
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo thats working for me now.

    Are you just calling the reinitialize after half a second?

    Why has that fixed it?

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    It wasn't actually a mac issue, I just got to thinking about how you guys never have your windows full screen.
    I then thought you were probably dragging the window to resize (as opposed to toggling between full-screen and not full-screen like I was), causing the resize event to fire over and over and over ...
    I tried this on Windows and was able to reproduce the problem.

    Anyway, what I did was to throttle the resize event, so that it doesn't keep firing whilst you're still resizing, rather half a second after you stop.
    A delay of 500 milliseconds is probably a bit draconian, but you can have a play around with that.

    Glad we got it sorted

  16. #16
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well thanks again Pullo


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
  •