Portrait screen with 2 pages but only one of them should show


Tags: javascript,jquery,html,css

Problem :

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.

Does anybody have an idea how to implement that with JavaScript or CSS.



Solution :

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/

I used JavaScript to detect the full size of the display and pass them to the pages.

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.


    CSS Howto..

    How does one know exact pixel size / relationships between CSS elements?

    How to put 2 text input fields in one?

    How can i have CSS3 animating menu like followbubble.com

    How to center my hmenu (no matter the resolution)?

    how to code different type of border in css?

    How to style an input that is a type=“button”?

    How am I supposed to address elements that are not a direct child of a given element in CSS?

    How to stop default CSS in asp.net [closed]

    layout - show the latter coded div at top without absolute positioning

    How do I stop my 'body' from eating my 'foot'

    How to use JavaScript to Alter CSS for Multiple Elements

    How do I adjust the spacing around the sides of list items in jquery mobile

    JavaFX: How do I set a Background Image in code?

    How to code a scrolling frame in css

    How can we avoid the shake when we hover over an element and set its border?

    How can I slide a image up and down over a background image to create a scanning effect?

    How to change anchor color when you hover over a list

    How to apply different width stored in PHP to 3 identical DIVs (using same CSS)

    How do I change the function of a button when the window size changes?

    How to scale image with with transition CSS? [closed]

    How to remove the empty space between divs in CSS?

    Dojo: how to find css definition for digit.form.filteringselect, especially the drop down list?

    How to find the screen width and apply it to a particular css

    How to select list item by its contents?

    How to reset margin-bottom to its default value

    How to toggle a div to slide up and down

    How to develop two different menu bars for a website (one for all users, and the other one for the Admin) in ASP.NET webfroms?

    How to center a single character both vertically and horizontally in a square div

    css - how to get (responsive) li's with the same height when they have a different width?

    How to make a div-Element be visible/hidden by Mouseover