jQuery resize only working partially

Question

OK, first off, I am NOT really familiar with javascript, so please forgive if this seems a really dumb question...

Here's my code to dynamically resize header items depending on window height (logo, title) and navigation bar depending on width of dynamically sized logo & title:

function titlesize (){
  var winsize = {
    width: document.documentElement.clientWidth || window.innerWidth || document.body.offsetWidth,
    height: document.documentElement.clientHeight || window.innerHeight || document.body.offsetHeight
  };

  var titlefont = $(".title");
  var logo= $(".logo");
  var logow = winsize.height * 0.2;
  var logoh = winsize.height * 0.15;
  var titlefontsize = winsize.height * 0.03;
  var titlew = titlefontsize * 7;

  if (winsize.height > 580) {
    logo.css({width: logow, height: logoh});
    titlefont.css('font-size', function(){return (titlefontsize);});
    titlefont.css('width', function(){return (titlew);});
  }
  else {
    var logow = "150";
    var logoh = "100";
    var titlew = "122.5";
    logo.css({width: logow, height: logoh});
    titlefont.css({'font-size': "17.5px", width: titlew});
  }

  if ((winsize.width > 480) && ((winsize.width * 0.9) < (logow + titlew + 420))) {
    $("nav").css({float: "left"});
  }
}
$(document).ready(function() {titlesize(); $(window).resize(titlesize);$(window).load(titlesize);});

Explained: I have a title logo and text dynamically resized according to window height rather than the usual width, so that the overall header does not take too much of the screen (especially on mobile devices in landscape).

Navigation bar will then be placed: top right if there is enough space (default), or below header (float:left).

The problem is: Window resizing does resize logo and text just fine, but not the nav bar. That does only react on reload, not on resize. Is there any reason why?

I suspect it is because of the dependency of those dynamic variables deriving from the first if else statement. I'm pretty sure there is a simple solution, but what?

Thanks for any help.

PS: tried to make a jsfiddle, but it gives me POST error (no idea why, there is no form submit or anything like that)

EDIT & SOLUTION

Figured out why it did not work: simply made a mistake in the var declarations

I set in the else part of the function vars logow and titlew to fixed values in quotes, thus js took them as text rather than numbers. Hence, the calculation for the nav just messed up. Declaring those vars as numbers (var logow = 150;) did the trick.

Thanks nevertheless for your help and the great hint at media query with heights!

No, because media queries depend on window WIDTH while my function/elements resize depending on window HEIGHT. I do, however, use media query in the winsize.width > 480 in the nav part for small screens — blu bla, Oct 10 '12 at 19:30

score 1 · Accepted Answer · answered Oct 10 '12 at 19:35

1

DominicaJune is right. You can use media queries for height:

http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/

answered Oct 10 '12 at 19:35

castillo.io

942
7
9

Thank you for pointing me in a very interesting direction! I can only repeat what Ch. Meeks replied to the mentioned post: "I have to humbly admit that I wasn’t even aware that you could use media-queries for screen heights. With so much focus on screen widths, that idea completely passed me by." That said, it still does not really help me, because with media-query I can only set certain fixed thresholds, whereas I want to resize my elements to any given screen height and width. Thus: I will go give Jish's solution a go and see if that does the trick for me. +1 from me nevertheless! – blu bla Oct 11 '12 at 09:09

score 0 · Answer 2 · answered Oct 10 '12 at 19:42

0

You're throwing your resize in document ready. If you have:

$(document).ready(function(){
//some code
});

$(window).resize(function(){
//your resize code
});

It should work all the time. Although media queries look a lot simpler.

answered Oct 10 '12 at 19:42

Jish

207
1
8

On closer look, that was what I already had in my last line: `$(document).ready(function() {titlesize(); $(window).resize(titlesize);$(window).load(titlesize);});` – blu bla Oct 11 '12 at 10:36
No, your function `$(document).ready(function() {` opens, then closes after `$(window).load(titlesize);` Put `$(window).resize` outside of $(document).ready – Jish Oct 11 '12 at 20:42
thanks for the clarification! As mentioned at the very top: I'm a js novice. Changed it, and with my corrected calculation it works now like a charm. Cheers. – blu bla Oct 12 '12 at 09:59

jQuery resize only working partially

2 Answers2