Databases
StackOverflow2013
Postsdbo
POJQuery Accordion - Last Cell Flip Sides
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Accordion - Last Cell Flip Sides
    primarykey
    data
    text
    <p>I really didn't know how to come up with a descriptive title for this. Pretty much what I'm trying to do is make this accordion list item jump to the other side of the page when clicked. Currently the accordion is opening from left to right - but the last cell doesn't jump right it instead stays in place. How can I make that last cell jump to the right instead of staying in place.</p> <p>The point of this is to put a picture in the tabs and have them come together at the beginning and end of browsing links.</p> <p><a href="http://jsfiddle.net/DYEwB/1/" rel="nofollow">JSFiddle Example</a> - click the last cell</p> <p><strong>HTML</strong></p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt;head&gt; &lt;title&gt;Accordion&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="redo.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="hc1" class="haccordion"&gt; &lt;ul&gt; &lt;li&gt; &lt;div class="hpanel"&gt; &lt;div class="preview" id="p1"&gt;&lt;/div&gt; &lt;div class="contentContainer"&gt; &lt;div class="content"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="hpanel"&gt; &lt;div class="preview" id="p2"&gt;&lt;/div&gt; &lt;div class="contentContainer"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="hpanel"&gt; &lt;div class="preview" id="p3"&gt;&lt;/div&gt; &lt;div class="contentContainer"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="hpanel"&gt; &lt;div class="preview" id="p4"&gt;&lt;/div&gt; &lt;div class="contentContainer"&gt; asdf &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="hpanel"&gt; &lt;div class="preview" id="p5"&gt;&lt;/div&gt; &lt;div class="contentContainer"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- Scripts --&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="accordion.js"&gt;&lt;/script&gt; &lt;!-- End Scripts --&gt; &lt;/body&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>* { margin:0px; padding:0px } html, body { height:100%; width: 100%; } #hc1, #hc1 ul, #hc1 li { height: 100%; } #hc1, #hc1 ul { width: 100%; } .preview { width: 50px; float: left; height: 100%; background-color: #E48525 } #p1{background-color: #231F20} #p2{background-color: #4F4E4F} #p3{background-color: #919191} #p4{background-color: #C4C4C3} #p5{background-color: #E8E8E8} /* #p1{background-color: red} #p2{background-color: blue} #p3{background-color: green} #p4{background-color: black} #p5{background-color: orange} */ .contentContainer { background-color: gray; margin: 0 auto; width: 100%; height: 100%; } /* -- Start Accordion -- */ .haccordion{ padding: 0; } .haccordion ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; /*leave as is*/ } .haccordion li{ margin: 0; padding: 0; display: block; /*leave as is*/ overflow: hidden; /*leave as is*/ float: left; /*leave as is*/ } /* -- End Accordion -- */ </code></pre> <p><strong>Javascript</strong></p> <pre><code>var haccordion={ //customize loading message if accordion markup is fetched via Ajax: ajaxloadingmsg: '&lt;div style="margin: 1em; font-weight: bold"&gt;&lt;img src="ajaxloadr.gif" style="vertical-align: middle" /&gt;&lt;/div&gt;', accordioninfo: {}, //class that holds config information of each haccordion instance expandli:function(accordionid, targetli){ var config=haccordion.accordioninfo[accordionid] var $targetli=(typeof targetli=="number")? config.$targetlis.eq(targetli) : (typeof targetli=="string")? jQuery('#'+targetli) : jQuery(targetli) if (typeof config.$lastexpanded!="undefined") //targetli may be an index, ID string, or DOM reference to LI { config.$lastexpanded.stop().animate({width:config.paneldimensions.peekw}, config.speed); //contract last opened content config.$lastexpanded.removeClass('active'); } $targetli.stop().animate({width:$targetli.data('hpaneloffsetw')}, config.speed) //expand current content config.$lastexpanded=$targetli if($targetli.attr('class') != 'active') $targetli.addClass('active'); }, urlparamselect:function(accordionid){ var result=window.location.search.match(new RegExp(accordionid+"=(\\d+)", "i")) //check for "?accordionid=index" in URL if (result!=null) result=parseInt(RegExp.$1)+"" //return value as string so 0 doesn't test for false return result //returns null or index, where index is the desired selected hcontent index }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document.cookie = name + "=" + value + "; path=/" }, loadexternal:function($, config){ //function to fetch external page containing the entire accordion content markup var $hcontainer=$('#'+config.ajaxsource.container).html(this.ajaxloadingmsg) $.ajax({ url: config.ajaxsource.path, //path to external content async: true, error:function(ajaxrequest){ $hcontainer.html('Error fetching content.&lt;br /&gt;Server Response: '+ajaxrequest.responseText) }, success:function(content){ $hcontainer.html(content) haccordion.init($, config) } }) }, init:function($, config){ haccordion.accordioninfo[config.accordionid]=config //cache config info for this accordion var $targetlis=$('#'+config.accordionid).find('ul:eq(0) &gt; li') //find top level LIs config.$targetlis=$targetlis config.selectedli=config.selectedli || [] //set default selectedli option config.speed=config.speed || "normal" //set default speed //KEY_CHANGE_BEGIN var maxWidth = $targetlis.parent ().width (); $targetlis.each ( function () { maxWidth -= $(this).outerWidth (true); } ); $targetlis.each(function(i){ var $target=$(this).data('pos', i) //give each li an index # var lclMaxWidth = maxWidth + $target.find ('.hpanel:eq(0)').outerWidth (true); $target.css ('width', config.paneldimensions.fullw); //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding) var hpaneloffsetw = $target.find ('.hpanel:eq(0)').outerWidth (true); if (hpaneloffsetw &gt; lclMaxWidth) hpaneloffsetw = lclMaxWidth; $target.data('hpaneloffsetw', hpaneloffsetw); $target.css ('width', ''); //KEY_CHANGE_END $target.click(function(){ haccordion.expandli(config.accordionid, this) config.$lastexpanded=$(this); }) if (config.collapsecurrent){ //if previous content should be contracted when expanding current config.$lastexpanded.removeClass('active'); $target.click(function(){ $(this).stop().animate({width:config.paneldimensions.peekw}, config.speed); //contract previous content }) } }) //end $targetlis.each var selectedli=haccordion.urlparamselect(config.accordionid) || ((config.selectedli[1] &amp;&amp; haccordion.getCookie(config.accordionid))? parseInt(haccordion.getCookie(config.accordionid)) : config.selectedli[0]) selectedli=parseInt(selectedli) if (selectedli&gt;=0 &amp;&amp; selectedli&lt;config.$targetlis.length){ //if selectedli index is within range config.$lastexpanded=$targetlis.eq(selectedli) config.$lastexpanded.css('width', config.$lastexpanded.data('hpaneloffsetw')) //expand selected li } $(window).bind('unload', function(){ //clean up and persist on page unload haccordion.uninit($, config) }) //end window.onunload }, uninit:function($, config){ var $targetlis=config.$targetlis var expandedliindex=-1 //index of expanded content to remember (-1 indicates non) $targetlis.each(function(){ var $target=$(this) $target.unbind() if ($target.width()==$target.data('hpaneloffsetw')) expandedliindex=$target.data('pos') }) if (config.selectedli[1]==true) //enable persistence? haccordion.setCookie(config.accordionid, expandedliindex) }, setup:function(config){ //Use JS to write out CSS that sets up initial dimensions of each LI, for JS enabled browsers only document.write('&lt;style type="text/css"&gt;\n') document.write('#'+config.accordionid+' li{width: '+config.paneldimensions.peekw+';\nheight: '+config.paneldimensions.h+';\n}\n') document.write('#'+config.accordionid+' li .hpanel{width: '+config.paneldimensions.fullw+';\nheight: '+config.paneldimensions.h+';\n}\n') document.write('&lt;\/style&gt;') jQuery(document).ready(function($){ //on Dom load if (config.ajaxsource) //if config.ajaxsource option defined haccordion.loadexternal($, config) else haccordion.init($, config) }) //end DOM load } } haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'50px', fullw:'100%', h:'100%'}, selectedli: [4, false], //[selectedli_index, persiststate_bool] collapsecurrent: false //&lt;- No comma following very last setting! }) </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USHowdy_McGee
    1. USHowdy_McGee
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJQuery Accordion - Last Cell Flip Sides
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJQuery Accordion - Last Cell Flip Sides
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POJQuery Accordion - Last Cell Flip Sides
      1. USDotNetRookie
      1. VTFavorite
    1. COWhat do you mean by jump to the otherside of the page when clicked? Do you have an example of desired behaviour, whether that be flash or just image?
      singulars
      1. POJQuery Accordion - Last Cell Flip Sides
      1. USMax
    2. COwell right now when u click the last cell (the darkest cell) it pushes everything to the right to show the content - what i want it to do is instead is move that cell to the right so that all the cells are on the right
      singulars
      1. POJQuery Accordion - Last Cell Flip Sides
      1. USHowdy_McGee
    3. COAnything like this? http://www.dynamicdrive.com/dynamicindex17/haccordion.htm
      singulars
      1. POJQuery Accordion - Last Cell Flip Sides
      1. USMax
 

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.

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