page switch

by ciroxxx

HTML

<div>
    <a href="pool" class="item">
	    <label>Page 1</label>
    </a>
    <a href="thechat" class="item">
        <label>Page 2</label>
    </a>
</div>

<div data-role="page" id="page1">
    <h1>Page 1</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit auctor massa, eu efficitur diam pulvinar fermentum. Proin quis lorem erat. Nunc sollicitudin ex nec erat pharetra ultrices. In nec orci tellus. Integer turpis diam, posuere in urna eget, feugiat sagittis ipsum. Vivamus hendrerit consectetur nibh at efficitur. Morbi sit amet maximus lorem.
    
    Duis ultrices nisl vitae felis suscipit, eu tempus justo sodales. Sed sit amet magna dolor. Nulla vitae congue elit. Duis pellentesque ligula enim, eu fermentum velit fringilla eu. Aliquam blandit diam at libero rutrum, ut luctus dolor porttitor. Vivamus ac arcu ac sapien venenatis placerat eu sed nisi. Vestibulum dapibus quam non ipsum bibendum, et elementum sem ultricies. Sed accumsan odio vel tempor vehicula. Ut ultricies, neque a efficitur convallis, odio urna pulvinar leo, et venenatis massa dolor in magna. Aliquam erat volutpat. Fusce nec turpis nec quam fermentum molestie at luctus nisl. Curabitur ipsum nisi, tempus in mauris id, laoreet porttitor nulla.
    </p>	
</div>
	
<div data-role="page" id="page2">
	<h1>Page 2</h1>
    <p>
        Aliquam erat volutpat. Aenean non magna tristique, varius orci sed, accumsan nunc. Donec tincidunt est vitae felis auctor fermentum. Fusce convallis, nulla vitae consequat venenatis, neque mauris maximus lectus, quis consectetur mi turpis ut nunc. Nullam lobortis nibh at tortor dictum condimentum. Sed vitae augue arcu. Mauris erat urna, condimentum ac placerat et, faucibus sit amet nisi. Phasellus cursus mi a lectus eleifend, ut interdum sapien cursus. Sed at magna ex. Aenean nulla augue, faucibus in pellentesque in, vestibulum nec odio. Aenean at turpis justo. Nunc vel elementum eros, at dignissim velit. Mauris et dictum...

CSS

div{clear:both}
a{float:left;}

div[data-role="page"]{
	left:110%;
    transition: left .3s linear;
    height:0;
    position:relative;
    overflow-x:hidden;
}

div[data-role="page"].display{
	left:0;
	height:auto;
}

JavaScript

$('a[href="pool"]').click(function(){
	event.preventDefault();
	$('div#page2').removeClass('display');
	$('div#page1').addClass('display');
});

$('a[href="thechat"]').click(function(){
	event.preventDefault();
	$('div#page1').removeClass('display');
	$('div#page2').addClass('display');
});