How to get height of PDF document load in iframe - javascript

Is there any way to get actual Height of PDF content loaded in iframe?
I am facing an issue to scroll PDF content in iPAD device? I can get the height of body content make scroll successfully, but only for HTML pages.
this.contentWindow.document.body.scrollHeight
but for PDF its not returning exact height of the PDF document? Is there any way to get for that?
Thanks
Peter

I Tested this on my iPad and it works, maybe it could be good for you too.
There is an HTML5 js project by mozilla that renders pdf file and displays them and you can get the viewport of a page in the pdf file.
https://mozillalabs.com/en-US/pdfjs/
https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/hello.js
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
UPDATE 2020: The API of pdf.js changed slightly:
PDFJS.getDocument('helloworld.pdf').promise.then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var viewport = page.getViewport({scale: 1.5});
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});

The answer is no (unfortunately).
Because at the element level, PDF object/embeds don't auto grow to take up more height if the document shown needs it, so their true height is never exposed to the DOM.
Even if you call a PDF directly by specifying it as the source of an iframe you'll see that the iframe has a DOM layout like any other page, with an object or embed of the pdf in the body anyway.
Inside this PDF 'element' is all the respective PDF plugin's territory, and cannot be accessed by javascript. There may be some flash, java or browser plugin that will allow you to interact with it but I haven't heard of it.

Peter, there is no way you can get height of PDF in iFrame on iOS safari as there is no adobe reader safari plugin available for apple mobile devices.
You can use HTML 5-Canvas to render PDF and open source client side libraries like pdfjs...etc...
Without that the only way you can get height[or width] is from server, use iTextSharp.dll kind of component and get the height/width of pdf page, which later you can multiply by number of pages, these all you can do easily on server side. Use the retrieved height/width to style your iFrame and then provide that PDF at source attribute of iFrame. iFrame will stretch and you will get scrolling effect.
OR
If you have any tool or component which can convert PDF to image then you just throw images from server on HTML, with javascript you can have control on getting attributes.
We have MS-SSRS for our reporting need, for small part of application which is accessible on iPad we get images from MS-SSRS instead of PDF. The reason we adopted this option is because if number of pages increases then the client side framework like PDF-JS will die to render on canvas.
You have various options with you to handle PDF on iPad.

