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.

Iframe not resizing IE10

I found this bit of popular javascript doesn't work in IE10. I didn't create it but am maintaining a site that implements this. Was wondering if anyone else came across it. It seems the Document.getElemsntById('frame').onload event isn't working but the window.resize event does. Meaning on initial frame load it doesn't re-size but when I do anything to the window it does. Its just a pdf opening in an Iframe. Seems fine in all browsers except IE10 , on both Win 7 and 8 machines.
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
height -= 250;
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>

Sorry if I was too vague in the question. I did Google this and found similar situations but not exactly like mine. I alerted out the height var and checked with a conditional and like I mentioned the browser would only run the function on resize, all other browsers were fine. I don't know why but I decided to add empty parenthesis to the call in on the onload event and it worked.
document.getElementById('frame').onload = resizeIframe();

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.

Javascript resizing of Firefox pop-up window?

I'm just learning Javascript and jQuery, but I'm an HTML'r trying to take the next step..
I'm attempting to drop content into a table, which can be any size at all (It's for a news site). I check for size and then resize the popup accordingly; while the window isn't exactly right it works, but in Firefox it's not even resizing.
Using a generic link to pop-open a basic window:
<a onclick="window.open('http://site.local/popup/','popup','width=1,height=1')">popup</a>
I'm pointing it to a default page where the cms is placing all content into a table (id="top"). It has a default width="1" to force a constraint, and then letting the content expand the table to set the real size. I then check the table size to see and resize the window on document.ready():
<script type="text/javascript">
<!--
$(document).ready(function() {
var divh = document.getElementById('top').offsetHeight;
var divw = document.getElementById('top').offsetWidth;
//Test size
//alert("Table: width= " + divw + "px / height= " + divh +"px");
//Resize
window.resizeTo(divw,divh);
}
-->
</script>
I need to be able to resize a window already opened in Firefox.
All the window sizes (except Firefox) are off but I can pad them - a little larger is better than cut-off. Firefox, unfortunately, generates a tiny 180w x 249h window and never resizes.
I've searched here unsuccessfully - most suggest editing a setting in firefox, which I clearly can't expect users to do.
Any ideas?

I would highly recommend replacing your popup with a div popup. You're going to run into issues like you have with Firefox, and browsers blocking it altogether. Assuming you have jqueryui included and you're loading this content from the same domain:
$('#container').load('/popup',function() {
var table = $('#container #top');
$('#container').dialog({height:table.height(), width: table.width()});
});

Firefox comes with a preference for user to allow/disallow resizing of window using Javascript. It's in Tools - Options - Content - Enable Javascript -> [Advanced].
I am not sure if resizing is disabled by default, but you might want to check your own Firefox installation first.
If it's disabled by default, then unfortunately there is nothing you could do to resize the window after it has been opened. An ugly workaround would be to open itself once again using window.open() with the preferred size though.

Try something like this;
<a class='poptrigger'>pop</a>
$(function(){
var w = $("#top").outerWidth();
var h = $("#top").outerHeight();
$('.poptrigger').click(function{
window.open('http://site.local/popup/','popup','width='+w+',height='+h)
})
});
That way you shouldn't need to resize the window, but just set the size initially.

Why not getting the content with ajax request and display it in a div above the current content?