Databases
StackOverflow2013
Postsdbo
POjquery rollover confusion
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery rollover confusion
    primarykey
    data
    text
    <p>Trying to get my rollovers to change src on rollover. This is working ok, though there is a bug. After I have clicked on a thumbnail, the src can sometimes contain the wrong src (the rollover state remains even on mouseout). . To find the bug, click on a few thumbnails and mouseover a few, you should see the rollover src remain for ones that have been clicked already. Demo is no longer available, sorry!</p> <p>The jQuery - </p> <pre><code>function image_gallery (){ if ($('ul.thumbs').length &gt; 0) { $('.gallery').each(function(){ $('ul.thumbs li img:gt(0)').addClass('unselected'); $('ul.thumbs li img:eq(0)').addClass('selected'); function mouse_overs () { var unselected = $('li img.unselected'); unselected.hover(function(){ var thumb = $(this); thumb.attr('src',thumb.attr('src') .replace(/([^.]*\d)\.(.*)/, "$1r.$2")); }, function(){ var thumb = $(this); thumb.each(function(){ $(this).attr('src',$(this) .attr('src').replace('r.jpg','.jpg')); }); }); }; mouse_overs(); var img_main = $(this).find('img.main:first'); $(this).find('ul.thumbs img').each(function(){ $(this).click(function(){ var thumb = $(this); var src = thumb.attr('src'); if ( src.indexOf('r.jpg') == -1) { $(this).attr('src',thumb.attr('src') .replace(/([^.]*)\.(.*)/, "$1r.$2")); } var selected = $('ul.thumbs li img.selected'); // previous img remove r.jpg selected.attr('src',selected.attr('src') .replace('r.jpg','.jpg')); selected.removeClass('selected'); selected.addClass('unselected'); //current thumb add class "selected", remove "unselected" thumb.addClass('selected'); thumb.removeClass('unselected'); mouse_overs(); var rel = $(this).parent('a').attr('rel'); img_main.fadeOut(500, function(){ img_main.attr('src', rel); img_main.fadeIn('slow'); }); thumb.mouseout(function(){ var src = $(this).attr('src'); if ( src.indexOf('r.jpg') == -1) { $(this).attr('src',thumb.attr('src') .replace(/([^.]*)\.(.*)/, "$1r.$2")); } else return false; }); }); }); }); } } </code></pre> <p>The HTML:</p> <pre><code>&lt;div class="gallery"&gt; &lt;img class="main" src="images/gallery/yes-campaign/NL1.jpg"/&gt; &lt;ul class="thumbs"&gt; &lt;li&gt;&lt;a rel="images/gallery/yes-campaign/NL1.jpg"&gt;&lt;img src="images/thumbs/yes-campaign/NL-1r.jpg"/&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel="images/gallery/yes-campaign/NL2.jpg"&gt;&lt;img src="images/thumbs/yes-campaign/NL-2.jpg"/&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel="images/gallery/yes-campaign/NL3.jpg"&gt;&lt;img src="images/thumbs/yes-campaign/NL-3.jpg"/&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a rel="images/gallery/yes-campaign/NL4.jpg"&gt;&lt;img src="images/thumbs/yes-campaign/NL-4.jpg"/&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>This HTML is repeated various times throughout the page. The rollover states are NL1r.jpg, NL2r.jpg etc. The images are organized in folders, so all image filenames use the same naming convention.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDr. Frankenstein
    1. USDr. Frankenstein
    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