Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I don't know of such a plugin for jQuery, but writing the user-interface is quite simple. </p> <p>(<strong>Edit</strong>: Actually I just thought of a place where I could use this feature myself. I might just as well write a proper plugin based on this next week if I have the time, and edit it here. For the time being, below is what I originally posted...)</p> <p>All you need is a couple of divs:</p> <pre><code>&lt;div id="thebutton"&gt;Click me!&lt;/div&gt; &lt;div id="thebox" style="display:none;"&gt;Content goes here&lt;/div&gt; </code></pre> <p>And some jQuery:</p> <pre><code> &lt;script type="text/javascript"&gt; $(function () { $('#thebutton') .click(function () { //Show/hide the box $(this).toggleClass('activated'); $(this).hasClass('activated') ? $('#thebox').fadeIn() : $('#thebox').fadeOut(); }) .mouseenter(function () { //If the button is .activated, cancel any delayed hide and display the box $(this).addClass('hovering'); if ($(this).hasClass('activated')) { $('#thebox').clearQueue().fadeIn(); } }) .mouseleave(function () { //Hide the box after 300 milliseconds (unless someone cancels the action) $(this).removeClass('hovering'); $('#thebox').delay(300).fadeOut(); }); $('#thebox') //When hovering onto the box, cancel any delayed hide operations .mouseenter(function () { $(this).clearQueue(); }) //When hovering off from the box, wait for 300 milliseconds and hide the box (unless cancelled) .mouseleave(function () { $(this).delay(300).fadeOut(); }); }); &lt;/script&gt; </code></pre> <p>The rest is pretty much just CSS for #thebutton, #thebox, .hovering and .activated. </p> <p>Here's a spartan look I used while writing this:</p> <pre><code>&lt;style type="text/css"&gt; #thebutton { width: 100px; background-color: #eee; text-align: center; padding: 10px; cursor: pointer; } #thebutton.activated { font-weight: bold; } #thebutton.hovering { color: Blue; } #thebox { background-color: #eee; position:relative; width: 300px; height: 200px; padding: 10px; top: 5px; display: none;} &lt;/style&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POjQuery plugin for Facebook "Like" Button
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USjevakallio
    1. USjevakallio
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POjQuery plugin for Facebook "Like" Button
      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. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COawesome answer, thanks! you should so totally make a plugin, it would be very useful for a lot of people
      singulars
      1. PO
      1. USming yeow
    2. COmore than 1000 people have viewed your answer, great stuff! =D
      singulars
      1. PO
      1. USming yeow
    3. COLooks like I also forgot to write that plugin :) Maybe the next time I have a need for functionality like this...
      singulars
      1. PO
      1. USjevakallio
 

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