Resizing the flipping page proportionally to the window size?

This site is best viewed in a modern browser with JavaScript enabled.

Resizing the flipping page proportionally to the window size?

graphycraft

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

width: 100%

and so, but It doesnt work.

Can someone please help me?

The page is www.ideagrapher.com

HostTed

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?

graphycraft

HostTed;1219090 wrote:
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?

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.

graphycraft

*CSS code for the page1

#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;
	}