Does the view=fit pdf viewer option work for what you are trying to accomplish (Set auto height for iframe):
<iframe src="Path/MyPDF.pdf#view=fit"></iframe>
Also this solution setting the height to auto before trying to get the height (https://stackoverflow.com/a/11864824/1803682):
objIframe = document.getElementById('theIframeId');
objIframe.style.height = 'auto';
document.body.scrollHeight
Finally - blog post here: http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/ and iScroll4 may be worth looking at.

This can be solved by using the JQuery.
Lets us assume that you have the iframe as follows with an id
<iframe src="name.pdf" id="pdf_frame"></iframe>
now by using the JQuery we can make the height of the iframe as auto as you need to display the pdf inside the iframe.
$('#pdf_frame').css('height','auto');
You can get the height as
document.body.scrollHeight

Related

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.

JavaScript: getting the size of an image using getComputedStyle()

I am currently experiencing a 'strange problem'... I am a beginner in JavaScript and I want to get the height of an image in order to set the size of a .
I get the width of the screen
I set the width of an image which depend on the screen size
=> I guess the computer set also the height of the image.
I ask for the height of the image
I print it
This is the code:
var screenWidth = (window.innerWidth);
myImg.width = Math.floor(screenWidth/3); // That works, my image is sized well.
var imgLarg = getComputedStyle(myImg,null).height.toLowerCase()
console.log(imgLarg);
The problem is at follow: When I refresh the page by reloading the page via the web address, it works. But, when I press the refresh button, the code return '0px'.
wrap your code in document.ready (if you use jquery) or listen for DOMContentLoaded. Wait for the image to load completely before getting its dimensions. Use .load if you use jquery or Image.onload().
http://api.jquery.com/ready/
http://api.jquery.com/load/
http://developer.mozilla.org/En/XUL/Attribute/Onload

liferay portal canvas resize

I am using three.js to embed webgl into a liferay portlet. I would like to be able to have the renderer resize the image (canvas element) when I make changes to the page layout that effect the portlet size. So basically whenever the portlet resizes I want to be able to resize the canvas through the three.js calls. Three.js has a renderer object through which I can set size. The problem is getting the width of the portlet. Is there a way to capture a redraw event and grab the portlet width to be used to resize a canvas element?
Thanks
You can listen to both, the portletMoved and updatedLayout events on Liferay.
Liferay.on('portletMoved', function(event) {
var portlet = event.portlet;
var newWidth = portlet.width(),
newHeight = portlet.height();
[...]
});
Liferay.on('updatedLayout', function(event) {
// Assuming you have Alloy on your script, you can use A.one to get the
// portlet node. Otherwise, you could use document.getElementById
var portlet = A.one('#' + portletId);
var newWidth = portlet.width(),
newHeight = portlet.height();
[...]
});

How can I size a .swf to full screen with .js

My application is built in Flash Builder. I want to embed a small Flash login form inside an HTML page. The login form is in the 'login' state of code and is a few hundred pizxels wide/ tall. The 'default' state is set to height and width of 100%. I have a resize function that is executed once the login receives the appropriate credentials.
private function resizeApplication():void {
if(ExternalInterface.available) {
ExternalInterface.call("resizeApplication");
}
The javascript that does the resizing is this:
function resizeApplication() {
var app = document.getElementById('app');
app.style.height = '100%';
app.style.width = '100%';
app.style.left = '0';
app.style.top = '0';}
#app is the div and overflow is set to auto in the body. This works just fine except that I am left with some visable portion of the webpage near the bottom. I want to be able to either resize the webpage to match the swf or hide everything except the swf. I have tried a few different things with the js including setting the bottom attribute to 0 and using variations of the document.body.clientHeight.
You can't make it "Full Screen" but you can make it fill the browser.
First the app element should have the position style pre-set to either fixed or absolute(depending on your page) since setting it from the script will reload the flash object.
And then use this one if the position is fixed:
app.style.top = '0';
app.style.left = '0px';
app.style.top = '0px';
app.style.right = '0px';
app.style.bottom = '0px';
And this for absolute find out the position of the viewport and it's size and just move and resize your app element.
http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
Either way wouldn't it be a lot easier for you if you just made the flash fullscreen from ActipnScript?
fscommand("fullscreen", "true"); // ActionScript 2
stage.displayState = StageDisplayState.FULL_SCREEN; // ActionScript 3
You have to set the height of the div manually to consistently get the effect you are looking for. This is the same trick used to make a background image always fill the screen.
Something like this:
function resizeMain(){
$("#wrapper").height(window.innerHeight);
$("#background").height(window.innerHeight);
$("#background").width(window.innerWidth);
}
window.onresize = resizeMain;
$(document).ready(function(){resizeMain();});
Why not simply enter real full screen mode using
StageDisplayState.FULL_SCREEN

How to display resized images on a web page while maintaining aspect ratio?

What is the best and quickest way to resize images on the client side using JavaScript?
EDIT: Sorry, I meant the best way to display an image resized on the client side..
Easy.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Client-Side Image Resize (Why?!)</title>
<script type="text/javascript">
window.onload = function() {
var url = "http://www.google.com/intl/en_ALL/images/logo.gif";
var img = new Image();
img.onload = function() {
var w = parseInt((this.width + "").replace(/px/i, ""), 10);
var h = parseInt((this.height + "").replace(/px/i, ""), 10);
// 50% scale
w = (w / 2) + "px";
h = (h / 2) + "px";
var htmlImg = document.createElement("img");
htmlImg.setAttribute("src", url);
htmlImg.setAttribute("width", w);
htmlImg.style.width = w;
htmlImg.setAttribute("height", h);
htmlImg.style.height = h;
document.body.appendChild(htmlImg);
}
img.src = url;
}
</script>
</head>
<body>
<h1>Look, I'm Resized!</h1>
</body>
</html>
If you are not too put off by flash, with flash10 now you have the choice of processing uploaded files on the client side before sending them to the server. So you could use a hidden/transparent/small flash object to allow the client to upload their image, have flash resize the image(it has some good image manipulation apis), then send the byte data to the server.
the as3 core lib has a jpeg and png encoders if you want to encode the image to either format before uploading.
If you don't have flash you can always download the flex 3(or 4) sdk and use flashdevelop to do it all gratis =)
Resizing before uploading would be a very powerful tool. This would reduce the time it takes to upload images to a server. Often our users have 5 mega-pixel images fresh off of their cameras and they have no clue how to reduce the size using an image editor. What we want uploaded is a 1500 pixel wide photo, jpg or png compressed to less than 500Kbytes.
This outfit Thin File claims to be able to do it but I haven't checked it out yet. I was rather hoping to find a way to use JQuery to do the same thing.
flash 10 has support for resizing images on client side:
http://www.swfupload.org/
http://www.shift8creative.com/projects/agile-uploader/index.html
Resize before upload. Flexible, tight JavaScript integration, let's you use any back-end language, fast, good quality image.
A nicer demo than the main page that shows off the JavaScript integration:
http://www.shift8creative.com/projects/agile-uploader/advanced-demo.html
Free as in beer. Hope it helps.
I'm not sure if you mean actually resize the image or just set the size that the image is displayed at. One is impossible, the other would be to set the width and height properties using jQuery.
http://docs.jquery.com/CSS/height
http://docs.jquery.com/CSS/width
If you're wanting to do it in a statement then the height and width properties would most likely be best.
If you're wanting something animated, you can use the .animate(...) command and set the height and width as parameters. That should make the image change a smooth transition.
Images should always be served at the size they are to be displayed. It is better to have multiple copies on the server instead of copying one file over the network and trying to manipulate on client side. Consider this:
waste of network resource to transfer 500X400 image when you actually need 100X80
similar waste of CPU in some imaging API to shrink/ enlarge the image on client side
Resizing an image is not plain change of height/ width. When you specify a size different than (either through styles, script etc) the original image size, the browser will use native API (win32 draw for example) to properly shrink/enlarge the image. Cropping the image (losing portions of image) is easier but seldom wanted.

Categories

Resources