/    Sign up×
Community /Pin to ProfileBookmark

Resizing the flipping page proportionally to the window size?

Copy linkTweet thisAlerts:
Aug 24.2012

Hi folks,

It is me again. I just want to resize the flip-page book on my website, but dont know how. I tried adding code to the *css file like

[CODE]width: 100%[/CODE]

and so, but It doesnt work.

Can someone please help me?

The page is [url]www.ideagrapher.com[/url]

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@HostTedAug 24.2012 — I had a quick look and

The background image width on the pages for the flip are 600px so that is likely affecting it.

If I get time this weekend I want to have a play with that code as could possibly use the same code for one of my projects, but I would definitely look at the image BG size of 600px and see what changing that and adjusting things accordingly does as you are surely getting 1200 for two x 600 so the maths says that will be something that needs addressing (though I am no expert on such things and will know more over the weekend).

Where's that page flip code from btw?
Copy linkTweet thisAlerts:
@graphycraftauthorAug 24.2012 — I had a quick look and

The background image width on the pages for the flip are 600px so that is likely affecting it.

If I get time this weekend I want to have a play with that code as could possibly use the same code for one of my projects, but I would definitely look at the image BG size of 600px and see what changing that and adjusting things accordingly does as you are surely getting 1200 for two x 600 so the maths says that will be something that needs addressing (though I am no expert on such things and will know more over the weekend).

Where's that page flip code from btw?[/QUOTE]

The script is made by Charles Mangin under creative commons license But I don't remeber from what page I found it. Thank you for the tip, I will try it.
-------------------------------------------------


Well I tried it and change the widht of 600px to 100% and all the pages disappeared.
Copy linkTweet thisAlerts:
@graphycraftauthorAug 24.2012 — *CSS code for the page1

[CODE]#pagesContainer {
margin:0 auto;
background-color: transparent;
position: relative;
overflow: hidden;
top: -155px;
}

#pagesContainer .pageContent {
display: none;
}

[COLOR="Red"]#pagesContainer .pageContent.page1 {
position: absolute;
top: 0;
left: 0;
display: block;
margin-left: 0;
}[/COLOR]

#pagesContainer .pageContent.page2 {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
}


#pagesContainer .pageContent.page3 {
margin-left:0;
padding: 0;
position:absolute;
left:0;
top:0;
padding-left: 0;
width: 0;
overflow: hidden;
display: block;
}

#pagesContainer .pageContent.page4 {
margin-left:0;
padding: 0;
position:absolute;
left:0;
top:0;
overflow: hidden;
display: block;
}

#pagesContainer .pageContent.page0 {
position: absolute;
top: 0;
left: 0;
display: block;
}

#pagesContainer .pageContent.pageN1 {
position: absolute;
top: 0;
left: 0;
width: 0;
overflow: hidden;
display: block;
}





[/CODE]
×

Success!

Help @graphycraft spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...