Home/ Questions/Q 4606736
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T00:36:24+00:00

The current plugin, shown below, scrolls the top-most div in a series of divs

  • 0

The current plugin, shown below, scrolls the top-most div in a series of divs with the same class upwards, then removes it from the container, and appends it to the bottom of the series (within the container). This gives the illusion of a vertical slideshow. 

$.fn.rotateEach = function ( opts ) {
    var $this = this,
        defaults = {
            delay: 5000
        },
        settings = $.extend(defaults, opts),
        rotator = function ($elems) {
            $elems.eq(0).slideUp(500, function(){
                var $eq0 = $elems.eq(0).detach();
                $elems.parent().append($eq0);
                $eq0.fadeIn();

                setTimeout(function(){ rotator( $($elems.selector) ); },
                           settings.delay);
            });
        };

    setTimeout(function(){ rotator( $this ); }, settings.delay);
};

$('.dynPanelContent').rotateEach();

However, if there are a large number of elements to scroll through, this would make for a VERY long page. As such, I am attempting to re-write this script so that it accepts a parameter which will determine how many elements to display. Any elements exceeding this number will be hidden until they are in the top ‘x’ number of elements. Here is an example of what I have attempted to implement.

$.fn.rotateEach = function (opts) {
    var $this = this,
        defaults = {
            delay: 5000,
            //Add a parameter named elementsShown, pass in a default value of 3
            elementsShown: 3
        },
        settings = $.extend(defaults, opts),
        rotator = function ($elems) {
            //Hide the elements that are past the number to be shown
            for (i = settings.elementsShown; i <= $elems.eq; i++) {
                $elems.eq(i).hide();
            }
            $elems.eq(0).slideUp(500, function () {
                var $eq0 = $elems.eq(0).detach();
                var $eqN = $elems.eq(settings.elementsShown) - 1;
                //Check & Show the element that is now within the show range
                if ($elems.eq() == $eqN) {
                    $elems.eq($eqN).show('slow');
                }
                $elems.parent().append($eq0);
                $eq0.fadeIn();

                setTimeout(function () { rotator($($elems.selector)); },
                           settings.delay);
            });
        };
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use simple CSS for this, mate.

    If your elements are all of the same height (which your problem has to assume: if you are rotating a whole bunch of things dynamically, you won’t want your page to change height), then you don’t really need to use JavaScript for this at all. Just set the height of the container to what you want and hide the overflow. Then when you remove and append, everything appears to work. This won’t take care of your dynamic configuration, though.

    • 0