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
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts

    slideDown on load

    I'm trying to get a page to slide into view when the page loads. I have it working, but it doesn't do quite what I want. I did the same thing with css animations, and that does exactly what I want, but has issues on some of the older browsers.

    Right now, the jquery version slides open, but it's content is static. I want everything to slide into view from the top, like the css does.

    Here's the Jquery version I have:

    Code:
    <style>
    
    #slidebody {
    	height:100%;
    	display:none;
    }
    
    
    </style>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>xxxx</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <meta name="description" content="Website Vertical Scrolling with jQuery" />
            <meta name="keywords" content="jquery, vertical, scrolling, scroll, smooth"/>
            <link rel="stylesheet" href="css/styles_default.css" type="text/css" media="screen"/>
            <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'><!-- google font -->
            
            
             <!-- JavaScript -->
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
            <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
            <script type="text/javascript" src="js/functions.js"></script>
            
            
       
            
            
        </head>
    
        <body>
        <div id="slidebody">
            <?php include 'inc/header.php'; ?>
        
            <?php include 'inc/footer.php'; ?>
    
            <!-- ////////////////////////// SECTION ONE ... About ////////////////////////// --> 
            <div name="about" class="section black" id="section1">
            	<div id="gallery_about" class="gallery">
            			
            	</div>
            
                <h2>ABOUT </h2>
                <p class="body_copy">
                   Lorem 1 ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae justo ipsum. Donec eros lorem, convallis non dictum ut, mattis id nisl. Proin vitae est ac ligula varius interdum. Nulla ac magna sit amet ante tempor accumsan. Nunc nunc dolor, viverra id posuere vitae, tincidunt ac velit. Mauris consequat semper risus, sed rutrum tellus lobortis eget. Suspendisse lacinia neque eu enim suscipit tristique accumsan est dictum. Etiam imperdiet elementum libero eget porta. 
                </p>
               <ul class="nav" style="float:right;">
                    <li>1</li>
                    <li><a href="#section2">2</a></li>
                    <li><a href="#section3">3</a></li>
                </ul> 
            </div>
            
            
           <!-- ////////////////////////// SECTION TWO  ...////////////////////////// --> 
            <div name="asdf" class="section white" id="section2">
            	<div id="gallery_2" class="gallery">
            			
            	</div>
            	
                <h2>two</h2>
                
                <p class="body_copy">
                    Lorem 2 ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae justo ipsum. Donec eros lorem, convallis non dictum ut, mattis id nisl. Proin vitae est ac ligula varius interdum. Nulla ac magna sit amet ante tempor accumsan. Nunc nunc dolor, viverra id posuere vitae, tincidunt ac velit. Mauris consequat semper risus, sed rutrum tellus lobortis eget. Suspendisse lacinia neque eu enim suscipit tristique accumsan est dictum. Etiam imperdiet elementum libero eget porta. 
    
                </p>
            </div>
            
    
    </div>
           
            <script>
    $(document).ready(function() {
    
    
        $("#slidebody").slideDown('slow', function() {
    	    
    	 });
    });
    </script>
           
        </body>
        
    
    </html>
    If I replace the css style with this, it works how I want, but not on all browsers:

    Code:
    #slidebody {
      background-color:#000;
      margin:0 auto;
      -webkit-backface-visibility: hidden;
    }
    
    /* Step 1: Build the Animation */
    @-webkit-keyframes aniload {
      from {-webkit-transform:translate(0px, -500px)}
      to   {-webkit-transform:translate(0px, 0px)}
    }
    
    @-moz-keyframes aniload {
      from {-moz-transform:translate(0px, -500px)}
      to   {-moz-transform:translate(0px, 0px)}
    }
    
    @-ms-keyframes aniload {
      from {-ms-transform:translate(0px, -500px)}
      to   {-ms-transform:translate(0px, 0px)}
    }
    
    @-o-keyframes aniload {
      from {-o-transform:translate(0px, -500px)}
      to   {-o-transform:translate(0px, 0px)}
    }
    
    @keyframes aniload {
      from {transform:translate(0px, -500px)}
      to   {transform:translate(0px, 0px)}
    }
    
    /* Step 2: Call the Animation */
    #slidebody {
      -webkit-animation:aniload .75s;
      -moz-animation:aniload .75s;
      -ms-animation:aniload .75s;
      -o-animation:aniload .75s;
      animation:aniload .75s;
    }

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    408
    Thanks
    17
    Thanked 2 Times in 2 Posts
    I seemed to have solved my problem with a different solution. animate.

    changed css to:

    Code:
    #slidebody {
    	position:absolute;
    	top:-900px;
    }
    and changed jquery to:
    Code:
    <script>
    $(document).ready(function() {
    	$("#slidebody").animate({top:'0px'},"slow");
    });
    </script>


  •  

    Posting Permissions

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