0

I am trying to add flipbook effect in HTML5 I have created some div tags for pages and for hard cover but problem is that 'hard' div's are not working as they should be like I am unable to turn hard pages.!

I have code this : 

<html>
<head>
<!--
<style type="text/css">
body
{ overflow:hidden;}
#zoom-viewport
{

background:#E3EDFF;

}



#flipbook.shadow{
    -webkit-box-shadow: 0 4px 10px #666;
    -moz-box-shadow: 0 4px 10px #666;
    -ms-box-shadow: 0 4px 10px #666;
    -o-box-shadow: 0 4px 10px #666;
    box-shadow: 0 4px 10px #666;
}

#flipbook .page-wrapper{
   -webkit-perspective:2000px;
   -moz-perspective: 2000px;
   -ms-perspective: 2000px;
   perspective: 2000px;
}

#flipbook{

    background:#75A3FF;
transition:margin-left 1s;
    -webkit-transition:margin-left 1s;
    -moz-transition:margin-left 1s;
    -o-transition:margin-left 1s;
    -ms-transition:margin-left 1s;
    transition:margin-left 1s;
}
</style>

        -->

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="includes/Turn/turn.js"></script>


</head>


<body>
<div id="zoom-viewport"> 
<div id="flipbook" style="background-color:red;">
    <div class="hard"> Turn.js </div> 
    <div class="hard"></div>
    <div class="double"> Page 1 </div>
    <div class="double"> Page 2 </div>
    <div class="double"> Page 3 </div>
    <div class="double"> Page 4 </div>
    <div class="hard"></div>
    <div class="hard"></div>
</div>
</div>

<script type="text/javascript">

$("#flipbook").turn({width:800, height:500 , autoCenter:true}).bind("turning", function(event, page, view) {
    alert("Turning the page to: "+page);
});
</script>
</body>
</html>

Please help to sort out this problem

Thanks in advance

Shumaila

Álvaro González
  • 142,137
  • 41
  • 261
  • 360
Shumaila Khan
  • 91
  • 1
  • 5
  • 19

1 Answers1

1

There's a couple things to check.

  • Which version of Turn.js are you using?
  • What browser are you testing in?

It seems that the hard class wasn't released until the 4th version. There was also a bug using hard class in IE9 that wasn't fix until release 4.1.0.

Hope this helps, on a quick look the code seems pretty much like the example code.

Jonathan Stevens
  • 176
  • 4