StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to stop sliding if only one <li> using anythingSlider(jQuery plugin)?
primarykey
Id
1707442
data
AcceptedAnswerId
1715075
AnswerCount
5
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2009-11-10T11:55:44.917
FavoriteCount
0
LastActivityDate
2013-10-03T11:52:41.817
LastEditDate
2009-11-11T11:16:22.457
LastEditorUserId
207738
OwnerUserId
207738
ParentId
0
PostTypeId
1
Score
1
ViewCount
3526
LastEditorDisplayName
text
Body
<p>I'm currently using the <a href="http://css-tricks.com/anythingslider-jquery-plugin/" rel="nofollow noreferrer">anythingSlider</a> plugin, it works totally fine except when there is only one <code><li></code>. </p> <p>The <code><li></code>s are generated from the database so sometimes there's only one. </p> <p>However, the anythingSlider plugin still tries to slide through the <code><li></code>s, it works by sliding back to the first slide. Although this doesn't look great.</p> <p>Does anybody know of a way of stopping it sliding if there's only one <code><li></code>?</p> <p>-- EDIT --</p> <p>Hi!</p> <p>Can anybody else help with this? I've tried the solution by Greg and I've also tried: </p> <pre><code>if (banners<1) { .anythingSlider({ startStopped: true, buildNavigation: false }); } </code></pre> <p>'banners' is my variable that I'm calling.</p> <p>And this disables the anythingSlider function altogether.</p> <p>Help please?!</p> <p>-- EDIT 2 --</p> <p>The original code is in the page of the html</p> <pre><code><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> </code></pre> <p>It's then being actioned by this file: <a href="http://image.ebuyer.com/customer/promos/js/topbanners.js" rel="nofollow noreferrer">http://image.ebuyer.com/customer/promos/js/topbanners.js</a></p> <pre><code>// 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(); }); </code></pre> <p>It's a bit of a hash job but works fine as long as there's more than one <code><li></code></p>
Tags
<javascript><jquery><jquery-plugins>
Title
How to stop sliding if only one <li> using anythingSlider(jQuery plugin)?
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USJonny Haynes
UserOwnerUserId
1. USJonny Haynes
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POHow to stop sliding if only one <li> using anythingSlider(jQuery plugin)?
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. COIf you can post up a full example of the code, I can have it fixed for you in about half an hour.
  singulars
  PostPostId
  POHow to stop sliding if only one <li> using anythingSlider(jQuery plugin)?
  UserUserId
  USInvent Partners Web Design

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.