want page to slide down onload

Question

turpentyne 0 Newbie Poster

11 Years Ago

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>

javascript

2 Contributors
4 Replies
180 Views
1 Hour Discussion Span
Latest Post 11 Years Ago Latest Post by code_rum

code_rum 8 Junior Poster in Training

11 Years Ago

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

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

Edited 11 Years Ago by code_rum

Reply to this topic

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.

turpentyne 0 Newbie Poster · Answer 1 · 2013-05-09T15:01:20+00:00

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.

turpentyne 0 Newbie Poster · Answer 2 · 2013-05-09T15:05:34+00:00

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

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

code_rum 8 Junior Poster in Training · Answer 3 · 2013-05-09T15:10:58+00:00

Ahhh...mentioned in above comment

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