Databases
StackOverflow2013
Postsdbo
POProblem targetting only specified element
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblem targetting only specified element
    primarykey
    data
    text
    <p>I've been working on a small jQuery plugin that creates an iPhoto-like preview when hovering over images. It all works great if I only have one set of images. As soon as I add more than one .preview set to the markup my plugin finds all of them and displays the total amount of indicators below each image.</p> <p>Here is the JS:</p> <pre><code>$(document).ready(function() { // launch preview browser $('.preview').previewBrowser(); }); (function($) { $.fn.previewBrowser = function() { return this.each(function() { // get dom var $viewport = $(this).css('overflow', 'hidden'), $container = $viewport.children('ul'), $items = $container.children('li'), $single = $items.filter(':first'); // set viewport to correct size $viewport.css({ height: $single.height(), width: $single.width() }); // set container to correct width $container.css({ height: $single.height(), width: $items.length * $single.width() }); // float items $items.css({ float: 'left' }); // add indicator to dom var indicator = ''; for (i = 0; i &lt; $items.length; i++) { indicator += '&lt;li class="left"&gt;O&lt;/li&gt;'; } $(indicator).appendTo('.indicator'); // set default indicator $('.indicator li:eq(0)').css('color', 'red'); // set scrolling position while mouseover $viewport.bind('mousemove.previewBrowser', function(evt) { x = evt.pageX - this.offsetLeft; offset = Math.floor(x / ($single.width() / $items.length)) * $single.width(); $(this).animate({ scrollLeft: offset }, 1); // get current item currentItem = (offset / $single.width()); // set current color $('.indicator li').not('.indicators li:eq(' + currentItem + ')').css('color', 'black'); $('.indicator li:eq(' + currentItem + ')').css('color', 'red'); return false; }); // set default image on mouseout $viewport.bind('mouseleave.previewBrowser', function(evt) { $(this).animate({ scrollLeft: 0 }, 1); // set current color $('.indicator li').not('.indicator li:eq(0)').css('color', 'black'); $('.indicator li:eq(0)').css('color', 'red'); }); }); }; })(jQuery); </code></pre> <p>And here is the markup:</p> <pre><code>&lt;div id="content"&gt; &lt;div class="entry"&gt; &lt;div class="preview"&gt; &lt;ul class="container"&gt; &lt;li&gt;&lt;img height="350" src="images/digitalsamba_1.png" width="800" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img height="350" src="images/digitalsamba_2.png" width="800" /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- end preview --&gt; &lt;div class="description"&gt; &lt;div class="caption"&gt; &lt;h2&gt;CloudApp&lt;/h2&gt; &lt;p&gt; &lt;strong&gt;Product:&lt;/strong&gt; CloudApp / &lt;strong&gt;Type:&lt;/strong&gt; Development, Icon, Interface &lt;/p&gt; &lt;/div&gt;&lt;!-- end caption --&gt; &lt;div&gt; &lt;ul class="indicator"&gt;&lt;/ul&gt; &lt;/div&gt;&lt;!-- end indicator --&gt; &lt;/div&gt;&lt;!-- end description --&gt; &lt;/div&gt;&lt;!-- end entry --&gt; &lt;div class="entry no_border"&gt; &lt;div class="preview"&gt; &lt;ul class="container"&gt; &lt;li&gt;&lt;img height="350" src="images/digitalsamba_1.png" width="800" /&gt;&lt;/li&gt; &lt;li&gt;&lt;img height="350" src="images/digitalsamba_2.png" width="800" /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- end preview --&gt; &lt;div class="description"&gt; &lt;div class="caption"&gt; &lt;h2&gt;Canon Lense&lt;/h2&gt; &lt;p&gt; &lt;strong&gt;Product:&lt;/strong&gt; Canon / &lt;strong&gt;Type:&lt;/strong&gt; Icon &lt;/p&gt; &lt;/div&gt;&lt;!-- end caption --&gt; &lt;div class="indicator"&gt;&lt;/div&gt;&lt;!-- end indicator --&gt; &lt;/div&gt;&lt;!-- end description --&gt; &lt;/div&gt;&lt;!-- end entry --&gt; &lt;/div&gt;&lt;!-- end content --&gt; </code></pre> <p>I know I am targeting the items wrong but I just can't figure out how to do it correctly.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmistero
    1. USmistero
    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
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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