Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>See the updated fiddle at <a href="http://jsfiddle.net/Palpatim/KaqZ5/7/" rel="nofollow">http://jsfiddle.net/Palpatim/KaqZ5/7/</a></p> <p><strong>Revised HTML:</strong></p> <pre><code>&lt;div class="menu"&gt; &lt;div class="menu_item"&gt; &lt;div class="parent"&gt; &lt;div class="child1"&gt;Child 1 Contents&lt;/div&gt; &lt;div class="child2"&gt;Child 2 Contents&lt;/div&gt; &lt;div class="child3"&gt;Child 3 Contents&lt;/div&gt; &lt;div class="child4"&gt;Child 4 Contents&lt;/div&gt; &lt;div class="child5"&gt;Child 5 Contents&lt;/div&gt; &lt;/div&gt; &lt;div class="nav"&gt; &lt;a class="prev" href="#"&gt;Back&lt;/a&gt; &lt;a class="next" href="#"&gt;Next&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="menu_item"&gt; &lt;div class="parent"&gt; &lt;div class="child1"&gt;Child 1 Contents&lt;/div&gt; &lt;div class="child2"&gt;Child 2 Contents&lt;/div&gt; &lt;div class="child3"&gt;Child 3 Contents&lt;/div&gt; &lt;/div&gt; &lt;div class="nav"&gt; &lt;a class="prev" href="#"&gt;Back&lt;/a&gt; &lt;a class="next" href="#"&gt;Next&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>New CSS</strong> </p> <pre><code>/* Initially hide all menu items */ .parent div { display: none; } /* Show active item */ .parent div.active { display: block; } /* If a nav link is disabled, color it grey and set the cursor to an arrow */ a[disabled="disabled"] { color: #999; cursor: default; } </code></pre> <p>​<strong>Revised JavaScript</strong></p> <pre><code>// Set the initial menu state: Each 'prev' link is disabled and the first menu item // for each menu block is active $('a.prev').attr('disabled', 'disabled'); $('.parent div:first-child').addClass('active'); $('a.next').click(function() { // Find the parent menu container // - parent of (this) is div.nav // - parent of div.nav is div.menu_item var menu = $(this).parent().parent(); // Find the currently active menu item var active = $('.active', menu); // Find the next menu item in the list var nextItem = active.next(); // If there is a next menu item, make it active if (nextItem.length) { // Make current item inactive active.removeClass('active'); // Make new item active nextItem.addClass('active'); // If there's no item after the new item, // disable navigation if (!nextItem.next().length) { $('a.next', menu).attr('disabled', 'disabled'); } // If we just clicked 'next', we can enable the 'prev' button if ($('a.prev', menu).attr('disabled') == 'disabled') { $('a.prev', menu).removeAttr('disabled'); } } }); // Pretty much same as above, with the directions reversed $('a.prev').click(function() { var menu = $(this).parent().parent(); var active = $('.active', menu); var prevItem = active.prev(); if (prevItem.length) { active.removeClass('active'); prevItem.addClass('active'); if (!prevItem.prev().length) { $('a.prev', menu).attr('disabled', 'disabled'); } if ($('a.next', menu).attr('disabled') == 'disabled') { $('a.next', menu).removeAttr('disabled'); } } }); </code></pre> <p>Here are some important changes I made from your original:</p> <ul> <li>Use CSS to hide menu items and re-display them using an <code>.active</code> class. That makes the markup cleaner, and allows you to style </li> <li>Use CSS to visually disable the navigation links, rather than suppressing them altogether. You can of course simply hide them, but if it's truly a user navigation, then you want them to be able to see that the link is simply not applicable, rather than removing it from their view altogether.</li> <li>Restructured the navigation to put "Back" before "Next" visually. If you truly want to remove it, you can simply change the CSS definition of the disabled anchors.</li> <li>Changed your links to have classes instead of </li> </ul> <p>Some other optimizations you should consider:</p> <ul> <li>Refactor the guts of the navigation code into a standalone function. It's nearly the same whether you're going forward or backward, so consider making the function more abstract by passing in the parent menu element and a desired direction.</li> <li>Use a jQuery pagination plugin, like <a href="http://www.xarg.org/2011/09/jquery-pagination-revised/" rel="nofollow">http://www.xarg.org/2011/09/jquery-pagination-revised/</a> These have the benefit of greater functionality, and in the case of actively developed plugins, they're likely to be better tested than you'll be able to do on your own.</li> <li>You have two navigation blocks on your page, but each of them have <code>id</code> attributes which conflict. <code>id</code>s must be unique on a page. I changed those to classes instead.</li> <li>Consider the case where a menu has one item, or no items. This code will choke on those situations</li> </ul> <p>There are probably a host of other ways to do this, but this should get you started. For futher reading, I recommend perusing the jQuery documentation.</p>
    singulars
    1. This table or related slice is empty.
    1. POReplace multiple DIV's using Jquery
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USPalpatim
    1. USPalpatim
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POReplace multiple DIV's using Jquery
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIn addition to your demo, post your code within your answer. This needs to remain useful after the demo link goes dead.
      singulars
      1. PO
      1. USSparky
    2. COAh, good point. Copied.
      singulars
      1. PO
      1. USPalpatim
    3. COWow. You're a genius @Palpatim. Thank you so much for this, it works brilliantly. That must have taken a little while (maybe not? :) ) and i really appreciate it. Just one more thing before you go. How do i incorporate a `return false` into the nav links so that when they are selected the window stays at the same position on the page? Thanks again for your help.
      singulars
      1. PO
      1. USuser1736794
 

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