Portrait screen with 2 pages but only one of them should show
The screen is always portrait and the size is variable.
The page will load 2 pages next to each other like a book, but only one of them gets shown, the other one should be hidden on the left or right side depending on which page gets displayed right now.
If the left page shows, there should be a way to move to the right page with a button. After you push that button to show the right page, the screen will move in that direction and will display the other page.
There's infinite ways you could do that. The quickest would be using a jQuery plugin of a slider, a responsive slider would be better.
I created this demo for you with really simple CSS ready to edit: http://jsfiddle.net/mcamyeuq/
var windowWidth = $(window).width(); var windowHeight = $(window).height(); $('.slide').width(windowWidth); $('.slide').height(windowHeight);
You can set the size to whatever you want in the .slide CSS class.
The scripts used are jQuery and Flex Slider: http://flexslider.woothemes.com
What is good about Flex Slider is that it's touch enabled, so you don't really have to press a button to go next, but if you're in a mobile device like a tablet, a swipe would move the page also.