css - Dynamic height in JQuery -


i'm having bit of trouble block of jquery code sets height of menu bar based on width of logo contained therein. problem site responsive design, logo's width varies depending on how wide window is...and reason, code works when first load page, doesn't continue resize menu bar logo gets resized page window. appreciated; here's 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 }); 

you 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 leave current code in, or replace with

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

to make right height on page load

and css

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

assuming want maintain aspect ratio


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -