CODEWITHSUNDEEP
jquerycssresponsive-design
alt
alt

Reputation: 13907

How can I make this jQuery effect responsive?

UPDATE: I added this to my unload function:

$(window).resize(function(){
        var pageheight = $(window).height();
        $('section').css('height', pageheight)
    });

it works but performance is AWFUL on resizing of the window. Any suggestions?

I've got a page. There are two areas, header & section. Both are 100% of the pageheight (on page load, this is important). When you click the "begin" button, they both move up. Header is hidden and section comes into view.

This is all done by jQuery fetching the page height on page load. And so it works well, until you resize the browser window, then everything is off since the variable "page height" has changed. How can I keep the page height variable constantly updating so as I resize the browser window, it's responsive?

Here's the site: http://hashtraffic.com/

Click "begin" to see the scrolling effect.

Here's the jQuery:

jQuery.fn.center = function (absolute) {
    return this.each(function () {
        var t = jQuery(this);

        t.css({
            position:   absolute ? 'absolute' : 'absolute', 
            left:       '50%', 
            top:        '50%', 
            zIndex:     '99'
        }).css({
            marginLeft: '-' + (t.outerWidth() / 2) + 'px', 
            marginTop:  '-' + (t.outerHeight() / 2) + 'px'
        });

        if (absolute) {
            t.css({
                marginTop:  parseInt(t.css('marginTop'), 10) + jQuery(window).scrollTop(), 
                marginLeft: parseInt(t.css('marginLeft'), 10) + jQuery(window).scrollLeft()
            });
        }
    });
};

$(function(){
    var pageheight = $(window).height();
    $('section, header').css('height', pageheight)
    $('h1').delay(500).fadeTo(1000, 1);
    $('h2').delay(1000).fadeTo(1000, 1);
    $('h3').delay(1500).fadeTo(1000, 1);
    $('section').delay(500).fadeTo(1000, 1)
    $('hgroup').center();
    $('p').center()
    $('h3').click(function(){
        $('hgroup').animate({marginTop: -2*pageheight}, 300);
        $('section').animate({marginTop: -pageheight}, 300);
        $('p').delay(4000).fadeOut(function() {
            $(this).text("The internet is both the most powerful #interconnectivity mechanism we have, and is the crux of our #collectiveintelligence.").fadeIn()
            $(this).delay(4000).fadeOut(function(){
                $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                $(this).delay(4000).fadeOut(function(){
                    $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                    $(this).delay(4000).fadeOut(function(){
                        $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                        $(this).delay(4000).fadeOut(function(){
                            $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                            $(this).delay(4000).fadeOut(function(){
                                $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                            });
                        });
                    });
                });
            });
        });
    });
});

And the CSS:

* {
    margin: 0;
    padding: 0;
}
body {
    background: #FFF;
    overflow: hidden;
}
header {
    text-align: center;
    top: 50%;
    height: 100%;
    width: 100%;
}
h1 {
    font: 300 10em Anivers;
    text-shadow: 3px 3px 0 #FFF;
    position: relative;
    opacity: 0;
}
h2 {
    font: 300 3.5em Anivers;
    text-shadow: 3px 3px 0 #FFF;
    opacity: 0;
}
h3 {
    font: 300 3.5em Anivers;
    text-shadow: 3px 3px 0 #FFF;
    opacity: 0;
    cursor: pointer;margin-top: 75px;
    position: relative;
    left: 50%;
    margin-left: -75px;
    font: 100 3em Anivers;
    width: 150px;
    border: 4px solid #000;
    -webkit-border-radius: 30px;
}
p {
    font: 300 1.5em Anivers;
    text-align: center;
    position: relative !important;
    width: 800px;

}
section {
    height: 100%;
    width: 100%;
    opacity: 0;
}

Pageheight I'm guessing needs to be a percentage value, but you can't animate percentage values with jQuery so I'm a bit suck.

Thanks!

Upvotes: 1

Views: 2603

Answers (2)

whitneyit
whitneyit

Reputation: 1226

If you are truly concerned about performance, I would highly recommend Ben Almans Throttle / Debounce plugins. They have been designed for exactly this purpose.

The plugins can be found at http://benalman.com/projects/jquery-throttle-debounce-plugin/

Ben goes on to explain how the resize event gets fire continuously in some browsers which affects performance greatly.

On the example page: http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/ you can see the result of 'throttling' the resize event

Upvotes: 1

alt
alt

Reputation: 13907

$(window).resize(function(){
    var pageheight = $(window).height();
    $('section').css('height', pageheight)
});

That solves it! It just re-updates the pageheight when the window is resized. Performance issues were caused by an error in Safari. Cleared the cache, restarted the browser, ran smoothly!

Thanks to @nnnnnn and @SagarPatil

Upvotes: 0

Related Questions