•  24-03-2022
  •  | 
  •  

Question

i am new to jquery and i am interested to use flipy plugin to move the picture . i went to the website http://blog.guilhemmarty.com/flippy/ .

on the example i find out this 

$("#myFlippyBox").flippy({
content:"Hi !",
direction:"TOP",
duration:"750",
onStart:function(){
    alert("Let's flip");
},
onFinish:function(){
    alert("ok, it's flipped :)");
}
});

and i want to use this in my code . I make one div with id of myFlippyBox and assign width and height to it . on js i write this code

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">   </script>
<script type="text/javascript" src="js/jquery.flippy.min.js"></script>
<script>
   $(document).ready(function(){

$("#myFlippyBox").click({
$(this).flippy({
content:"Hi !",
direction:"TOP",
duration:"750",
onStart:function(){
    alert("Let's flip");
},
onFinish:function(){
    alert("ok, it's flipped :)");
} 
});
});

});

</script>
 </head>

 <body>

 <div id="myFlippyBox" height ="200px" width="200px">
    Test message
 </div>

 </body>

 </html>

and it gives me error and didnt work for me

Was it helpful?

Solution

.click() expects a function as the argument, you where passing $("#myFlippyBox").click({...}); instead of $("#myFlippyBox").click(function(){...});

Try

$(document).ready(function() {
    $("#myFlippyBox").click(function() {
        $(this).flippy({
            content : "Hi !",
            direction : "TOP",
            duration : "750",
            onStart : function() {
                alert("Let's flip");
            },
            onFinish : function() {
                alert("ok, it's flipped :)");
            }
        });
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top