Develop Reference

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

Is There Any Way To Get The Actual Size Of Full Window In JavaScript / Jquery?

I'm trying to make a fluid layout for my site but the problem is that if a window is re-sized to be small before the page loads and then they maximize their window, the page is a small size, my question here is how would i get the width and height of a window at its full size even if the page is small.
$(document).ready(function()
{
var Height = $(document).height();
var Width = $(document).width();
});
This gives me the window height and width, i want the maximized size even if the window is small.

Sounds like what you actually need to do is listen to the window's resize event and rearrange content as needed.
Alternatively, do it the modern way and use CSS Media Queries:
#media all and (max-width:480px) {
/* styles for when the window is less than or equal to 480px wide */
}

var Height = $("html").height();
var Width = $("html").width();
You could also try body, and it may even depend on the browser. It is possible for some specially positioned elements to extend past the body, I believe.

Here's an example of how to listen for window resize events:
HTML:
<body>
<p>Resize result window to see updated dimensions</p>
Dimensions: <div id="debug"></div>
</body>
JavaScript:
function updateSize() {
var $win = $(window);
$('#debug').html($win.height() + ' x ' + $win.width());
}
$(window).resize(updateSize); // listen for window resize
$(updateSize); // call on page load to get initial size
Try it on jsFiddle:
http://jsfiddle.net/TKAFc/

If you need the screen size, you should use screen.width and screen.height.
You can subtract the "window borders" so you will have the useful area:
screen.width - (window.outerWidth - window.innerWidth)
And the same for the height.

Resize iframe after adding in on load

I'm having trouble resizing an iframe after injecting it on load using javascript. I use a set width of around 300px which works fine but dynamically size the iframe's height to the size of it's content (a blog post).
I've tried getting contentWindow (had no child dom elements) and contentDocument (which was undefined) to no avail.
I do this on load:
var iframe = document.createElement('iframe');
iframe.setAttribute('id','postFrame');
iframe.setAttribute('frameborder','no');
iframe.setAttribute('scrolling','no');
iframe.setAttribute('onload','resizeFrame();');
iframe.setAttribute('width','300px');
iframe.setAttribute('src','http://espn.go.com/espn/print?id=7454651');
var container = document.getElementById('container');
container.appendChild(iframe);
function resizeFrame(){ /* resize iframe based on content height*/ }
Is there a way to re size iframe height based on content within the iframe?
*EDIT**
Possible workaround:
Is there any hope that i could use Access-Control-Allow-Origin to assist the problem? Lets say the page that goes in the iframe is my own or is echo'd from a php script

I use the following function to resize an iframe to be the height of the content. It's for an intranet app (and only properly tested in IE8) but certainly works so it might provide the missing clue-
function sizeIframeToContent(id) {
// resize iframe to be the height of the content
try {
var frame = document.getElementById(id);
innerDoc = (frame.contentDocument) ?
frame.contentDocument : frame.contentWindow.document;
var objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
//objToResize.width = innerDoc.body.scrollWidth + 10 + 'px';
}
catch (err) {
console.log(err.message);
}
}
Edit an explanation- once the document has loaded you should be able to find the document height which you can then use as the height for the iframe. I commented the width part of the above function as you're specifically asking about the height.

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.