CODEWITHSUNDEEP
jquerycssdynamicresize
kplatinum777
kplatinum777

Reputation: 25

Dynamic height in JQuery

I'm having a bit of trouble with a block of jquery code that sets the height of a menu bar based on the width of a logo contained therein. The problem is that the site is a responsive design, so the logo's width varies depending on how wide the window is...and for some reason, this code only works when you first load the page, but doesn't continue to resize the menu bar as the logo gets resized with the page window. Any help would be appreciated; here's the code:

$(document).ready(function(){
  var logoWidth = $('#logo').css('width'); //Get width of logo
  var newHeight = parseInt(logoWidth) * 0.34666667; //Calculate resultant height of menu-bar
  $("#grey-section").height(newHeight ); //Set new height of menu-bar
});

Upvotes: 0

Views: 137

Answers (2)

matrix
matrix

Reputation: 39

function getscreenheight()
{
   var  myHeight = 0;
             if (typeof (window.innerWidth) == "number") {
                  myHeight = window.innerHeight;
                } else {
                  if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                      myHeight = document.documentElement.clientHeight;
                      } else {
                          if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                              myHeight = document.body.clientHeight;
                             }
                     }
               }
     return myHeight;  
}

function getscreenwidth()
{
 var myWidth = 0;
             if (typeof (window.innerWidth) == "number") {
                  myWidth = window.innerWidth;
                } else {
                  if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                      myWidth = document.documentElement.clientWidth;
                      } else {
                          if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                              myWidth = document.body.clientWidth;
                             }
                     }
               }

             return myWidth;
}

Use code above to get the height and width of your windows, then use .resize() of jQuery to fire it.(http://api.jquery.com/resize/)

So you can resize your things every time.

yours, Ivan

Upvotes: 0

dave
dave

Reputation: 64657

You could do

$(window).on('resize', function() {
    var logoWidth = $('#logo').css('width'); //Get width of logo
    var newHeight = parseInt(logoWidth) * 0.34666667; //Calculate resultant height of menu-bar
    $("#grey-section").height(newHeight ); //Set new height of menu-bar
});

Edit: you'll have to also leave your current code in, or replace it with

$(function() {
  $(window).trigger('resize');
});

to make it the right height on page load

And you could probably just do css

#logo { width: 100%; height: auto }

assuming that you want to maintain aspect ratio

Upvotes: 1

Related Questions