Created
July 8, 2011 09:29
-
-
Save Luch/1071448 to your computer and use it in GitHub Desktop.
easyAccordion enhanced
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * easyAccordion 0.1.7 - jQuery plugin | |
| * written by Andrea Cima Serniotti | |
| * http://www.madeincima.eu | |
| * | |
| * Copyright (c) 2010 Andrea Cima Serniotti (http://www.madeincima.eu) | |
| * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. | |
| * Built for jQuery library http://jquery.com | |
| * | |
| * 0.1.1 7-05-2011 Luch Klooster | |
| * Added support for Opera browser | |
| * 0.1.2 26-06-2011 Luch Klooster | |
| * Added support for IE9, improved slide-number display for IE8 and IE9 | |
| * 0.1.3 01-07-2011 Luch Klooster | |
| * Added support for skins with activeCorner (eg. Stitch) | |
| * Added pauseOnHover | |
| * 0.1.4 19-02-2012 Luch Klooster | |
| * Added write/read cookie to support retaining active spine after page refresh | |
| * 0.1.5 2012-05-03 Martin Gautier (Fear of Mice) | |
| * Fixed "accordianInstance is undefined" on click event | |
| * Added afterClickCallback option | |
| * 0.1.6 2012-12-10 Luch Klooster | |
| * Added support for IE10, keeping support of IE9, IE8, IE7 and IE6 | |
| * 0.1.7 2012-12-15 Luch Klooster | |
| * Added Loop true slides ones and stop on startSlide (option continuous: true|false) (thanks to matt mcinvale) | |
| * Added act on hover of spine | |
| */ | |
| (function(jQuery) { | |
| jQuery.fn.easyAccordion = function(options) { | |
| var defaults = { | |
| slideNum: true, | |
| autoStart: false, | |
| pauseOnHover: false, | |
| actOnHover: false, | |
| slideInterval: 3000, | |
| startSlide: 1, | |
| cookiename: "easyaccordion", | |
| afterClickCallback: null, | |
| continuous: true | |
| }; | |
| this.each(function() { | |
| var settings = jQuery.extend(defaults, options); | |
| jQuery(this).find('dl').addClass('easy-accordion'); | |
| // -------- Set the variables ------------------------------------------------------------------------------ | |
| jQuery.fn.setVariables = function() { | |
| dlWidth = jQuery(this).width(); | |
| dlHeight = jQuery(this).height(); | |
| dtWidth = jQuery(this).find('dt').outerHeight(); | |
| dtWidth2 = dtWidth; | |
| slideTotal = jQuery(this).find('dt').size(); | |
| ddWidth = dlWidth - (dtWidth*slideTotal) - (jQuery(this).find('dd').outerWidth(true)-jQuery(this).find('dd').width()); | |
| if (jQuery.browser.msie && jQuery.browser.version < 9.0){ | |
| dtWidth = jQuery(this).find('dt').outerWidth(); | |
| jQuery('html').addClass('lteIE8'); // Add class lteIE8 to HTML tag for 'conditional' CSS | |
| } | |
| dtHeight = dlHeight - (jQuery(this).find('dt').outerWidth()-jQuery(this).find('dt').width()); | |
| ddHeight = dlHeight - (jQuery(this).find('dd').outerHeight(true)-jQuery(this).find('dd').height()); | |
| }; | |
| jQuery(this).setVariables(); | |
| // -------- Fix some cross-browser issues due to the CSS rotation ------------------------------------- | |
| var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; | |
| if (jQuery.browser.msie && jQuery.browser.version < 9.0) { | |
| var dtTop = 0; | |
| var dtOffset = 0; | |
| } | |
| // -------- Getting things ready ------------------------------------------------------------------------------ | |
| var f = 1; | |
| var paused = false; | |
| var noMoreActiveID = 0; | |
| var startSlide = settings.startSlide; | |
| var re = new RegExp(settings.cookiename+"=[^;]+", "i"); //construct RE to search for target name/value pair | |
| if (document.cookie.match(re)) { //if cookie found | |
| startSlide = document.cookie.match(re)[0].split("=")[1]; //return its value | |
| }; | |
| jQuery(this).find('dt').each(function(){ | |
| jQuery(this).css({'width':dtHeight,'top':dtTop,'margin-left':dtOffset}); | |
| // add unique id to each tab | |
| jQuery(this).addClass('spine_' + f); | |
| // add active corner | |
| var corner = document.createElement('div'); | |
| corner.className = 'activeCorner spine_' + f; | |
| jQuery(this).append(corner); | |
| if (settings.slideNum == true){ | |
| jQuery('<span class="slide-number">'+f+'</span>').appendTo(this); | |
| if (jQuery.browser.msie){ | |
| var slideNumTop = jQuery(this).find('.slide-number').css('bottom'); | |
| var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top')); | |
| var slideNumLeft = 10; | |
| if (jQuery.browser.version == 8.0){ | |
| slideNumTopVal = slideNumTopVal - 17; | |
| slideNumLeft = 0; | |
| } | |
| if (jQuery.browser.version == 6.0 || jQuery.browser.version == 7.0){ | |
| slideNumTopVal = slideNumTopVal + 17; | |
| slideNumLeft = 0; | |
| } | |
| jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal}); | |
| jQuery(this).find('.slide-number').css({'left': slideNumLeft}) | |
| } else { | |
| var slideNumTop = jQuery(this).find('.slide-number').css('bottom'); | |
| var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top')); | |
| jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal}); | |
| } | |
| } | |
| if (startSlide == f){ | |
| jQuery(this).addClass('active'); | |
| } | |
| f = f + 1; | |
| }); | |
| if (jQuery(this).find('.active').size()) { | |
| jQuery(this).find('.active').next('dd').addClass('active'); | |
| } else { | |
| jQuery(this).find('dt:first').addClass('active').next('dd').addClass('active'); | |
| } | |
| jQuery(this).find('dt:first').css({'left':'0'}).next().css({'left':dtWidth2}); | |
| jQuery(this).find('dd').css({'width':ddWidth,'height':ddHeight}); | |
| // -------- Functions ------------------------------------------------------------------------------ | |
| //jQuery.each( jQuery(".verticalText"), function () { jQuery(this).html(jQuery(this).text().replace(/(.)/g, "$1<br />")) } ); | |
| jQuery.fn.findActiveSlide = function() { | |
| var i = 1; | |
| jQuery(this).find('dt').each(function(){ | |
| if (jQuery(this).hasClass('active')){ | |
| activeID = i; // Active slide | |
| } else if (jQuery(this).hasClass('no-more-active')){ | |
| noMoreActiveID = i; // No more active slide | |
| } | |
| i = i + 1; | |
| }); | |
| }; | |
| jQuery.fn.calculateSlidePos = function() { | |
| var u = 2; | |
| jQuery(this).find('dt').not(':first').each(function(){ | |
| var activeDtPos = dtWidth*activeID; | |
| if (u <= activeID){ | |
| var leftDtPos = dtWidth*(u-1); | |
| jQuery(this).animate({'left': leftDtPos}); | |
| if (u < activeID){ // If the item sits to the left of the active element | |
| jQuery(this).next().css({'left':leftDtPos+dtWidth}); | |
| } else { // If the item is the active one | |
| jQuery(this).next().animate({'left':activeDtPos}); | |
| } | |
| } else { | |
| var rightDtPos = dlWidth-(dtWidth*(slideTotal-u+1)); | |
| jQuery(this).animate({'left': rightDtPos}); | |
| var rightDdPos = rightDtPos+dtWidth; | |
| jQuery(this).next().animate({'left':rightDdPos}); | |
| } | |
| u = u+ 1; | |
| }); | |
| setTimeout( function() { | |
| jQuery('.easy-accordion').find('dd').not('.active').each(function(){ | |
| jQuery(this).css({'display':'none'}); | |
| }); | |
| }, 400); | |
| }; | |
| jQuery.fn.activateSlide = function() { | |
| this.parent('dl').setVariables(); | |
| this.parent('dl').find('dd').css({'display':'block'}); | |
| this.parent('dl').find('dd.plus').removeClass('plus'); | |
| this.parent('dl').find('.no-more-active').removeClass('no-more-active'); | |
| this.parent('dl').find('.active').removeClass('active').addClass('no-more-active'); | |
| this.addClass('active').next().addClass('active'); | |
| this.parent('dl').findActiveSlide(); | |
| if (activeID < noMoreActiveID){ | |
| this.parent('dl').find('dd.no-more-active').addClass('plus'); | |
| } | |
| this.parent('dl').calculateSlidePos(); | |
| document.cookie = settings.cookiename+"="+activeID; | |
| }; | |
| jQuery.fn.rotateSlides = function(slideInterval, timerInstance) { | |
| var accordianInstance = jQuery(this); | |
| timerInstance.value = setTimeout(function(){accordianInstance.rotateSlides(slideInterval, timerInstance);}, slideInterval); | |
| if (paused == false){ | |
| jQuery(this).findActiveSlide(); | |
| var totalSlides = jQuery(this).find('dt').size(); | |
| var newSlide = activeID + 1; | |
| if (newSlide > totalSlides) { | |
| newSlide = 1; | |
| } | |
| jQuery(this).find('dt:eq(' + (newSlide-1) + ')').activateSlide(); // activate the new slide | |
| if (settings.continuous == false) { | |
| if (newSlide == startSlide) { | |
| clearTimeout(timerInstance.value); | |
| return; | |
| } | |
| } | |
| } | |
| }; | |
| // -------- Let's do it! ------------------------------------------------------------------------------ | |
| function trackerObject() {this.value = null} | |
| var timerInstance = new trackerObject(); | |
| var oldActiveID; | |
| jQuery(this).findActiveSlide(); | |
| jQuery(this).calculateSlidePos(); | |
| jQuery(this).find('dt.active').activateSlide(); | |
| if (settings.autoStart == true){ | |
| var accordianInstance = jQuery(this); | |
| var interval = parseInt(settings.slideInterval); | |
| timerInstance.value = setTimeout(function(){ | |
| accordianInstance.rotateSlides(interval, timerInstance); | |
| }, interval); | |
| } | |
| jQuery('dt').not('active').click(function(){ | |
| jQuery(this).activateSlide(); | |
| accordionInstance = jQuery(this); | |
| clearTimeout(timerInstance.value); | |
| timerInstance.value = setTimeout(function(){ | |
| accordionInstance.rotateSlides(interval, timerInstance); | |
| }, interval); | |
| if (typeof settings.afterClickCallback == "function") settings.afterClickCallback(); //activate callback if there is one | |
| }) | |
| jQuery('dt').mouseenter(function(){ | |
| if (settings.actOnHover == true) { | |
| paused = true; | |
| jQuery(this).activateSlide(); | |
| } | |
| }) | |
| jQuery('dt').mouseleave(function(){ | |
| if (settings.actOnHover == true) { | |
| paused = false; | |
| } | |
| }) | |
| if (!(jQuery.browser.msie && jQuery.browser.version == 6.0)){ | |
| jQuery('dt').hover(function(){ | |
| jQuery(this).addClass('hover'); | |
| }, function(){ | |
| jQuery(this).removeClass('hover'); | |
| }); | |
| } | |
| if (settings.pauseOnHover == true){ | |
| jQuery('dd').hover(function(){ | |
| paused = true; | |
| }, function(){ | |
| paused = false; | |
| }); | |
| } | |
| }); | |
| }; | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment