Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Sliding pages

  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    36
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Sliding pages

    Hi,

    I am making a gaming site for my clan, i want to make the page slide left/right based on page change. i have got Test where if you pick gamers it slides but it is not quite what i am after.

    i am thinking there will need to be an
    Button OnClick Slide page off
    then a href new page load

    the new page loads by slide in..

    How would i do this? any links or tutorials you know of i could look up or reference? Bit of a noob here :S did a google and the example on my site was the closest to what i am after ..
    Make IT Work Computers
    www.mitwc.com.au

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    This is a modification of code from MrCat. You will have to fiddle with it to work it into you design.
    Hope this will be a little better for you. If not easy to mod to animate off the screen.
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    body {
        margin: 0;
    	padding: 0;
    }
    .container{
    	width: 410px;
    	height: 300px;
    	margin-left: 600px;
    	position:relative;
    }
    .leftbox {
        position: relative;
        z-index: 2;
    	width: 200px;
        background-color: rgb(155, 155, 25);
    }
    .rightbox {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        width: 200px;
        background-color: rgb(255, 155, 155);
    }
    </style>
    </head>
    
    <body>
    <div class="container">
    	<div class="leftbox">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Sed porttitor lectus nibh. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Donec sollicitudin molestie malesuada.</div>
    	<button onclick="move_it();">GAMERS</button>
    	<div class="rightbox">Rightbox ... Quisque velit nisi, pretium ut lacinia in, elementum id enim. Sed porttitor lectus nibh. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada.</div>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
    function move_it(){
    	$(".rightbox").animate({left:"210px"}).delay( 70 ).css("z-index","3");
    	$(".rightbox").animate({left:"0px"});
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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