0

This seems like a simple one, but I must be missing something? I want the page to slide down into view when the document loads. I thought I could do it by just wrapping the content in a div positioned off the page, and bring it down. But nothing happens? here's what I was thinking:

<style>
#slidebody {
    height: 100%;
    position:relative;
    top:-900px; /* maybe I can do it without this? */
}
</style>



<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 -->

    </head>

    <body>
    <div id="slidebody"><!-- here's the container div -->

        <?php include 'inc/header.php'; ?>

        <?php include 'inc/footer.php'; ?>

        <!-- ////////////////////////// SECTION ONE  ////////////////////////// --> 
        <div name="one" class="section black" id="section1">
            <div id="gallery_about" class="gallery">

            </div>

            <h2>header 1</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="two" class="section white" id="section2">
            <div id="gallery_floorplans" class="gallery">

            </div>

            <h2>header 2</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>


         <!-- ////////////////////////// SECTION THREE ///////////////////// --> 
        <div name="three" class="section black" id="section3">
        <div id="gallery_hood" class="gallery">

            </div>
            <h2>header3</h2>
            <p class="body_copy">
                Lorem 3 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>

    </body>

    <script>
$(document).ready(function() {
    $("#slidebody").slidedown();
});
</script>
</html>
2
Contributors
4
Replies
20
Views
4 Years
Discussion Span
Last Post by code_rum
0

slideDown works on hidden elements
remove top:-900px; from css
and add display:none;

Change slidedown() function to slideDown() (D capital)

Edited by code_rum

0

good catch... but still nothing. I tried it without any css as well, and no good.

I also found a css animation solution. But it doesn't work in enough of the commonly used browsers, yet. So I'm stuck trying to find a jquery solution.

0

ah... I think I got it working now. It worked with the css set as this:

#slidebody {
     height: 100%;
     display:none;
}

Edited by turpentyne

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.