0

I'm probably missing something really simple but I just can't get this to work! I've based it on this question - Horizontal scrolling div using buttons

It doesn't scroll left or right.

I've also got this error:

enter image description here

Also when the links are clicked the page reloads/jumps, is there a way to fix that?

                <div id="imgThumbs" class="scroller" style="height:97px;width: 306px; overflow: hidden; white-space: nowrap;">
                    <a href="#" id="left-button">Left</a>  
                    <a href="#" id="right-button">Right</a>
                    <div id="contentScroller">                         
                    <?php $counter = 1; while(the_repeater_field('images')): ?>                     
                        <a href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
                            <img class="image-<?php echo $counter; ?>" src="<?php echo the_sub_field('image'); ?>" width="90" height="68" alt="<?php echo the_title(); ?> <?php echo $counter; ?>" />
                        </a>
                    <?php $counter++; endwhile; ?>
                    </div>
                </div>

                <script>
                jQuery(document).ready(function ($) {
                        $('#right-button').click(function {
                            $('#contentScroller').animate({
                            marginLeft: -="306px"
                            }, "fast");
                        });
                        $('#left-button').click(function {
                            $('#contentScroller').animate({
                            marginLeft: +="306px"
                            }, "fast");
                        });                     
                    });
                    </script>

UPDATE

I just found something else... you're able to keep scrolling left and right even when the content ends. So if there's 6 images in there, it shows the first 3, click right, shows the next 3, click right and it scrolls to an empty area, click again and so on. Is there any way to fix that?

Community
  • 1
  • 1
Rob
  • 6,304
  • 24
  • 83
  • 189
  • But what is the problem and where? – Lion Nov 02 '12 at 15:43
  • @Lion Sorry, updated, it's not scrolling left or right when clicking the buttons. – Rob Nov 02 '12 at 15:47
  • 2
    In your click handler, `function {` should be `function() {`. That will solve the error you are seeing. – AndrewR Nov 02 '12 at 15:51
  • @AndrewR I'm now getting the same error but with `-=` – Rob Nov 02 '12 at 15:54
  • 1
    `marginLeft: -="305px"` is incorrect. The -= needs to go inside the quotes. `marginLeft:"-=305pc"` – AndrewR Nov 02 '12 at 16:09
  • @AndrewR Brilliant. Like I said I'd taken this from the link in my question so they hadn't fixed the errors in an accepted answer. Do you want to post an answer for me to accept? – Rob Nov 02 '12 at 16:11
  • 1
    Good deal, those pesky syntax bugs will get you every time. One misplaced character and the entire thing breaks. – AndrewR Nov 02 '12 at 16:18

1 Answers1

1

In your click handler, function { should be function() {.

marginLeft: -="305px" is incorrect. The -= needs to go inside the quotes. marginLeft:"-=305px"

UPDATE

I didn't test this, but basically what you need to do is make sure that you are not at the end of the left or right before doing the animation. You may need to make some modifications to this for your application, but it should give you the basic idea.

jQuery(document).ready(function ($) {
    $('#right-button').click(function() {
        if($('#contentScroller').css('marginLeft') > 0){
            $('#contentScroller').animate({
                marginLeft: "-=306px"
                }, "fast");
             });
         }

    $('#left-button').click(function() {
         if($('#contentScroller').css('marginLeft') < -1 * $('#contentScroller').width()){
            $('#contentScroller').animate({
                marginLeft: "+=306px"
                }, "fast");
            });                     
         }
    });
});
AndrewR
  • 6,668
  • 1
  • 24
  • 38
  • I just found something else... you're able to keep scrolling left and right even when the content ends. So if there's 6 images in there, it shows the first 3, click right, shows the next 3, click right and it scrolls to an empty area, click again and so on. Is there any way to fix that? – Rob Nov 02 '12 at 16:32
  • Hmm, just tried the update, it doesn't seem to scroll left/right now. – Rob Nov 05 '12 at 11:30
  • Yeah, I didn't test it. You may need to do a `parseInt($('#contentScroller').css('marginLeft'))` – AndrewR Nov 06 '12 at 16:42