Develop Reference

Getting the correct client height of an external SVG when it loads in Chrome

I'm wanting to tie the height of a button to the height of an external SVG after it's been resized by a browser.
Jsfiddle is here.
Here's the script:
function svgLoad() {
"use strict";
this.wrapper = document.getElementById('wrapper');
this.navID = document.querySelector('#slideMenu');
this.menuButton = document.querySelector('#menuButton');
this.logo = document.getElementById('logo');
this.logoWrap = document.getElementById('logoWrap');
this.navBar = document.getElementById('navBarWrap');
console.log(this.logo);
console.log(this.logo.clientHeight);
console.log(this.navBar.clientHeight);
this.loaded = function() {
this.logoHeight = Math.round(this.logo.clientHeight);
this.rect = this.logo.getBoundingClientRect();
console.log(this.rect.height);
console.log(this.logoHeight);
console.log(this.navBar.clientHeight);
// Sets height of menu button to match height of logo.
this.menuButton.style.height = this.logoHeight + 'px';
console.log(this.menuButton.style.height);
this.wrapper.style.marginTop = this.navBar.clientHeight + 'px';
}.bind(this);
this.logo.onload = this.loaded;
}
new svgLoad();
If I use window.onload everything displays fine, but I'd prefer the script to run once the SVG is ready. If I try running when the SVG object is loaded, I get different results across browsers.
Everything works fine in FF and Edge/IE using onload/addEventListener on the SVG.
In Chrome it it won't work at all, it consistently reports the SVG's size as 160px. It's showing the SVG as an anonymous function in the console, and within that the client height is calculated correctly; It just won't apply it to the script (possibly worth noting it reports the same height in the fiddle even though it doesn't load the SVG at all in Chrome).
Edit - having looked into this a bit more, Chrome seems to be changing the SVG's offsetTop property to make up the difference between the height it should dsisplay at and 160px.

I've playing with this and found an answer.
FF and IE/Edge will resize the SVG properly without either width or height specified on the object. Chrome requires that a height is specified before it sends the correct client height to the script.
For my purposes using rem/em was the best solution.

PDF responsive zoom on browser resize

I'm trying to make a PDF's zoom always full width within an iframe, and on browser resize it re-calculates the PDF's zoom and sets it to 100% browser width.
The pdf parameter #view=Fit or #zoom=100 works on document ready, but I can't manage get it to refresh/recalculate this value when the browser is resized (preferably without losing the scroll position).
<iframe id="readFrame" src="https://xxxxxx.pdf#view=Fit"></iframe>
note: I'm resizing the iframe like this:
$(document).ready(function() {
$(window).trigger('resize');
});
$(window).resize(function() {
var browser_viewportH = $(window).height();
var browser_viewportW = $(window).width();
var nav_height = $("#nav-bar").height() + $("#tempWrapper").height();
var block_height = $("#blockContainer").height();
var viewportH = browser_viewportH - (nav_height + block_height);
$("#readFrame").css("height", viewportH);
});

Well I think you have a Typo on here:
$("#read iframe").css("height", viewportH);
Should be
$("#readFrame").css("height", viewportH);
As your iframe has the ID "readFrame", hasn't it`?

<iframe id="readFrame" src="YOUR_PDF_PATH.pdf#view=Fit" style="width:100%;"></iframe>
<script type="text/javascript">
$('#readFrame').css('height',$(window).height());
</script>
you can use this, and this works on resize as well, and this doesn't lose your scroll height too when resized..

I ended up using pdf.js if anyone else comes across this problem.
The problem with using the pdf parameters is they don't work in Chrome and Firefox as these browsers have their own pdf viewers.
On the other hand, pdf.js is only fully supported in Chrome and Firefox and others have limited support but are functional other than <=IE8.

Truly cross-browser way to get document height?

I have a control contained in an iframe on a page of my ASP.NET web application.
Control changes its vertical size correspondingly to what user selects on it (some elements get in, others get out). So, I have to set the iframe size precisely to get the whole control shown and not to make gap between the iframe and the elements below it.
Somewhere on the web I have found a way to get the document height in a cross-browser way:
function getDocHeight(document) {
return Math.max(
Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
Math.max(document.body.clientHeight, document.documentElement.clientHeight)
);
}
On self.document.body.onload on the control page, hence, I call this function:
function adjustIframeHeight() {
var iframe = window.parent.document.getElementById(window.frameElement.id);
var iframeHeight = getDocHeight(iframe.contentWindow.document);
iframe.style.height = iframeHeight + "px";
}
The problem is it works fine e.g. in Firefox, but in some cases bottom sections of the control are cutoff in Chrome and IE for example.
Is there some truly cross-browser way to get this height, or I am doing something else wrong?
Thank you for the time

I'd use something like jQuery to help out with this (since using height methods seem to vary from browser to browser) and here is some jQuery code that could help out:
$(document).height(); // height of HTML doc

IE and JavaScript: window reload on resize

Reasoning for Script:
Reloads various CSS scripts based on browser detected width and height. Window reload in needed to reload the other JavaScript as browser is resizing.
Problems Occurred:
IE likes to loop continuously.
Compatibility with other scripts:
Chrome, FireFox, Safari work
Script used:
<body onResize="window.location.href = window.location.href;">
Someone please come up with a better solution or suggestion!! This has to work for Safari, IE, and FireFox.
Possibly else if logic based on what type of browser?
SOLUTIONS BELOW (JQUERY): window.resize event firing in Internet Explorer
$(document).ready(function(){
var winWidth = $(window).width(),
winHeight = $(window).height();
$(window).resize(function(){
onResize = function() {
//The method which sets the LEFT css property which triggers
//window.resize again and it was a infinite loop
setWrapperPosition($mainWrapper.parent());
}
//New height and width
var winNewWidth = $(window).width(),
winNewHeight = $(window).height();
// compare the new height and width with old one
if(winWidth!=winNewWidth || winHeight!=winNewHeight)
{
window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(onResize, 10);
}
//Update the width and height
winWidth = winNewWidth;
winHeight = winNewHeight;
});
});

I'd use:
window.location.reload()
to reload the page.
Also, I'm not sure if onresize is a widely-supported event.
Instead, I'd do it with a timer (source here http://jsfiddle.net/ACpTm/4/)
But I REALLY would not advise anyone to reload the page due to styling. It's a bad practice and the user dislikes it, especially if they have limited bandwidth.
Could you describe why you need to do this? We could provide a more versatile solution instead of this.

You would be way better off if you didn't base your CSS on the browser size.
You could use Javascript/jQuery to resize things in the window onResize event, I had to do this once in the past and it worked ok.

JS/Jquery syntax for IE Window width and height

I'm measuring the window and document width and height via the following properties :
//measure the window and document height and width dynamically
var w = $(window).width();
var h = $(window).height();
var wd = $(document).width();
var hd = $(document).height();
Works fine in firefox but IE kicks up a fuss. Is there an alternative to this syntax that works in IE?
JS error recieved - could not get the position property. Invalid Argument

Works for me in both FF and IE, check for yourself here.

i just figured out, whats the "bug" in the code.
Firefox is able to get width and height, whereever you put your javascript.
But IE is only able to get this values when the script is within the body element.
I've had the same problem here and was trying about an hour.
I noticed, that the jsbin script is inside the pagebody and moved my javascript into the body and wow - it works in IE :-)
Best regards

I had the same problem and i solve it.
The question was related with IE being in Quircks mode, because i had in the begining of the HTML some non valid tags (i copy the source from a .aspx page, and i left there the <%page ..%> directive.
When IE finds some strange tag it enters quircks mode, and some things work diferent.
When i deleted the strange tag, the $(window).width(); stuff begins to work.
Hope this helps someone in the future with my same problem. :)