Responsive thumbnail carousel - window.resize

ttmt · May 5, 2013, 1:33pm

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.


  $(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?


<!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>

James_Hibbard · May 5, 2013, 7:28pm

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:

<!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

ttmt · May 6, 2013, 6:22am

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.

James_Hibbard · May 6, 2013, 6:29am

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.

ttmt · May 6, 2013, 6:36am

Hi

This is the latest version

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

James_Hibbard · May 6, 2013, 6:42am

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.

ttmt · May 6, 2013, 6:45am

Thanks, I’ll test on a PC

ralphm · May 6, 2013, 7:00am

Hm, yes, it works on page load, but if I resize the browser in any way, both arrows cease to work.

James_Hibbard · May 6, 2013, 7:02am

Thanks Ralph, it really seems to be a Mac thing.
How on earth does one go about debugging something like this?

ralphm · May 6, 2013, 7:04am

[ot]

I’m waiting for you to answer that. [/ot]

James_Hibbard · May 6, 2013, 7:05am

Off Topic:

Nah man, you’re the Mac user

ttmt · May 6, 2013, 7:06am

Is there a way to debug this?

James_Hibbard · May 6, 2013, 7:19am

Try this.
Does that make a difference?

ttmt · May 6, 2013, 7:41am

Thanks Pullo thats working for me now.

Are you just calling the reinitialize after half a second?

Why has that fixed it?

James_Hibbard · May 6, 2013, 7:46am

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

ttmt · May 6, 2013, 7:52am

Well thanks again Pullo