Databases
StackOverflow2013
Postsdbo
PORe-run Function on Click
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORe-run Function on Click
    primarykey
    data
    text
    <p>I'm using the flip jquery plugin. </p> <p>I have an album cover and a link to view the song list of the album. When I click the "View Song List" link, I want to flip the album cover over to view the list of songs. At the same time, I want to change the "View Song List" link to read "View Album Art". When the user clicks the "View Album Art" link, the album should flip over to the front again and show the art and change the "View Album Art" link to read "View Song List" again. This works OK.</p> <p>Now, when I click the "View Song List" link again, I would expect the same thing to happen all over again - flipping the album over. But it doesn't work. Any ideas?</p> <p>Here it is - see the bottom box with the album covers: <a href="http://maplemountainchorus.org/mandy/index2.html" rel="nofollow">http://maplemountainchorus.org/mandy/index2.html</a></p> <p>Here's my code:</p> <pre><code>$(function(){ $(".flipPad a.viewSongList").click(function(){ $(".flipbox").flip({ direction: 'lr', color: '#fff', content: $(".flipbox").addClass("removeBkgrnd").html('&lt;p&gt;Here is the song list.&lt;/p&gt;'), onBefore: function(){$(".flipPad a.viewSongList").html('View Album Art').addClass("viewAlbumArt")}, onEnd: function(){$(".flipPad a.viewSongList.viewAlbumArt").click(function(){ $(".flipbox").removeClass("removeBkgrnd").html(''); $(this).removeClass("viewAlbumArt").html('View Song List'); }); } }) return false; }); }); </code></pre> <p>Here's the HTML:</p> <pre><code>&lt;section id="media"&gt; &lt;div id="buyMusic"&gt; &lt;div id="musicSlider" class="flexslider" style="background-color:#000;"&gt; &lt;ul class="slides"&gt; &lt;li&gt; &lt;div class="flipbox sweetDreams"&gt;&lt;/div&gt; &lt;div class="flipPad"&gt; &lt;a href="#" class="viewSongList"&gt;View Song List&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="flipbox winterWonderland"&gt;&lt;/div&gt; &lt;div class="flipPad"&gt; &lt;a href="#" class="viewSongList"&gt;View Song List&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="flipbox rightCry"&gt;&lt;/div&gt; &lt;div class="flipPad"&gt; &lt;a href="#" class="viewSongList"&gt;View Song List&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="flipbox mandy"&gt;&lt;/div&gt; &lt;div class="flipPad"&gt; &lt;a href="#" class="viewSongList"&gt;View Song List&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="flipbox platinum"&gt;&lt;/div&gt; &lt;div class="flipPad"&gt; &lt;a href="#" class="viewSongList"&gt;View Song List&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div class="flipbox patsy"&gt;&lt;/div&gt; &lt;div class="flipPad"&gt; &lt;a href="#" class="viewSongList"&gt;View Song List&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Here's the CSS:</p> <pre><code>.flipbox{width:236px;height:237px;float:left;} .flipbox.winterWonderland{background:url('../images/music-winter-wonderland.jpg') no- repeat;} .flipbox.sweetDreams{background:url('../images/music-sweet-dreams.jpg') no-repeat;} .flipbox.rightCry{background:url('../images/music-right-cry.jpg') no-repeat;} .flipbox.platinum{background:url('../images/music-platinum.jpg') no-repeat;} .flipbox.patsy{background:url('../images/music-patsy.jpg') no-repeat;} .flipbox.mandy{background:url('../images/music-mandy.jpg') no-repeat;} .flipbox.removeBkgrnd{background-image:none;background-color:#fff;border:1px solid red;width:236px;height:237px;} .flipPad{float:left;padding-left:4.8em;} </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2325558
    1. USuser2325558
    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
    1. VO
      singulars
      1. PORe-run Function on Click
      1. This table or related slice is empty.
      1. VTDownMod
    1. COPlease create a jsfiddle.net example; and re-state the problems you are facing. Currently, I was not able to understand it. :(
      singulars
      1. PORe-run Function on Click
      1. UShjpotter92
    2. COSorry - here it is on a page: http://maplemountainchorus.org/mandy/index2.html
      singulars
      1. PORe-run Function on Click
      1. USuser2325558
    3. COI want to click the View Song List - have the album cover flip over to view the list and at the same time change "View Song List" to "View Album Art". Then click "View Album Art" to flip the album cover back over to view the front again. Then, if the user clicks the "View Song List" link again, flip the album cover over again and do the same thing - like toggling.
      singulars
      1. PORe-run Function on Click
      1. USuser2325558
 

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