Suppose we have HTML code with the following structure:
<body>
<a id="panel-previous" href="#">previous</a>
<ul id="panel">
<li>ad</li>
<li>adipisicing</li>
<li>aliqua</li>
<li>aliquip</li>
<li>amet</li>
<li style="display:none;">anim</li>
<li style="display:none;">aute</li>
<li style="display:none;">cillum</li>
<li style="display:none;">commodo</li>
<li style="display:none;">consectetur</li>
<li style="display:none;">consequat</li>
<li style="display:none;">culpa</li>
</ul>
<a id="panel-next" href="#">next</a>
</body>
We want to show only five items at once, and we want to show next and previous items in a scrolling-like manner. This approach is based on showing only those items that should remain visible and hiding the others. The other one would be the classical container vs. content divs.
You need jquery, jquery.timers plugin (included in the attachment zip file) and the code we are going to comment now, as a panel.cer.js file in the attachment.
(function($){
$.fn.cerPanel = function () {
var speed = arguments.length > 0 ? parseInt(arguments[0]) : 100;
return this.each(function(){
var panel = $(this);
$('#'+panel.attr('id')+'-next').mousedown(function(e){
$(this).everyTime(speed, 'next', function(i){
if (panel.children(':visible ~ :hidden').length > 0) {
panel.children(':visible + :hidden').show();
panel.children(':visible:first').hide();
}
});
}).mouseup(function(e){
$(this).stopTime('next');
}).click(function(e){ e.preventDefault(); });
$('#'+panel.attr('id')+'-previous').mousedown(function(e){
$(this).everyTime(speed, 'prev', function(i){
if (panel.children(':hidden ~ :visible').length > 0) {
panel.children(':hidden:not(:visible ~ :hidden):last').show();
panel.children(':visible:last').hide();
}
});
}).mouseup(function(e){
$(this).stopTime('prev');
}).click(function(e){ e.preventDefault(); });
});
};
})(jQuery);
After the document is loaded you can call:
$('#panel').cerPanel();
$('#panel').cerPanel(mySpeed);
You will notice that in our HTML we defined ‘panel-previous’ and ‘panel-next’ links. You can use any clickable tag.
Those links works similar; we will focus on the ‘next’ link first:
On mouse down a timer starts repeating the same action: if there are more hidden items after a visible one then show the first hidden after a visible item and hide the first visible item. On mouse up stop doing it.
The ‘previous’ link works looking for visible items after a hidden one. If one item matches the condition it shows “the last hidden item that is not located after a visible one” and hides the last visible item.
This is useful when we want to scroll “complete” block items inside a parent block; this is not recommended to scroll text in the usual way.
No Comments on “Easy scrolling panels with jQuery”
You can track this conversation through its atom feed.