Simple JavaScript OnClick Function

Question

I'm finally getting round to creating a website for my print design portfolio. I know exactly what I'm trying to achieve but being fairly new to web design I have found some limitations with the knowledge I have....

I have used css3 transitions (currently they only work in Chrome and Safari) to make flip cards which are triggered on hover - these work perfectly and are exactly what I am looking for. All I am now trying to do is add an JavaScript function (using jQuery) that permanently flips the card on click. I don't want it to disable the on hover function which is pure css though.

I have found this extremely difficult to implement.

The site is here:

www.samueljamesdesign.com

Any help would be greatly appreciated.

Answer 1

Just modify your CSS so that the rotation is also triggered by adding a class. For example, change this rule:

#card-container:hover .front {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

To this:

.card-container:hover .front,
.card-container.selected .front,{
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

Note that you cannot use #card-container, as it is invalid to have multiple elements with the same ID in the document. Set card-container as the class instead.

---

To make things stay flipeed when clicked, with your new CSS, you do:

var tiles = $('#tiles .card-container');
tiles.click(function() {
    tiles.removeClass('selected');
    $(this).addClass('selected');

    //To change the image in maincontent to match the
    //one in the flipcard clicked on:
    $('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});