1

I'm currently using the anythingSlider plugin, it works totally fine except when there is only one <li>.

The <li>s are generated from the database so sometimes there's only one.

However, the anythingSlider plugin still tries to slide through the <li>s, it works by sliding back to the first slide. Although this doesn't look great.

Does anybody know of a way of stopping it sliding if there's only one <li>?

-- EDIT --

Hi!

Can anybody else help with this? I've tried the solution by Greg and I've also tried:

if (banners<1) {
    .anythingSlider({
        startStopped: true,
        buildNavigation: false
        });
    }

'banners' is my variable that I'm calling.

And this disables the anythingSlider function altogether.

Help please?!

-- EDIT 2 --

The original code is in the page of the html

<script type="text/javascript">

var banners=[];

banners[0]="http://image.ebuyer.com/customer/promos/UK/AcerAspire5536.jpg";
//banners[1]="http://image.ebuyer.com/customer/promos/2150/banner.jpg";
//banners[2]="http://image.ebuyer.com/customer/promos/UK/257653_FerrariOne_tb20091026.jpg";
//banners[3]="http://image.ebuyer.com/customer/promos/UK/247038_compaq_images/247038_compaq_incentive_banner20090814.jpg"; //added 03/09/2009
//banners[4]="http://image.ebuyer.com/customer/promos/UK/247858-samsung-tv-comp-tb20090817.jpg"; //added 19/08/2009

var bannerLink=[];

bannerLink[0]="http://www.ebuyer.com/product/173536";
//bannerLink[1]="/special/2150";
//bannerLink[2]="/product/172295";
//bannerLink[3]="/compaq-cash-incentive";
//bannerLink[4]="/special/2101";

var bannerAlt=[];

bannerAlt[0]="Acer Aspire 5536";
//bannerAlt[1]="The X5 range for Asus";
//bannerAlt[2]="Acer Ferrari One Laptop";
//bannerAlt[3]="Buy these three products together and claim £75 cashback";
//bannerAlt[4]="Win a Samsung 46in LCV TV";

</script>

It's then being actioned by this file: http://image.ebuyer.com/customer/promos/js/topbanners.js

// function to import css and javascript from external locations
function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

// importing css and javascript
loadjscssfile("http://static.ebuyer.com/css/slider.css", "css") ////dynamically load and add this .css file

// setting the variables
var banner = document.getElementById('tehBanner');
var link = document.getElementById('tehLink');

// this function creates the tracking tags
function tracking (x) {
    if (x.indexOf("?")>=0){x+='&tb='+(i+1);}else{x+='?tb='+(i+1);}
    return x 
    }

// telling the javascript to display all available variables    
for (var i in banners) {
    banner.alt = bannerAlt[i];  
    link.href = tracking(bannerLink[i]);
    banner.src = banners[i];
    document.write('<a href="' + bannerLink[i] + '" class="slide-link">' + '<img src="' + banners[i] + '" id="slide-image" alt="' + bannerAlt[i] + '" /></a>');
    }

// remove the original banner
$ ('a#tehLink').parent().remove();

// hide banners to begin with
$('a.slide-link').hide();

/*
    anythingSlider v1.1

    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/


    To use the navigationFormatter function, you must have a function that
    accepts two paramaters, and returns a string of HTML text.

    index = integer index (1 based);
    panel = jQuery wrapped LI item this tab references
    @return = Must return a string of HTML/Text

    navigationFormatter: function(index, panel){
        return index + " Panel"; // This would have each tab with the text 'X Panel' where X = index
    }
*/

