Responsive issue / resize issue

[sumitwasist]

1)Book dosn't get width/height defined percentage till i re-size my browser 2) i have three books in a single window as in accordion type but its difficult for to behave resposive till i resize my broser

Is ther any way out for this or should i change out put css(px) in pixel in Percentage(%) please help, thanks in advance and rest plugin is awesome

[paucapo]

Use a "content div" like: < div id="content" > < div class="booklet" >...< /div > < /div >

Set options width and height to '100%' and set width and height to #content. Save current page width 'change' event. In $(window).resize() event:

• calculate the new width and height for content (relative to the new window size)
• destroy the booklet
• recreate the booklet with startingPage to the current page.

That's all.

[sumitwasist]

Thanx for quick reply, wish could use this, but i had changed the plugin instead

[builtbywill]

As mentioned by @paucapo you would need to target $(window).resize() and resize the booklet's container.

function contentAutoSize(){
    $("#content").height($(window).height());
}

contentAutoSize(); // call on first load
$(window).resize(contentAutoSize); // call on browser resize

$(".booklet").booklet({
    width:"100%",
    height:"100%"
});

You may not have to destroy and create the booklet; that would depend on your content.