CODEWITHSUNDEEP
jquerymagento
Joshua34
Joshua34

Reputation: 394

jquery resize div height relative to document height

I am trying to dynamically resize a div using jquery so that it adjusts to the height of the visitor's viewport within Magento.

var $j = jQuery.noConflict();
$j(window).load(function() {
$j(".header-clear").css({'height':(($j(document).height())/2.7)+'px'});
});

For example if the visitor's viewport is 1080px then the div height should be set to 400px.

EDIT: Changed script based on answers and .jquery api for .resize and .height, and removed live link.

var $j = jQuery.noConflict();
$j(window).load(function() {
$j(".header-clear").css({'height': parseFloat(($j(window).height())/2.7)+'px'});
});
$j(window).resize(function() {
$j(".header-clear").css({'height': parseFloat(($j(window).height())/2.7)+'px'});
});

This got it working for me.

Upvotes: 0

Views: 767

Answers (2)

user2334807
user2334807

Reputation:

Use the parseFloat as you are divided the height by 2.7 so it will the appropriate result.

var $j = jQuery.noConflict();
$j(window).load(function() {
$j(".header-clear").css({'height': parseFloat(($j(document).height())/2.7)+'px'});
});

Upvotes: 1

Control Freak
Control Freak

Reputation: 13233

You would use the .resize() function to trigger the resize, So it would look something like this:

 var $j = jQuery.noConflict();

 $j(document).ready(function() {
   resizeIt();  //the first load
   $j(window).resize(function(){ resizeIt(); });  //on every resize
 });

 function resizeIt() { //function to resize your object
   $j(".header-clear").css({'height':(($j(document).height())/2.7)+'px'});
 }

Upvotes: 1

Related Questions