(function($){

    $.anythingSlider = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el; 

        // Set up a few defaults
        base.currentPage = 1;
        base.timer = null;
        base.playing = false;

        // Add a reverse reference to the DOM object
        base.$el.data("AnythingSlider", base);

        base.init = function(){
            base.options = $.extend({},$.anythingSlider.defaults, options);

            // Cache existing DOM elements for later 
            base.$wrapper = base.$el.find('> div').css('overflow', 'hidden');
            base.$slider  = base.$wrapper.find('> ul');
            base.$items   = base.$slider.find('> li');
            base.$single  = base.$items.filter(':first');

            // Build the navigation if needed
            if(base.options.buildNavigation) base.buildNavigation();

            // Get the details
            base.singleWidth = base.$single.outerWidth();
            base.pages = base.$items.length;

            // Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
            // This supports the "infinite" scrolling
            base.$items.filter(':first').before(base.$items.filter(':last').clone().addClass('cloned'));
            base.$items.filter(':last' ).after(base.$items.filter(':first').clone().addClass('cloned'));

            // We just added two items, time to re-cache the list
            base.$items = base.$slider.find('> li'); // reselect

            // Setup our forward/backward navigation
            base.buildNextBackButtons();

            // If autoPlay functionality is included, then initialize the settings
            if(base.options.autoPlay) {
                base.playing = !base.options.startStopped; // Sets the playing variable to false if startStopped is true
                base.buildAutoPlay();
            };

            // If pauseOnHover then add hover effects
            if(base.options.pauseOnHover) {
                base.$el.hover(function(){
                    base.clearTimer();
                }, function(){
                    base.startStop(base.playing);
                });
            }

            // If a hash can not be used to trigger the plugin, then go to page 1
            if((base.options.hashTags == true && !base.gotoHash()) || base.options.hashTags == false){
                base.setCurrentPage(1);
            };
        };

        base.gotoPage = function(page, autoplay){
            // When autoplay isn't passed, we stop the timer
            if(autoplay !== true) autoplay = false;
            if(!autoplay) base.startStop(false);

            if(typeof(page) == "undefined" || page == null) {
                page = 1;
                base.setCurrentPage(1);
            };

            // Just check for bounds
            if(page > base.pages + 1) page = base.pages;
            if(page < 0 ) page = 1;

            var dir = page < base.currentPage ? -1 : 1,
                n = Math.abs(base.currentPage - page),
                left = base.singleWidth * dir * n;

            base.$wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, base.options.animationTime, base.options.easing, function () {
                if (page == 0) {
                    base.$wrapper.scrollLeft(base.singleWidth * base.pages);
                    page = base.pages;
                } else if (page > base.pages) {
                    base.$wrapper.scrollLeft(base.singleWidth);
                    // reset back to start position
                    page = 1;
                };
                base.setCurrentPage(page);

            });
        };

        base.setCurrentPage = function(page, move){
            // Set visual
            if(base.options.buildNavigation){
                base.$nav.find('.cur').removeClass('cur');
                $(base.$navLinks[page - 1]).addClass('cur');    
            };

            // Only change left if move does not equal false
            if(move !== false) base.$wrapper.scrollLeft(base.singleWidth * page);

            // Update local variable
            base.currentPage = page;
        };

        base.goForward = function(autoplay){
            if(autoplay !== true) autoplay = false;
            base.gotoPage(base.currentPage + 1, autoplay);
        };

        base.goBack = function(){
            base.gotoPage(base.currentPage - 1);
        };

        // This method tries to find a hash that matches panel-X
        // If found, it tries to find a matching item
        // If that is found as well, then that item starts visible
        base.gotoHash = function(){
            if(/^#?panel-\d+$/.test(window.location.hash)){
                var index = parseInt(window.location.hash.substr(7));
                var $item = base.$items.filter(':eq(' + index + ')');
                if($item.length != 0){
                    base.setCurrentPage(index);
                    return true;
                };
            };
            return false; // A item wasn't found;
        };

        // Creates the numbered navigation links
        base.buildNavigation = function(){
            base.$nav = $("<div id='thumbNav'></div>").appendTo(base.$el);
            base.$items.each(function(i,el){
                var index = i + 1;
                var $a = $("<a href='#'></a>");

                // If a formatter function is present, use it
                if( typeof(base.options.navigationFormatter) == "function"){
                    $a.html(base.options.navigationFormatter(index, $(this)));
                } else {
                    $a.text(index);
                }
                $a.click(function(e){
                    base.gotoPage(index);

                    if (base.options.hashTags)
                        base.setHash('panel-' + index);

                    e.preventDefault();
                });
                base.$nav.append($a);
            });
            base.$navLinks = base.$nav.find('> a');
        };


        // Creates the Forward/Backward buttons
        base.buildNextBackButtons = function(){
            var $forward = $('<a class="arrow forward">&gt;</a>'),
                $back    = $('<a class="arrow back">&lt;</a>');

            // Bind to the forward and back buttons
            $back.click(function(e){
                base.goBack();
                e.preventDefault();
            });

            $forward.click(function(e){
                base.goForward();
                e.preventDefault();
            });

            // Append elements to page
            base.$wrapper.after($back).after($forward);
        };

        // Creates the Start/Stop button
        base.buildAutoPlay = function(){

            base.$startStop = $("<a href='#' id='start-stop'></a>").html(base.playing ? base.options.stopText :  base.options.startText);
            base.$el.append(base.$startStop);            
            base.$startStop.click(function(e){
                base.startStop(!base.playing);
                e.preventDefault();
            });

            // Use the same setting, but trigger the start;
            base.startStop(base.playing);
        };

        // Handles stopping and playing the slideshow
        // Pass startStop(false) to stop and startStop(true) to play
        base.startStop = function(playing){
            if(playing !== true) playing = false; // Default if not supplied is false

            // Update variable
            base.playing = playing;

            // Toggle playing and text
            base.$startStop.toggleClass("playing", playing).html( playing ? base.options.stopText : base.options.startText );

            if(playing){
                base.clearTimer(); // Just in case this was triggered twice in a row
                base.timer = window.setInterval(function(){
                    base.goForward(true);
                }, base.options.delay);
            } else {
                base.clearTimer();
            };
        };

        base.clearTimer = function(){
            // Clear the timer only if it is set
            if(base.timer) window.clearInterval(base.timer);
        };

        // Taken from AJAXY jquery.history Plugin
        base.setHash = function ( hash ) {
            // Write hash
            if ( typeof window.location.hash !== 'undefined' ) {
                if ( window.location.hash !== hash ) {
                    window.location.hash = hash;
                };
            } else if ( location.hash !== hash ) {
                location.hash = hash;
            };

            // Done
            return hash;
        };
        // <-- End AJAXY code


        // Trigger the initialization
        base.init();
    };


    $.anythingSlider.defaults = {
        easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
        startStopped: false,            // If autoPlay is on, this can force it to start stopped
        delay: 3000,                    // How long between slide transitions in AutoPlay mode
        animationTime: 600,             // How long the slide transition takes
        hashTags: true,                 // Should links change the hashtag in the URL?
        buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Start",             // Start text
        stopText: "Stop",               // Stop text
        navigationFormatter: null       // Details at the top of the file on this use (advanced use)
    };


    $.fn.anythingSlider = function(options){
        if(typeof(options) == "object"){
            return this.each(function(i){           
                (new $.anythingSlider(this, options));

                // This plugin supports multiple instances, but only one can support hash-tag support
                // This disables hash-tags on all items but the first one
                options.hashTags = false;
            }); 
        } else if (typeof(options) == "number") {

            return this.each(function(i){
                var anySlide = $(this).data('AnythingSlider');
                if(anySlide){
                    anySlide.gotoPage(options);
                }
            });
        }
    };


})(jQuery);

