Databases
StackOverflow2013
Postsdbo
POjQuery Organic Tabs
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Organic Tabs
    primarykey
    data
    text
    <p>I'm using the organic tabs plugin - <a href="http://css-tricks.com/4530-organic-tabs/" rel="nofollow">http://css-tricks.com/4530-organic-tabs/</a> - and need a bit of help.</p> <p>Depending on the class on the body tag, I wish to switch between two lists  - for example, if a user is looking at a sail boat, I'd like the tabs to switch to the 'panel2' by default.</p> <p>Likewise, if they are looking at a power boat, then I'd like the tab to be on 'panel1' by default.</p> <p>The HTML is</p> <pre><code>&lt;div id="sailOrPower"&gt; &lt;ul class="nav"&gt; &lt;li class="nav-one"&gt;&lt;a href="#panel1" class="current"&gt;Top Power&lt;/a&gt;&lt;/li&gt; &lt;li class="nav-two"&gt;&lt;a href="#panel2"&gt;Top Sail&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="listWrap"&gt; &lt;ul id="panel1"&gt; &lt;li&gt;&lt;a href="#"&gt;Power boat 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Power boat 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul id="panel2" class="hide"&gt; &lt;li&gt;&lt;a href="#"&gt;Sail boat 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sail boat 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and the default function I have is</p> <pre><code>$(function () { $("#sailOrPower").organicTabs({ "speed": 0 }); }); </code></pre> <p>This obviously needs to change.</p> <p>I'm still learning jQuery and so am a little unsure of the best way to approach this is, so any tips would be great. The method I'm thinking is that jQuery needs to...</p> <ol> <li>Find the class on the body - sail or power</li> <li>Find the current list and see which list is displaying - panel1 or panel2</li> <li>Check to see if the current list matches the class on the body</li> <li>If it does match, do nothing?</li> <li>If it doesn't match then switch to display the correct list - I guess this would be done by adding/removing the class 'hide' that is currently on panel 2?</li> </ol> <p>There are times when the body won't have a sail OR power class at all and so in those circumstances, the tabs can just behave as normal.</p> <p>Any pointers in the right direction would be great!</p> <p><em><strong></em></strong><em>UPDATED</em><strong><em>*</em></strong></p> <p>Ok so have been playing around today and my (admittedly very clumsy way of writing jQuery) seems to do MOST of what I need it to HOWEVER... there is something I'm a little stuck on. If the user clicks the Power tab whilst on the Sail page, the tab will switch BUT the list won't display as it's being told to be hidden in the previous function - anyhow, I'm having with that part see below... Any ideas?</p> <pre><code>$(function() { var $body = $('body'); if ($body.is('.sailPage')) { $('#sailOrPower ul.nav li.nav-one a').removeClass('current'); $('#sailOrPower ul.nav li.nav-two a').addClass('current'); $('#sailOrPower .listWrap ul#panel1').addClass('hide'); $('#sailOrPower .listWrap ul#panel2').css('display', 'block'); } else if ('#sailOrPower ul.nav li.nav-one a').hasClass('current') { $('#sailOrPower .listWrap ul#panel1').removeClass('hide') } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBenjamin
    1. USV Neal
    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. This table or related slice is empty.
    1. COTab out your HTML. Bleh...
      singulars
      1. POjQuery Organic Tabs
      1. USAbe Miessler
    2. COSorry - added comment by phone - was a bit difficult.
      singulars
      1. POjQuery Organic Tabs
      1. USV Neal
 

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