Databases
StackOverflow2013
Postsdbo
POMultiple or separate rollovers using Jquery. Mock up for a better explanation
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple or separate rollovers using Jquery. Mock up for a better explanation
    primarykey
    data
    text
    <p><strong>UPDATED: 06.29.10</strong> Here's the code I'm using so far. I'm really close after searching through the Jquery documentation.</p> <pre><code>$(document).ready(function(){ //Rollovers for circle buttons $('img').hover( function(){ this.src = this.src.replace("_org","_over"); }, function(){ this.src = this.src.replace("_over","_org"); }); //Disjointed rollover - on hover make circles use secondary hover (over2) $(".genBtn80").hover( function(){ $(".gen80circle").src = $(".gen80circle").src.replace("_org","_over2"); }, function(){ $(".gen80circle").src = $(".gen80circle").src.replace("_over2","_org"); }); }); </code></pre> <p>So I have everything working regarding the rollovers. I have the images suffixed with _org (for normal state), _over (first rollover state), and _over2 (for the secondary rollover state). I guess my issue lies now in targeting the circle buttons for the disjointed rollover, or secondary rollover. Please see the mockup link.</p> <p>The following mockup is exactly what I need for navigation. <a href="http://www.ericsbowman.com/storage/explanation.gif" rel="nofollow noreferrer">Click here for mockup</a></p> <p><strong>UPDATE: 06.30.10 Working now!!!</strong> I can't post more than one link though...argh! I'll post a comment with the test link.</p> <p>I'm very curious as to how I could use an array and loop to simplify this, but I don't want to be a bother. I'm also confused as to why the code above never worked. It seemed I was selecting the right elements, but the src never changed. I'm certain I was doing something wrong, but I'm here to learn. :)</p> <pre><code>$(document).ready(function(){ //Rollovers for circle buttons $(".circleBtn").hover( function(){ this.src = this.src.replace("_org","_over"); }, function(){ this.src = this.src.replace("_over","_org"); }); //Rollovers for navigation buttons $(".navBtn").hover( function(){ this.src = this.src.replace("_org","_over"); }, function(){ this.src = this.src.replace("_over","_org"); }); //Disjointed rollovers - use secondary rollover for circle imgs $(".genBtn80").hover( function(){ this.src = this.src.replace("_org","_over"); $("#janice_circle").attr("src", "images/janice_over2.gif"); $("#sugi_circle").attr("src", "images/sugi_over2.gif"); }, function(){ this.src = this.src.replace("_over","_org"); $("#janice_circle").attr("src", "images/janice_org.gif"); $("#sugi_circle").attr("src", "images/sugi_org.gif"); }); $(".genBtn70").hover( function(){ this.src = this.src.replace("_org","_over"); $("#hatsuko_circle").attr("src", "images/hatsuko_over2.gif"); $("#satoko_circle").attr("src", "images/satoko_over2.gif"); }, function(){ this.src = this.src.replace("_over","_org"); $("#hatsuko_circle").attr("src", "images/hatsuko_org.gif"); $("#satoko_circle").attr("src", "images/satoko_org.gif"); }); $(".genBtn60").hover( function(){ this.src = this.src.replace("_org","_over"); $("#noriko_circle").attr("src", "images/noriko_over2.gif"); $("#yuki_circle").attr("src", "images/yuki_over2.gif"); }, function(){ this.src = this.src.replace("_over","_org"); $("#noriko_circle").attr("src", "images/noriko_org.gif"); $("#yuki_circle").attr("src", "images/yuki_org.gif"); }); $(".genBtn50").hover( function(){ this.src = this.src.replace("_org","_over"); $("#ritsuko_circle").attr("src", "images/ritsuko_over2.gif"); $("#yuka_circle").attr("src", "images/yuka_over2.gif"); }, function(){ this.src = this.src.replace("_over","_org"); $("#ritsuko_circle").attr("src", "images/ritsuko_org.gif"); $("#yuka_circle").attr("src", "images/yuka_org.gif"); }); $(".genBtn40").hover( function(){ this.src = this.src.replace("_org","_over"); $("#christina_circle").attr("src", "images/christina_over2.gif"); $("#chiharu_circle").attr("src", "images/chiharu_over2.gif"); }, function(){ this.src = this.src.replace("_over","_org"); $("#christina_circle").attr("src", "images/christina_org.gif"); $("#chiharu_circle").attr("src", "images/chiharu_org.gif"); }); $(".genBtn30").hover( function(){ this.src = this.src.replace("_org","_over"); $("#haruko_circle").attr("src", "images/haruko_over2.gif"); $("#shiho_circle").attr("src", "images/shiho_over2.gif"); }, function(){ this.src = this.src.replace("_over","_org"); $("#haruko_circle").attr("src", "images/haruko_org.gif"); $("#shiho_circle").attr("src", "images/shiho_org.gif"); }); $(".genBtn20").hover( function(){ this.src = this.src.replace("_org","_over"); $("#aoi_circle").attr("src", "images/aoi_over2.gif"); $("#tomoko_circle").attr("src", "images/tomoko_over2.gif"); $("#miho_circle").attr("src", "images/miho_over2.gif"); }, function(){ this.src = this.src.replace("_over","_org"); $("#aoi_circle").attr("src", "images/aoi_org.gif"); $("#tomoko_circle").attr("src", "images/tomoko_org.gif"); $("#miho_circle").attr("src", "images/miho_org.gif"); }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USESB
    1. USESB
    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. VO
      singulars
      1. POMultiple or separate rollovers using Jquery. Mock up for a better explanation
      1. USJosh
      1. VTFavorite
    2. VO
      singulars
      1. POMultiple or separate rollovers using Jquery. Mock up for a better explanation
      1. USESB
      1. VTFavorite
    1. COHere's the test link: http://www.ericsbowman.com/storage/cwac/index_test.html
      singulars
      1. POMultiple or separate rollovers using Jquery. Mock up for a better explanation
      1. USESB
 

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