Databases
StackOverflow2013
Postsdbo
POjQuery resize only working partially
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery resize only working partially
    primarykey
    data
    text
    <p>OK, first off, I am NOT really familiar with javascript, so please forgive if this seems a really dumb question...</p> <p>Here's my code to dynamically resize header items depending on <strong>window height</strong> (logo, title) and navigation bar depending on <strong>width of dynamically sized logo &amp; title</strong>:</p> <pre><code>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 &gt; 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 &gt; 480) &amp;&amp; ((winsize.width * 0.9) &lt; (logow + titlew + 420))) { $("nav").css({float: "left"}); } } $(document).ready(function() {titlesize(); $(window).resize(titlesize);$(window).load(titlesize);}); </code></pre> <p>Explained: I have a title logo and text dynamically resized according to <strong>window height</strong> rather than the usual width, so that the overall header does not take too much of the screen (especially on mobile devices in landscape).</p> <p>Navigation bar will then be placed: top right if there is enough space (default), or below header (float:left).</p> <p>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?</p> <p>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?</p> <p>Thanks for any help.</p> <p>PS: tried to make a jsfiddle, but it gives me POST error (no idea why, there is no form submit or anything like that)</p> <p><strong>EDIT &amp; SOLUTION</strong></p> <p>Figured out why it did not work: simply made a mistake in the var declarations</p> <p>I set in the <code>else</code> part of the function vars <em>logow</em> and <em>titlew</em> to fixed values in <strong>quotes</strong>, thus js took them as text rather than numbers. Hence, the calculation for the nav just messed up. Declaring those vars as numbers (<code>var logow = 150;</code>) did the trick.</p> <p>Thanks nevertheless for your help and the great hint at media query with heights!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USblu bla
    1. USblu bla
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COcant you use media queries to do resizing...
      singulars
      1. POjQuery resize only working partially
      1. USDomincJune
    2. CONo, 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
      singulars
      1. POjQuery resize only working partially
      1. USblu bla
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload