CODEWITHSUNDEEP
javascripthtmlturn.js
sotiris alexakis
sotiris alexakis

Reputation: 13

How to take the page number the user want for Turn.js

I'm using the turn.js to make a catalog. I grab the pages from the database with PHP and I want to make some control buttons like search specific page. How can I parse the value from the searchbox to take the place of number 10 here $("#flipbook").turn("page", 10); and run it?

<div class="flipbook-viewport">
    <div class="container1">
        <div class="flipbook">

    <?php
        if (isset($_GET['eb_catalogs_id'])){
        $catalogos_id = $_GET['eb_catalogs_id'];
        $query= "SELECT c_catalog_name FROM eb_catalogs WHERE c_id = $catalogos_id";
        $test= $conn->query($query);
        $catalogname =$test->fetchColumn();
        $query1 = ("SELECT * FROM eb_catalog_".$catalogname."");
        $pages = $conn->query($query1);
        $i = 1;
        foreach($pages as $page){
        echo "<div class='p".$i."' style='background-image:url(https://untuneful-carload.000webhostapp.com/img/catalogs/".$catalogname."/".$page['eb_catalog_imgs'].")'></div>";
        $i++;
        }}else{
            echo "nothing";
        }
        ?>
        </div>
    </div>
</div>
<script type="text/javascript">
function loadApp() {
    // Create the flipbook
    $('.flipbook').turn({
            width:922,  
            height:600,  
            elevation: 50,          
    });
}
// Load the HTML4 version if there's not CSS transform
yepnope({
    test : Modernizr.csstransforms,
    yep: ['js/turn.js'],
    nope: ['js/turn.html4.min.js'],
    both: ['css/basic.css'],
    complete: loadApp
});
alert("The current page is: "+$("#flipbook").turn("page"));
</script>

here is the code of the page so far.. I know how to make an input field but I dont know how to parse the value of the input field to the function that jumps to the specific page the user wants.

Upvotes: -1

Views: 940

Answers (1)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11096

If you pass the page number to next page, you may get it using $_post or $_get and execute it on page load:

<script>
$(window).on("load",function(){
   $("#flipbook").turn("page", <?php echo ($_GET["page"]) ?>);
})
</script>

If you are in the same page and just want to flip the book, you can easily get the number using val():

<input id="pageNumber">
<button onclick="flipPage()">GO</button>

<script>
function flipPage(){
   var pageNumber=$('#pageNumber').val();
   $("#flipbook").turn("page", pageNumber);
}
</script>

Upvotes: 0

Related Questions