Adapting jquery.flip to toggle with button click -
i'm learning jquery , i'm trying make flip plugin toggle flipped , unflipped settings pressing single button, can't work out how adapt manual trigger this.
http://nnattawat.github.io/flip/
here relevant code:
<script type="text/javascript"> $(function(){ $("#card-4").flip({ trigger: 'manual' }); $("#flip-btn").click(function(){ $("#card-4").flip(true); }); $("#unflip-btn").click(function(){ $("#card-4").flip(false); }); }); </script> what best way this? trying re-write code ask if flip true, , if clicking button make flip false.
best,
simon
i downloaded plugin , set in environment. on bootstrap v3.3.4 , jquery v2.1.3. able work in environment doing this:
html
<div class="row"> <div class="col-md-6"> <div id="card-4"> <div class="front"> front content </div> <div class="back"> content </div> </div> </div> <div class="col-md-6"> <button class="btn btn-success" id="flip-btn">click flip</button> </div> </div><!-- /.row --> jquery
<script> $("#card-4").flip({ trigger: "manual" }); $(document).on("click", "#flip-btn", function() { $("#card-4").flip(true); $(this).attr("id","unflip-btn").text("click unflip").removeclass("btn-success").addclass("btn-danger"); }); $(document).on("click", "#unflip-btn", function() { $("#card-4").flip(false); $(this).attr("id","flip-btn").text("click flip").removeclass("btn-danger").addclass("btn-success"); }); </script> hope helps. otherwise, put js , html jsfiddle can better diagnose problem.
Comments
Post a Comment