www.webdeveloper.com
Results 1 to 4 of 4

Thread: Resizing the flipping page proportionally to the window size?

Hybrid View

  1. #1
    Join Date
    Mar 2012
    Posts
    18

    Exclamation Resizing the flipping page proportionally to the window size?

    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%
    and so, but It doesnt work.

    Can someone please help me?

    The page is www.ideagrapher.com

  2. #2
    Join Date
    Aug 2012
    Posts
    13
    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?
    Last edited by HostTed; 08-24-2012 at 08:13 AM.

  3. #3
    Join Date
    Mar 2012
    Posts
    18
    Quote Originally Posted by HostTed View Post
    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.
    Last edited by graphycraft; 08-24-2012 at 08:33 AM.

  4. #4
    Join Date
    Mar 2012
    Posts
    18
    *CSS code for the page1

    Code:
    #pagesContainer {
    		margin:0 auto; 
    		background-color: transparent; 
    		position: relative;
    		overflow: hidden;
    		top: -155px;
    		}
    
    	#pagesContainer .pageContent {
    		display: none;
    	   }
    	
    	#pagesContainer .pageContent.page1 {
    		position: absolute;
    		top: 0;
    		left: 0;
    		display: block;
    		margin-left: 0;
    		}
    		
    	#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;
    		}

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles