Can this jQuery code be refactored

Question

I am trying to improve my jQuery skill and I have this bit of code. It's basic purpose is to size and resize a background to keep it at the same height as a responsive slider, so matching the size of the window; and tracking that if it's resized by the user.

Could it be refactored better or is it good as it is.

$(window).load(function() {
var height = $('#display-area').css('height');
$('.skin-background')
    .css('display', 'block')
    .css('height', height);
});
$(window).resize(function() {
var height = $('#display-area').css('height');
$('.skin-background')
    .css('height', height);
});

Post it in http://codereview.stackexchange.com/ – Engineer Jun 15 '12 at 13:26 — Engineer, Jun 15 '12 at 13:26

Niko · Accepted Answer · 2012-06-15T13:37:01.957

// Cache elements that get used more than once
var $background = $('.skin-background');
var $displayArea = $('#display-area');

// Don't repeat yourself, put recurring actions in functions
var resizeBackground = function() {
    $background.css({
        'display': 'block',
        'height': $displayArea.height() + 'px'
    });
};

$(window).load(resizeBackground).resize(resizeBackground);

You should also consider to "throttle" the event handler for the resize event, because some browsers fire a lot of them when resizing the window. Using underscore.js, this would then be:

$(window).load(resizeBackground).resize( _.throttle(resizeBackground, 100) );

$(window).bind("load resize",resizeBackground); – deerua Jun 15 '12 at 13:36 — deerua, Jun 15 '12 at 13:36

score 1 · Answer 2 · 2012-06-15T13:36:24.033

1

$(window).on("load resize",function() {
var height = $('#display-area').height();
$('.skin-background')
    .css({'display':'block','height':height});
});

edited Jun 15 '12 at 13:36

answered Jun 15 '12 at 13:27

What benefit does this have? None to me, I'm sorry. – Sebastian Wramba Jun 15 '12 at 13:30
I like the `{'display':'block','height':height}`. I forgot I could do that. – byronyasgur Jun 15 '12 at 13:32
I mean, that in my opinion it does not make the code any better. – Sebastian Wramba Jun 15 '12 at 13:33
2

Well, that is quite a difference now *after* your edit. But begging for an upvote does not work for me. – Sebastian Wramba Jun 15 '12 at 13:39
hey iam not begging you for upvote that was just a pj and your upvote don't affect me so much as in three-four days i will earn more reputation than you if stayed active – Jun 15 '12 at 13:41

score 1 · Answer 3 · answered Jun 15 '12 at 13:30

You can use single selector for adding both events and can set multiple css attributes like this

$(window).load(function() {
var height = $('#display-area').css('height');
$('.skin-background')
    .css('display' : 'block','height', height);

}).resize(function() {
var height = $('#display-area').css('height');
$('.skin-background')
    .css('height', height);
});

Can this jQuery code be refactored

3 Answers3