Member Avatar for turpentyne

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
  • 180 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by code_rum

Recommended Answers

All 4 Replies

Member Avatar for code_rum

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
Member Avatar for turpentyne

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.

Member Avatar for turpentyne

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

#slidebody {
     height: 100%;
     display:none;
}
Edited by turpentyne
Member Avatar for code_rum

Ahhh...mentioned in above comment

remove top:-900px; from css
and add display:none;

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.