Mark2015 Posted April 24, 2015 Share Posted April 24, 2015 Hi I am gratefully using code at http://css3playground.com/3d-flip-cards/ to try and hold a page of twenty 300px by 300px png 'merit certificates'. I want it so when the user clicks on the bottom left corner of any certificate png (which has the words "Turn over..."), the certificate flips and the user can read the back of the certificate. I think I am almost there, it's just that not having a lot of experience with JavaScript I am not sure what changes I need to make to the code in order that it doesn't flip on mouse over but rather only when the user clicks the bottom left corner of a particular certificate on the page. From the code below, can anyone say what the Javascript would be for clicking the hotspot only? Note there could be 20+ different certificates on a page so it would need ot know which one to flip. Thanks for any help. Mark <!DOCTYPE html><html lang="en-us" dir="ltr" class="no-js"><head><link href="styles/style001.css" rel="stylesheet" type="text/css" /> <script src="javascript/jquery.min.js" type="text/javascript"></script> <script src="javascript/modernizr.min.js" type="text/javascript"></script> <title>Untitled Page</title></head><body> <form name="form1" method="post" action="default.aspx" id="form1"> <script type="text/javascript"> // For IE11. Modernizr.addTest('preserve3d', function(){return Modernizr.testAllProps('transformStyle', 'preserve-3d');}); </script> <script> $(document).ready(function(){ // set up hover panels // although this can be done without JavaScript, we've attached these events // because it causes the hover to be triggered when the element is tapped on a touch device $('.hover').hover(function(){ $(this).addClass('flip'); },function(){ $(this).removeClass('flip'); }); }); </script> <div class="hover panel"> <div class="front"> <div class="pad"> <img alt="" id="Img2" src="http://localhost:55852/LocalV/pages/files/image-store/3/2/5/3/2/5/1/1523523-ca4ead5c-ca0e-4e3b-86b8-2a42823a00e7.png" usemap="#ImageMapImageMap2" style="height: 300px; width: 300px; border-width: 0px;" /><map name="ImageMapImageMap2" id="Map1"> <area shape="rect" coords="200,260,300,300" href="" title="" alt="" /> </map> </div> </div> <div class="back"> <div class="pad"> <img alt="" id="Img1" src="http://localhost:55852/LocalV/pages/files/image-store/9/3/5/3/2/5/1/1523539-b3f8d11d-0ed8-47c4-af5e-39ad864e18a1.png" usemap="#ImageMapImageMap2" style="height: 300px; width: 300px; border-width: 0px;" /><map name="ImageMapImageMap2" id="ImageMapImageMap2"> <area shape="rect" coords="200,260,300,300" href="" title="" alt="" /> </map> </div> </div> </div> </form></body></html> Link to comment Share on other sites More sharing options...
davej Posted April 24, 2015 Share Posted April 24, 2015 See... https://api.jquery.com/click/ ...rather than... https://api.jquery.com/hover/ Link to comment Share on other sites More sharing options...
Hadien Posted April 24, 2015 Share Posted April 24, 2015 (edited) you are using vanilla jQuery, for this to work as expected on touch screens use jQuery Mobile. For mobile screens you want to use jQuery Mobile's .on("tap",[function]) as the event handler. The beauty of this is that jQuery Mobile will adapt some functionality to PC. If someone loads the screen onto a PC the tap handler will behave like a click handler, preserving functionality. Also if you only want it to activate in the bottom corner then you'll need to move the handler from that <div class="panel"> to a small div inside the panel <div class="panel"> <div class="front"> <!-- Stuff for the front side--> </div> <div class="back"> <!-- Stuff for the back side--> </div> <!-- Add this element --> <div class="dog-ear"></div> </div> then apply css for this new dog-ear class: .dog-ear{position: relative;bottom: 0;left: 0;width: 20px;height: 20px;} $(document).on('pagecreate',function(){ function flip(){ $(this).parent(".panel").toggleClass("flip"); } $('.dog-ear').on('tap',flip);}); If you're developing for mobile using jQuery try and read up on jQuery Mobile. the framework is written in a way to try and encourage you to follow the best practices when building for mobile applications, so it should be a fruitful read. Edited April 24, 2015 by Hadien Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now