Changing the Hover to Click functionality using Jquery

Question

I'm using Builtby will FlipBook.

HTML

<div id="mybook">
    <div title="This is a page title"> 
        <h3>Yay, Page 1!</h3>
    </div>
    <div> 
        <h3>Yay, Page 2!</h3>
    </div>
    <div title="This is another title"> 
        <h3>Yay, Page 3!</h3>
    </div>
    <div> 
        <h3>Yay, Page 4!</h3>
    </div>
    <div title="Hooray for titles!"> 
        <h3>Yay, Page 5!</h3>
    </div>
    <div> 
        <h3>Yay, Page 6!</h3>
    </div>
</div>

Jquery

$(function() {
    $('#mybook').booklet({
        menu: '#custom-menu',
        pageSelector: true
    });
});

The Demo is Here: http://builtbywill.com/code/booklet/demos/pageselect

Now I want to change the default behavior of the Page Selector. We are getting the Page options on hover. I want to change it to Click functionality. When I Click on the Page Selector, it should display the Menu. When I click it on again, it should hide the Page selecor..Thanks.

Saranya Sadhasivam · Accepted Answer · 2013-10-07 10:58:16Z

1

Try the below jquery.

DEMO HERE

$('#mybook').booklet({
    menu: '#custom-menu',
    pageSelector: true,
    manual:   false,
    hovers:   false,
    overlays: true
});

In your booklet.js file, change the line no. 577 //add hover effects to the below one

// add click effects
pageSelector.on('click.booklet', function () {
    if (pageSelectorList.stop().height() == pageSelectorHeight)
    {
         pageSelectorList.stop().animate({height: 0, paddingBottom: 0}, 500);
    }
    else
    {  
         pageSelectorList.stop().animate({height: pageSelectorHeight, paddingBottom: 10}, 500);
    }
});

edited Oct 7, 2013 at 10:58

answered Oct 7, 2013 at 6:18

Saranya Sadhasivam

1,3147 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Billy Over a year ago

Thanks for the prompt reply. But I want the Page selector (which is on the top of the book with Black color) to be work on click not on hover.

Saranya Sadhasivam Over a year ago

I don't see any Page selector (which is on the top of the book with Black color)

Billy Over a year ago

It is located on the top right hand side of the booklet with title"1-2". plz refer: builtbywill.com/code/booklet/demos/pageselect

Saranya Sadhasivam Over a year ago

Check the updated fiddle, you need to change hover function to click in your booklet.latest.js file jsfiddle.net/saranyaciet/YwRab/2

Saranya Sadhasivam Over a year ago

Check the edited answer and find for line no. 577 with comment //add hover effects in your booklet.js plugin

Dinesh · Accepted Answer · 2013-10-07 05:43:39Z

0

Try this:

//setter

$(".selector").booklet( "option", "hovers", false );

answered Oct 7, 2013 at 5:43

Dinesh

545 bronze badges

Collectives™ on Stack Overflow

Changing the Hover to Click functionality using Jquery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related