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

-1

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.

edited Nov 21 '18 at 9:29

wanttobeprofessional

97331223

asked Nov 21 '18 at 8:17

sotiris alexakis

Do you need a specific button for every page or just an input to type the number? Please show us what you tried so far and what is your exact problem?
– Ali Sheikhpour
Nov 21 '18 at 8:20

i just need a search field.... you can see here the page link
– sotiris alexakis
Nov 21 '18 at 8:32

add a comment |

-1

<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.

edited Nov 21 '18 at 9:29

wanttobeprofessional

97331223

asked Nov 21 '18 at 8:17

sotiris alexakis

Do you need a specific button for every page or just an input to type the number? Please show us what you tried so far and what is your exact problem?
– Ali Sheikhpour
Nov 21 '18 at 8:20

i just need a search field.... you can see here the page link
– sotiris alexakis
Nov 21 '18 at 8:32

add a comment |

-1

<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.

edited Nov 21 '18 at 9:29

wanttobeprofessional

97331223

asked Nov 21 '18 at 8:17

sotiris alexakis

<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.

javascript html turn.js

edited Nov 21 '18 at 9:29

wanttobeprofessional

97331223

asked Nov 21 '18 at 8:17

sotiris alexakis

edited Nov 21 '18 at 9:29

wanttobeprofessional

97331223

asked Nov 21 '18 at 8:17

sotiris alexakis

edited Nov 21 '18 at 9:29

wanttobeprofessional

97331223

edited Nov 21 '18 at 9:29

wanttobeprofessional

97331223

edited Nov 21 '18 at 9:29

wanttobeprofessional

97331223

asked Nov 21 '18 at 8:17

sotiris alexakis

asked Nov 21 '18 at 8:17

sotiris alexakis

asked Nov 21 '18 at 8:17

sotiris alexakis

Do you need a specific button for every page or just an input to type the number? Please show us what you tried so far and what is your exact problem?
– Ali Sheikhpour
Nov 21 '18 at 8:20

i just need a search field.... you can see here the page link
– sotiris alexakis
Nov 21 '18 at 8:32

add a comment |

Do you need a specific button for every page or just an input to type the number? Please show us what you tried so far and what is your exact problem?
– Ali Sheikhpour
Nov 21 '18 at 8:20

i just need a search field.... you can see here the page link
– sotiris alexakis
Nov 21 '18 at 8:32

Do you need a specific button for every page or just an input to type the number? Please show us what you tried so far and what is your exact problem?
– Ali Sheikhpour
Nov 21 '18 at 8:20

i just need a search field.... you can see here the page link
– sotiris alexakis
Nov 21 '18 at 8:32

add a comment |

1 Answer
1

active

oldest

votes

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>

answered Nov 21 '18 at 8:46

Ali Sheikhpour

5,31711441

I tried the second solution but the button doesnt work... :/
– sotiris alexakis
Nov 21 '18 at 9:04

Do you receive any error in console? if not, check if you have setup the #flipbook with this exact name?
– Ali Sheikhpour
Nov 21 '18 at 9:07

if I type this in console $("#flipbook").turn("page", 10); it must jump to page number 10 right? If it is supposed to work like this then it not work... i get some errors inside the turn.js file
– sotiris alexakis
Nov 21 '18 at 9:14

In the code you added to original post, there is no element with ID flipbook, you have class names instead.@sotirisalexakis
– Ali Sheikhpour
Nov 21 '18 at 9:18

Yeap I show that just when I wrote the comment! I added the Id flipbook where is the class flipbook and it work! Thank you VERY much!
– sotiris alexakis
Nov 21 '18 at 9:20

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407764%2fhow-to-take-the-page-number-the-user-want-for-turn-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

answered Nov 21 '18 at 8:46

Ali Sheikhpour

5,31711441

I tried the second solution but the button doesnt work... :/
– sotiris alexakis
Nov 21 '18 at 9:04

Do you receive any error in console? if not, check if you have setup the #flipbook with this exact name?
– Ali Sheikhpour
Nov 21 '18 at 9:07

if I type this in console $("#flipbook").turn("page", 10); it must jump to page number 10 right? If it is supposed to work like this then it not work... i get some errors inside the turn.js file
– sotiris alexakis
Nov 21 '18 at 9:14

