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.

Java and JavaScript are entirely different things. As far as I can tell, you meant JavaScript here. I've updated it for you. — T.J. Crowder
– T.J. Crowder, Commented Nov 3, 2011 at 8:09
For people to help you, you need to show the relevant code. Linking to your site isn't a substitute for that, because A) People shouldn't have to click through the link to help you, and B) Stack Overflow is meant to be a resource for you now, and for others later; the content of external links can change, move, or disappear entirely, rendering your question useless for people in the future. — T.J. Crowder
– T.J. Crowder, Commented Nov 3, 2011 at 8:10
@SamCorbet: The site is really nice, but T.J. Crowder is right - you should state what help exactly do you need, what have you tried and what was the result. Now it is hard to say what is being asked here, unfortunately. Edit your question. — Tadeck
– Tadeck, Commented Nov 3, 2011 at 8:15
FYI, the back of the cards is the same as the front on my machine. — Eric
– Eric, Commented Nov 3, 2011 at 9:46

Eric · Accepted Answer · 2011-11-03 09:44:11Z

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());
});

edited Nov 3, 2011 at 9:44

answered Nov 3, 2011 at 8:22

Eric

98.1k54 gold badges257 silver badges389 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sam Corbet Over a year ago

Thank you! works a treat.... had to make one slight change.... the hover function wouldn't work when i had them separated with a , [code].card-container:hover .front { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); } .card-container.selected .front{ -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); }[code] I had to separate them like that Many thanks

Sam Corbet Over a year ago

Can I ask another question quickly please? Im going to place images on each of the backs of the cards. How do I get different content to generate in the main_content div depending on which image is clicked on? Many thanks Sam

Eric Over a year ago

@SamCorbet: See my edit. I don't believe that it doesn't work with a single rule. It should work with the ,. Next time, post code by putting it between `s

Sam Corbet Over a year ago

Thank you so much! where did you learn this all? I only have one small problem.... Firstly as default I don't want there to be an image in the main content. Secondly if one of the back of the cards doesn't have an image and you select it when you click back on one that does have an image it no longer loads.... I have left it as it is so you can see what I mean on the home page Many thanks Sam

Eric Over a year ago

@SamCorbet: Add <div class="img-wrapper"> around your main image. I've edited my code accordingly.

|

Collectives™ on Stack Overflow

Simple JavaScript OnClick Function

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related