Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>you need to fix a few bugs in the a.viewSongList click event handler.</p> <blockquote> <p>Also, the flip animations are showing on the other "hidden" albums in the div.</p> </blockquote> <p>Your selectors in main event handler covered more than your wanted. $(".flipbox"), for example, selects all elements in the document containing "flipbox" class, not only children ones for event caused element.</p> <blockquote> <p>I want it to flip the album over again, but it doesn't</p> </blockquote> <p>"content" param should be wrapped in function, in your case there is an array of jquery elements instead of function.</p> <p>Looks like I really fail with English, sorry : ></p> <p>Down here is working excample.</p> <pre><code>$('.flipPad a.viewSongList').attr('currentContent', 'art') $('.flipPad a.viewSongList').click(function() { var that = this; var currentContent = $(that).attr('currentContent'); var flipbox = $(that).parent().parent().find('.flipbox'); var albumData = flipbox.find('.albumData'); $(flipbox).flip({ direction: 'lr', color: '#fff', content: function() { if(currentContent == 'art') { $(flipbox).addClass('removeBkgrnd'); $(albumData).show(); } else { $(flipbox).removeClass('removeBkgrnd'); } }, onEnd: function() { if(currentContent == 'art') { $(that).addClass('viewAlbumArt').html('View Album Art'); $(albumData).show(); $(that).attr('currentContent', 'songList'); } else { $(that).removeClass('viewAlbumArt').html('View Song List'); $(albumData).hide(); $(that).attr('currentContent', 'art'); } } }); return false; }); </code></pre>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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