// this function wraps the elements in the neccessary tags to work with anything Slider
$ (document).ready(function() {
    $('a.slide-link')
        .wrap('<li class="slide-list-item"></li>');
    $('li.slide-list-item')
        .wrapAll('<ul id="slide-list"></ul>');
    $('ul#slide-list')
        .wrapAll('<div class="wrapper"></div>');
    $('div.wrapper')
        .wrapAll('<div class="anythingSlider internalSlider"></div>');
    $('.anythingSlider')
        .anythingSlider({
            easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
            autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
            startStopped: false,            // If autoPlay is on, this can force it to start stopped
            delay: 7000,                    // How long between slide transitions in AutoPlay mode
            animationTime: 600,             // How long the slide transition takes
            hashTags: false,                 // Should links change the hashtag in the URL?
            buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
            pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
            startText: "Start",             // Start text
            stopText: "Stop",               // Stop text
            navigationFormatter: null       // Details at the top of the file on this use (advanced use)
        });
    $('a.slide-link').show();
    });

It's a bit of a hash job but works fine as long as there's more than one <li>

1
  • If you can post up a full example of the code, I can have it fixed for you in about half an hour. Nov 11, 2009 at 10:28
1

Try this:

// this function wraps the elements in the neccessary tags to work with anything Slider
$ (document).ready(function() {
    $('a.slide-link')
        .wrap('<li class="slide-list-item"></li>');
    $('li.slide-list-item')
        .wrapAll('<ul id="slide-list"></ul>');
    $('ul#slide-list')
        .wrapAll('<div class="wrapper"></div>');
    $('div.wrapper')
        .wrapAll('<div class="anythingSlider internalSlider"></div>');

    if(banners.length > 1){
        autoplayval= true;
    } else {
        autoplayval= false;
    }
    $('.anythingSlider')
        .anythingSlider({
            easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
            autoPlay: autoplayval,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
            startStopped: false,            // If autoPlay is on, this can force it to start stopped
            delay: 7000,                    // How long between slide transitions in AutoPlay mode
            animationTime: 600,             // How long the slide transition takes
            hashTags: false,                 // Should links change the hashtag in the URL?
            buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
            pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
            startText: "Start",             // Start text
            stopText: "Stop",               // Stop text
            navigationFormatter: null       // Details at the top of the file on this use (advanced use)
        });
    $('a.slide-link').show();
});
1
  • That's magic ... it was the if(banners.length > 1) bit that I couldn't figure out. I'm still new to jQuery. I've tweaked the end code a bit but essentially it's the same(I removed the autoplayval variable) I'll add the thanks in the code. :-D Cheers Nov 11, 2009 at 13:29
1

Changing this

$('.anythingSlider').anythingSlider({...});

to this

$('.anythingSlider:has(li:nth-child(2)').anythingSlider({...});

should do it

This assumes you don't have nested lists.

5
  • Hi this doesn't work. It disables the function altogether even if there are more than 1 item. Nov 10, 2009 at 12:54
  • it's the same as the anything slider ... it's live on this page ... ebuyer.com/store/Computer/cat/Laptop---PC-Accessories Nov 10, 2009 at 14:30
  • Greg just forgot a closing bracket within the selector, did you copy it directly or fix that?
    – roborourke
    Nov 11, 2009 at 10:30
  • sorry, just to clarify it should be '.anythingSlider:has(li:nth-child(2))'
    – roborourke
    Nov 11, 2009 at 10:31
  • @sanchothefat I tried that initially and it didn't work ... I noticed he was missing the closing bracket myself. Nov 11, 2009 at 11:08
1

I had this problem and could only resolve this with a new version of the plugin: v1.5.3
URL: https://github.com/ProLoser/AnythingSlider/downloads

Once you've got the latest version, only change one line:

base.setCurrentPage(startPanel, false); // added to trigger events for FX code

When I have only one <li> the anythingControls element's style is display=none.

0

This will only activate the slider if more than 1 <LI> elements are present:

jQuery("#sliderDiv:has(>li:eq(1))").anythingSlider({...})

it assumes your HTML structure is like this:

<div id="sliderDiv">
  <li>Offer 1</li>
  <li>Offer 2</li>
</div>
1
  • this doesn't work either ... although it doesn't disable the slider like the previous suggestion ... so it must be close to being right! Nov 11, 2009 at 11:33
0

You'll need something like

if($([ULELEMENT]).children('li').length > 1){

//Your code

}

Something along those lines. If you post your code, I can give it a try.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.