Databases
StackOverflow2013
Postsdbo
POOn page load, autoplay jquery accordion once
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOn page load, autoplay jquery accordion once
    text
    copied!<p>I have an horizontal accordion that I'd like to unfold and then fold again, on page load, to "invite" the user to hover the elements.</p> <p>I'm using the very cool <a href="http://www.jeremymartin.name/projects.php?project=kwicks" rel="nofollow">Kwicks for jQuery</a>, but unfortunately there's no options for something like this, and after a couple of hours of trial and error I'd like to ask for help.</p> <p>Here I set up a test, out of the box: <a href="http://paragraphe.org/accordion/accordion-slider.html" rel="nofollow">http://paragraphe.org/accordion/accordion-slider.html</a></p> <p>And, for a quick look, here's the script:</p> <pre><code>/* Kwicks for jQuery (version 1.5.1) Copyright (c) 2008 Jeremy Martin http://www.jeremymartin.name/projects.php?project=kwicks Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php Any and all use of this script must be accompanied by this copyright/license notice in its present form. */ (function($){ $.fn.kwicks = function(options) { var defaults = { isVertical: false, sticky: false, 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'); var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // 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({ width : kwicks.eq(0).css('width'), height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px' }); } else { container.css({ width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px', 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 &lt; kwicks.size(); i++) { preCalcLoTs[i] = []; // don't need to calculate values for first or last kwick for(j = 1; j &lt; 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 &lt;= 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); // set initial width or height and left or top values // set first kwick if(i === 0) { kwick.css(LoT, '0px'); } // set last kwick else if(i == kwicks.size() - 1) { kwick.css(o.isVertical ? 'bottom' : 'right', '0px'); } // set all other kwicks else { if(o.sticky) { kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]); } else { kwick.css(LoT, (i * normWoH) + (i * o.spacing)); } } // 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' }); 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 &lt; 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 &gt; 0 &amp;&amp; j &lt; 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 &lt; 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 &lt; kwicks.size(); i++) { kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px'); if(i &lt; 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); </code></pre> <p>Would you know of some addition to allow an initial deployment / collapse to defaults?</p> <p>Many thanks for your suggestions,</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload