Sticky Accordion issue
-
I’ve installed a theme, StarDesign, which uses Kwicks accordion. When I set “sticky: true” in the JS the accordion distorts and acts in a strange manner.
Can someone give some insight into what might be going on here? I have a fairly urgent deadline of Friday (2 days time) so prompt responses would be greatly appreciated.
Slider can be viewed at https://www.computelec.greenhatmktg.com.au
Current code:
(function($){ $.fn.kwicks = function(options) { var defaults = { isVertical: false, sticky: true, defaultKwick: 0, event: 'mouseover', spacing: 0, duration: 500 }; var o = $.extend(defaults, options); var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top return this.each(function() { container = $(this); var kwicks = container.children('li'); /* added by codestar */ var normWoH = (o.width/kwicks.length); // normWoH = Normal Width or Height if(!o.max) { o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1)); } else { o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1); } // set width of container ul if(o.isVertical) { container.css({ /* added by codestar */ width : o.width, height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px' }); } else { container.css({ /* added by codestar */ width : o.width, height : kwicks.eq(0).css('height') }); } // pre calculate left or top values for all kwicks but the first and last // i = index of currently hovered kwick, j = index of kwick we're calculating var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's for(i = 0; i < kwicks.size(); i++) { preCalcLoTs[i] = []; // don't need to calculate values for first or last kwick for(j = 1; j < kwicks.size() - 1; j++) { if(i == j) { preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing); } else { preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing); } } } // loop through all kwick elements kwicks.each(function(i) { var kwick = $(this); /*kwick.find("img").hide().fadeIn("fast"); // + 10ms */ kwick.find('.kw_title').css({'opacity': 0.5}); // set initial width or height and left or top values // set first kwick if(i === 0) { /* added by codestar */ kwick.css({"left": '0px', width:normWoH}); } // set last kwick else if(i == kwicks.size() - 1) { /* added by codestar */ kwick.css({'right': '0px', width:normWoH}); } // set all other kwicks else { if(o.sticky) { /* added by codestar */ kwick.css({LoT: preCalcLoTs[o.defaultKwick][i], width:normWoH}); } else { /* added by codestar */ kwick.css({left: (i * normWoH) + (i * o.spacing), width:normWoH}); } } // correct size in sticky mode if(o.sticky) { if(o.defaultKwick == i) { kwick.css(WoH, o.max + 'px'); kwick.addClass('active'); } else { kwick.css(WoH, o.min + 'px'); } } kwick.css({ margin: 0, position: 'absolute' }); /* added by codestar */ kwick.hover( function() { kwick.find(".kw_title").stop().fadeTo(500, 0); kwick.find(".kw_desc").stop().animate({'opacity':'1', bottom:"0px"},500, "easeOutExpo"); }, function() { kwick.find(".kw_title").stop().fadeTo(500, 0.7); kwick.find(".kw_desc").stop().animate({'opacity':'0', bottom:"-300px"},500, "easeOutExpo"); } ); kwick.bind(o.event, function() { // calculate previous width or heights and left or top values var prevWoHs = []; // prevWoHs = previous Widths or Heights var prevLoTs = []; // prevLoTs = previous Left or Tops kwicks.stop().removeClass('active'); for(j = 0; j < kwicks.size(); j++) { prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, ''); prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, ''); } var aniObj = {}; aniObj[WoH] = o.max; var maxDif = o.max - prevWoHs[i]; var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif; kwick.addClass('active').animate(aniObj, { step: function(now) { // calculate animation completeness as percentage var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1; // adjsut other elements based on percentage kwicks.each(function(j) { if(j != i) { kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px'); } if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px'); } }); }, duration: o.duration, easing: o.easing }); }); }); if(!o.sticky) { container.bind("mouseleave", function() { var prevWoHs = []; var prevLoTs = []; kwicks.removeClass('active').stop(); for(i = 0; i < kwicks.size(); i++) { prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, ''); prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, ''); } var aniObj = {}; aniObj[WoH] = normWoH; var normDif = normWoH - prevWoHs[0]; kwicks.eq(0).animate(aniObj, { step: function(now) { var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1; for(i = 1; i < kwicks.size(); i++) { kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px'); if(i < kwicks.size() - 1) { kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px'); } } }, duration: o.duration, easing: o.easing }); }); } }); }; })(jQuery);
- The topic ‘Sticky Accordion issue’ is closed to new replies.