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!

Answer 2

This is a tricky one. But I have done it. The basic idea is to use a raw $().animate() function to move all this fun stuff around. Since slide up/down are just helper functions for this.

The next requirement is that the sections are absolutely positioned in a wrapper. It's a bit wonky but heres the psuedo layout

<DIV THAT TAKES THE WHOLE SCREEN WITH HIDDEN OVERFLOW>
   <DIV THAT INCLUDES ALL THE SECTIONS POSITIONED ABSOLUTE>
       <CONTENT DIVS POSITIONED CORRECTLY>
   </DIV>
<DIV>

Now what you do is move the absolutely positioned content container (the second div) to show the section using jquery.

$('#content-container').animate({top: POSITION_TOP+'px',left: POSITION_LEFT+'px'},'slow',cleanup_callback);

Now the POSITION_TOP and POSITION_LEFT placeholders could be a variable that gets set based on the navigation button thats hit. The cleanup_callback is an optional function if you want something to happen when the document arrives on that location.

Thats the jQuery way. There is a CSS way by using classes and transitions. It works by changing the holding containers class to basically declare where the target page is, then because CSS transitions are on, the movement is animated. Each of these "navigation classes" basically just dictate the top and left position properties.

Answer 3

Have a look on this EXAMPLE just to understand the basic idea on how this logic works.

This example has 3x2 full page divs( 6 pages total) and we are not using any JavaScript at all it's all CSS and HTML.

Please note that in order to remove the scrollbars from the page you will need to uncomment the below in the body style

body {
    white-space: nowrap;
    /*overflow:hidden;   UNCOMMENT THIS*/
}

jQuery for a smooth animation

var $root = $('html, body');
$('a').click(function () {

    $root.animate({

        scrollLeft: $($.attr(this, 'href')).offset().left,
        scrollTop: $($.attr(this, 'href')).offset().top

    }, 500);

    return false;
});

You can also have a look on this Website as it is very similar to what you want to achieve