ansaurus

Question

JQuery Stack of Cards

Answer 1

+3 A:

You can set an event to occur on any of the images being clicked like:

$('ul li img').click(function () {
    $(this).animate( ... );
    .
    .
    .
}

I can't give any more specific help without knowing the CSS you are using to "stack" the cards.

rjmunro 2010-10-25 10:05:48

I've added my CSS, cheers mate, really appreciate the help

Daniel Hanly 2010-10-25 10:28:42

Answer 2

+1 A:

As for the part where you want to trigger a page change, you can use window.location to append a hash to the end. So your URL might end up being example.com/cards#joker

Blair McMillan 2010-10-25 10:12:09

Answer 3

+2 A:

for the hash change use ben alman's BBQ plugin tried your code at jsbin
but because the link to the cards is missing the HTML doesn't render right
if you put here a working jsbin sample - helping you will be mush easier

concerning the animations: if you layout the Li's to have an absolute position, you can move them around freely,
so you can animate them to the left and then animate back and then change the z-index to put it on the top

[edit] So.. here is a link to a quick solution:
you had some problems with the animations code, + better to change the position and not the marign

for ref the code:

$('#cardStack img').click(function () 
{
       var img = $(this);
       img.animate({left: '+=50px'},200,function() 
          {
                img.animate({left: '-=50px'},200,function()
                     {
                       img.parent().prependTo($("ul"));
                       arrengeClasses();
                     });
          });
});

function arrengeClasses()
{
    var allListItems = $("#cardStack ul li");
    for(var i=0;i<allListItems.length;++i)
    {
      allListItems.eq(i).removeClass().addClass("pos" + i);
    }
}

and changed the css a bit:

 #cardStack li img{
    position:absolute;
     top:0px;
     left:0px;
    }
 .pos2{
    z-index:1;
    margin-top:100px;
 }
 .pos1{
    z-index:2;
    margin-top:50px;
 }
 .pos0{
   z-index:3;
 }

Avi Pinto 2010-10-25 10:52:04

Here's my JSbin page - http://jsbin.com/ecewa3

Daniel Hanly 2010-10-25 11:07:41

Cheers for the help

Daniel Hanly 2010-10-25 13:12:48

If I could vote you up again, I would! It works great, cheers

Daniel Hanly 2010-10-25 13:29:29

Similar question. How would I modify the information in a separate div depending on which card was on top? Cheers

Daniel Hanly 2010-10-25 14:06:23

happy to help :), you have control on the click event, so when clicking on it just $("targetDiv").text() or $("targetDiv").html(). get the text according to the ID of the image or according to some attribute on the element, it can be data-contentUrl='someUrl' and then load the Url via ajax and populate your div

Avi Pinto 2010-10-25 14:40:37

thanks again man, you are a saint!

Daniel Hanly 2010-10-25 15:12:29

ansaurus

tags:

views:

answers:

JQuery Stack of Cards

related questions