In the code you added to original post, there is no element with ID flipbook, you have class names instead.@sotirisalexakis
– Ali Sheikhpour
Nov 21 '18 at 9:18

Yeap I show that just when I wrote the comment! I added the Id flipbook where is the class flipbook and it work! Thank you VERY much!
– sotiris alexakis
Nov 21 '18 at 9:20

add a comment |

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>

answered Nov 21 '18 at 8:46

Ali Sheikhpour

5,31711441

I tried the second solution but the button doesnt work... :/
– sotiris alexakis
Nov 21 '18 at 9:04

Do you receive any error in console? if not, check if you have setup the #flipbook with this exact name?
– Ali Sheikhpour
Nov 21 '18 at 9:07

if I type this in console $("#flipbook").turn("page", 10); it must jump to page number 10 right? If it is supposed to work like this then it not work... i get some errors inside the turn.js file
– sotiris alexakis
Nov 21 '18 at 9:14

In the code you added to original post, there is no element with ID flipbook, you have class names instead.@sotirisalexakis
– Ali Sheikhpour
Nov 21 '18 at 9:18

Yeap I show that just when I wrote the comment! I added the Id flipbook where is the class flipbook and it work! Thank you VERY much!
– sotiris alexakis
Nov 21 '18 at 9:20

add a comment |

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>

answered Nov 21 '18 at 8:46

Ali Sheikhpour

5,31711441

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>

answered Nov 21 '18 at 8:46

Ali Sheikhpour

5,31711441

answered Nov 21 '18 at 8:46

Ali Sheikhpour

5,31711441

answered Nov 21 '18 at 8:46

Ali Sheikhpour

5,31711441

answered Nov 21 '18 at 8:46

Ali Sheikhpour

5,31711441

I tried the second solution but the button doesnt work... :/
– sotiris alexakis
Nov 21 '18 at 9:04

Do you receive any error in console? if not, check if you have setup the #flipbook with this exact name?
– Ali Sheikhpour
Nov 21 '18 at 9:07

if I type this in console $("#flipbook").turn("page", 10); it must jump to page number 10 right? If it is supposed to work like this then it not work... i get some errors inside the turn.js file
– sotiris alexakis
Nov 21 '18 at 9:14

In the code you added to original post, there is no element with ID flipbook, you have class names instead.@sotirisalexakis
– Ali Sheikhpour
Nov 21 '18 at 9:18

Yeap I show that just when I wrote the comment! I added the Id flipbook where is the class flipbook and it work! Thank you VERY much!
– sotiris alexakis
Nov 21 '18 at 9:20

add a comment |

I tried the second solution but the button doesnt work... :/
– sotiris alexakis
Nov 21 '18 at 9:04

Do you receive any error in console? if not, check if you have setup the #flipbook with this exact name?
– Ali Sheikhpour
Nov 21 '18 at 9:07

if I type this in console $("#flipbook").turn("page", 10); it must jump to page number 10 right? If it is supposed to work like this then it not work... i get some errors inside the turn.js file
– sotiris alexakis
Nov 21 '18 at 9:14

In the code you added to original post, there is no element with ID flipbook, you have class names instead.@sotirisalexakis
– Ali Sheikhpour
Nov 21 '18 at 9:18

Yeap I show that just when I wrote the comment! I added the Id flipbook where is the class flipbook and it work! Thank you VERY much!
– sotiris alexakis
Nov 21 '18 at 9:20

I tried the second solution but the button doesnt work... :/
– sotiris alexakis
Nov 21 '18 at 9:04

Do you receive any error in console? if not, check if you have setup the #flipbook with this exact name?
– Ali Sheikhpour
Nov 21 '18 at 9:07

if I type this in console $("#flipbook").turn("page", 10); it must jump to page number 10 right? If it is supposed to work like this then it not work... i get some errors inside the turn.js file
– sotiris alexakis
Nov 21 '18 at 9:14

In the code you added to original post, there is no element with ID flipbook, you have class names instead.@sotirisalexakis
– Ali Sheikhpour
Nov 21 '18 at 9:18

Yeap I show that just when I wrote the comment! I added the Id flipbook where is the class flipbook and it work! Thank you VERY much!
– sotiris alexakis
Nov 21 '18 at 9:20

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk