i creating flipbook consist of hardcover , pages render flipbook effect.
secondly, have decided add in features, include in navigation button each side of pages of flipbook. notify users flip through pages. furthermore, used notify users if have come end of flipbook, removing respective navigation button:
1.) first page of flipbook, right navigation button on display while left navigation button hidden.
2.) last page on left button display while right button hidden.
issue:
i have managed create navigation button flipbook , on first page of navigation button, left button hidden while right button on display , when on last page of flipbook, right button hidden while left button on display.
however, issue arises when:
1.) user decides navigate last page, right arrow still hidden. correct behaviour should be, both navigation arrow should on display, when user navigates last page.
2.) when user navigates first page, right arrow button still hidden while left navigation arrow button still on display. correct behaviour should right navigation arrow should on display while left navigation arrow should hidden.
hence, ask how rectify bug?? thanks.
function flipbookpage() { $("#flipbook").turn({ width: 400, height: 300, elevation: 130, //set initial page page: 1, //set number of pages of flipbook pages: 11, autocenter: false autocenter: true }); } function checkpage(page) { if ($("#flipbook").turn("page") > 1 && $("#flipbook").turn("page") < 11) { // if page on not first page, reveal button $("#leftside").removeclass("hidden"); console.log("leftside shown"); } else if ($("#flipbook").turn("page") == 11) { // if page we're on last page, hide next button $("#rightside").addclass("hidden"); console.log("rightside hidden"); } } function nextslide() { checkpage($("#flipbook").turn("next")); console.log("next"); } function previousslide() { checkpage($("#flipbook").turn("previous")); console.log("previous"); }body { overflow: hidden; } #flipbook { width: 400px; height: 300px; } #leftside { position: absolute; padding: 0; margin: 0; top: 0px; left: 0px; outline: 0px; z-index: 2; border: 0; background: transparent; } #rightside { position: absolute; padding: 0; margin: 0; top: 0px; left: 150px; outline: 0px; z-index: 2; border: 0; background: transparent; } #flipbook .page { width: 400px; height: 300px; background-color: white; line-height: 300px; font-size: 20px; text-align: center; } .hidden { display: none; } #flipbook .page-wrapper { -webkit-perspective: 2000px; -moz-perspective: 2000px; -ms-perspective: 2000px; -o-perspective: 2000px; perspective: 2000px; } #flipbook .hard { background: #ccc !important; color: #333; -webkit-box-shadow: inset 0 0 5px #666; -moz-box-shadow: inset 0 0 5px #666; -o-box-shadow: inset 0 0 5px #666; -ms-box-shadow: inset 0 0 5px #666; box-shadow: inset 0 0 5px #666; font-weight: bold; } #flipbook .odd { background: -webkit-gradient(linear, right top, left top, color-stop(0.95, #fff), color-stop(1, #dadada)); background-image: -webkit-linear-gradient(right, #fff 95%, #c4c4c4 100%); background-image: -moz-linear-gradient(right, #fff 95%, #c4c4c4 100%); background-image: -ms-linear-gradient(right, #fff 95%, #c4c4c4 100%); background-image: -o-linear-gradient(right, #fff 95%, #c4c4c4 100%); background-image: linear-gradient(right, #fff 95%, #c4c4c4 100%); -webkit-box-shadow: inset 0 0 5px #666; -moz-box-shadow: inset 0 0 5px #666; -o-box-shadow: inset 0 0 5px #666; -ms-box-shadow: inset 0 0 5px #666; box-shadow: inset 0 0 5px #666; } #flipbook .even { background: -webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada)); background-image: -webkit-linear-gradient(left, #fff 95%, #dadada 100%); background-image: -moz-linear-gradient(left, #fff 95%, #dadada 100%); background-image: -ms-linear-gradient(left, #fff 95%, #dadada 100%); background-image: -o-linear-gradient(left, #fff 95%, #dadada 100%); background-image: linear-gradient(left, #fff 95%, #dadada 100%); -webkit-box-shadow: inset 0 0 5px #666; -moz-box-shadow: inset 0 0 5px #666; -o-box-shadow: inset 0 0 5px #666; -ms-box-shadow: inset 0 0 5px #666; box-shadow: inset 0 0 5px #666; }<div id="flipbook"> <!--navigation button--> <button id="leftside" class="hidden" onclick="previousslide()"> <img src="lib/leftside.png"> </button> <button id="rightside" onclick="nextslide()"> <img src="lib/rightside.png"> </button> <div class="hard">turn.js</div> <div class="hard"></div> <div>page 1</div> <div>page 2</div> <div>page 3</div> <div>page 4</div> <div class="hard"></div> <div class="hard"></div> </div>
maybe this:
function checkpage(page) { if ($("#flipbook").turn("page") == 1) { // if page on first page, hide button $("#leftside").addclass("hidden"); } else { //if on other page, show button $("#leftside").removeclass("hidden"); } if ($("#flipbook").turn("page") == 11) { // if page we're on last page, hide next button $("#rightside").addclass("hidden"); } else { //if on other page, show next button $("#rightside").removeclass("hidden"); } }
Comments
Post a Comment