Drupal jQuery run script on .resize()

Question

I have the following code that gets the body height and writes it to a div that displays as a table-cell so the content can be vertically centered on any screen size on resize. I've tested this and it works fine.

$( window).resize(function() {
    bodyHeight = $('body').outerHeight();
    console.log('bodyHeight =' + bodyHeight);
    $('.table-cell').css('height', bodyHeight +'px');
});

Now if I try put it in Drupal using the code below. It doesn't work. jQuery is being called because I can run the script in Drupal but not when I specify to run it on resize.

jQuery(window).resize(function($) {
    bodyHeight = $('body').outerHeight();
    console.log('bodyHeight =' + bodyHeight);
    $('.table-cell').css('height', bodyHeight +'px');
});

have you written your code in Document.ready?

Rituraj ratan
– Rituraj ratan

2013-09-25 04:24:32 +00:00
Commented Sep 25, 2013 at 4:24 — Rituraj ratan
– Rituraj ratan, Commented Sep 25, 2013 at 4:24

ahren · Accepted Answer · 2013-09-25 04:27:17Z

3

The first argument in the resize method is the event object, it's not jQuery.

jQuery(window).resize(function(e) {
    bodyHeight = $('body').outerHeight();
    console.log('bodyHeight =' + bodyHeight);
    $('.table-cell').height(bodyHeight);
});

You can also just use the .height() method instead of the .css() method.

If you're worried about conflicting $ variables, wrap it all in this:

jQuery(function($){
 // Your window resize here.
 // $ will reference jQuery within this scope
});

answered Sep 25, 2013 at 4:27

ahren

17k5 gold badges52 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Clinton Green Over a year ago

Thanks mate, your second suggestion, wrapping it in jQuery(function($) worked. I'll try out the .height() method too. It sounds cleaner than .css() Cheers

Collectives™ on Stack Overflow

Drupal jQuery run script on .resize()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related