JQuery slideUp and slideDown the whole <section>

Question

Good night, morning, afternoon...

I'm developing a website that the whole content slides up and down... I have thought in many possibilities but still couldn't find an answer. Note that the index/intro/main page is the second section. My inspiration is :

http://www.pulpdesign.it/

Thanks , in advance.

<section class="tips-content">
        </section>

        <section id="intro">
            <h1 id="intro-logo">bla</h1>
                <span id="title">blabla</span>
                <nav id="navigation">
                    <a href="#" id="go_curriculum"><span class="curriculum"></span><span id="curriculum">currículo</span></a>
                    <a href="#" id="go_contact"><span id="contact">agendamento</span><span class="contact"></span></a>
                    <a href="#" id="go_services"><span id="services">serviços</span><span class="services"></span></a>
                    <a href="#" id="go_tips"><span id="tips">dicas</span><span class="tips"></span></a>
                </nav>
        </section>

        <section id="curriculum-content">
            <div style="height:100%; background:red;">
            </div>
        </section>

        <script>
            $(document).ready(function(){


                $("#go_curriculum").click(function(){
                    $(".tips-content").slideDown("slow");
                });

                $("#go_tips").click(function(){

                    $("#curriculum-content").slideUp("slow");


                });

            });
        </script>
</body>

Answer 1

I'm the developer who wrote that site :) First, thanks for taking that as inspiration! Then, to answer to your question, you'll need, as CP510 said, a general wrapper with

overflow:hidden; height: 100%; width: 100%

I used the body tag, that actually isn't the best choice, it's better to use a

and inside that container you'll have all of your section with

position: absolute;
width: 100%;
height: 100%;

because the you'll have to animate the

scrollLeft/scrollTop

properties of the container with jQuery, and using body as main container I had to deal with some safari's bugs. Another trick is to think about your sections as the sides of an opened cube. So your main section won't be at

top: 0; left: 0

but at

top: the-height-of-the-section-above-the-home;
left: the-width-of-the-section-to-the-left-of-the-home;

and so on with the other sections. I hope I made it quite clear, my English isn't so good. If you have any other questions just ask!