Geek Answers Handbook

JQuery Horizontal Scroll Hide / Show Scroll Arrows

I am trying to build a horizontal scrollable site with forward and reverse arrows (here you can see a rough js fiddle: http://jsfiddle.net/KcDqu/5/ )

This is the jquery that I have so far:

$(document).ready(function() { $('a.right-arrow').click(function() { $('section').animate({ marginLeft: "+=920" }, "medium"); }); $('a.left-arrow').click(function() { $('section').animate({ marginLeft: "-=920" }, "medium"); }); });

So far this is wonderful. However, there are two things that I want to add to this. Firstly, there shouldn't be a left arrow on the home screen, because there is no content to view on the left, and I don’t want users to simply scroll to empty space.

Secondly, I want the right arrow to hide when, for the same reason, you no longer need to display the image on the right.

It may not seem like the best way to do this ...

Any help would be greatly appreciated.

+4
source share
3 answers

You can take the value of the margin-left section and use this for recording conditions. Remember to use the conditions inside the animation function callback to get the exact value.

Here is jsFiddle.

 $(document).ready(function() { var windowWidth = $(window).width(); var maxRange = windowWidth * -2; //note: all of the conditions are same var val = parseInt($('section').css('margin-left')); if( val >= 0 ) { $('.right-arrow').hide();$('.left-arrow').show(); } else if( val < 0 && val > maxRange) { $('.right-arrow, .left-arrow').show(); } else if( val <= maxRange) { $('.left-arrow').hide();$('.right-arrow').show(); } $('a.right-arrow').click(function() { $('section').animate({ marginLeft: "+=" +windowWidth+ "px" },600,function() { var val = parseInt($('section').css('margin-left')); if( val >= 0 ) { $('.right-arrow').hide();$('.left-arrow').show(); } else if( val < 0 && val > maxRange) { $('.right-arrow, .left-arrow').show(); } else if( val <= maxRange) { $('.left-arrow').hide();$('.right-arrow').show(); } }); }); $('a.left-arrow').click(function() { $('section').animate({ marginLeft: "-=" +windowWidth+ "px" },600,function() { var val = parseInt($('section').css('margin-left')); if( val >= 0 ) { $('.right-arrow').hide();$('.left-arrow').show(); } else if( val < 0 && val > maxRange) { $('.right-arrow, .left-arrow').show(); } else if( val <= maxRange) { $('.left-arrow').hide();$('.right-arrow').show(); } }); }); });

Please note: do not use else in these syntaxes, this may cause a conflict.

0
source

The code was a bit difficult, as your horizontal slides are hardcoded to 920, and this is not always the width of the window. This will skip some content depending on the size of the window.

You have arrows to work correctly with this jQuery:

 $(document).ready(function () { var leftMargin = 0; var width = $(document).width(); var windowWidth = $(window).width(); $('.left-arrow').click(function () { $('section').animate({ marginLeft: "+=" + windowWidth }, "medium"); $('.right-arrow').show(); leftMargin = (leftMargin - windowWidth) if (leftMargin == 0) { $('.left-arrow').hide(); } }); $('.right-arrow').click(function () { $('section').animate({ marginLeft: "-=" + windowWidth }, "medium"); $('.left-arrow').show(); leftMargin = (leftMargin + windowWidth); if (leftMargin > width - windowWidth) { $('.right-arrow').hide(); } }); });

It will also make your arrows slide across the width of the window, so the content will not be skipped.

Also jsFiddle

EDIT: Deleted another, as they were unnecessary.

0
source

Usually I would give you some links to existing slider scripts, but I don’t know a single one that resizes nicely.

So, I adapted the code from my own PHP exception handler :)

 $('#list').each(function(){ var list = $(this), currentPos = 0, itemCount = list.children().length; $('.right, .left').click(function(){ // +100 = right, -100 = left var direction = $(this).hasClass('right') ? 100 : -100, nextIndex = direction > 0 ? currentPos + 1 : currentPos - 1; // do nothing if there is animation happening, // or if index is out of boundaries if($('> li', list).is(':animated') || (direction > 0 && nextIndex > itemCount - 1) || (direction < 0 && nextIndex < 0) ) return; var next = $('> li:eq(' + nextIndex + ')', list), current = $('> li:eq(' + currentPos + ')', list); currentPos = nextIndex; // determine if the link needs to be hidden $('.left, .right').removeClass('hide'); if(currentPos === 0 || currentPos === itemCount - 1) $(this).addClass('hide'); // adjust height of the container list.css('height', Math.max(current.outerHeight(true), next.outerHeight(true)) + 'px'); // make the current slide absolute current.css({ position: 'absolute', left: 0, top: 0, width: '100%', height: current.outerHeight(true) + 'px' }); // show the next slide next.css({ position: 'absolute', left: direction + '%', top: 0, width: '100%', height: next.outerHeight(true) + 'px' }).show().animate({left: '0%'}, 300, 'swing', function(){ next.css({ position: 'relative', left: 'auto', top: 'auto' }); }); // hide the current slide current.animate({left: (-direction) + '%'}, 300, 'swing', function(){ current.hide(); }); }); // mouse wheel action within the list area list.mousewheel(function(event, delta){ (delta > 0) ? $('.right').click() :$('.left').click(); }); });

CSS

 .hide{ display:none; } #list{ position: relative; width: 100%; overflow: hidden; } #list > li{ display: none; } #list > li:first-child{ display: block; }

The HTML structure should look like this:

 <a class="left"> left </a> <a class="right"> right </a> <ul id="list"> <li> ... </li> ... </ul>

Demo

mousewheel jQuery plugin. If you do not need mouse wheel support, delete the last event.

0
source

More articles:


All Articles