How to stretch/shrink HTML Page to fit in QWebView window - javascript

I am using QWebView to render a html page using setHTML method. In the html page body section I am mentioning width and height for the html page, if we are changing the width and hegiht of the QWebView window at run time by calling setGeometry(x,y,w,h), then how to make the html page adjust itself to fit the content fully in streched QWebView window?

You need to handle window.onresize() event in javascript. Insert following code in your html...
<script text = "javascript">
window.onresize = function(event) {
var newWidth = window.innerWidth;
var newHeight = window.innerHeight;
// Code to adjust your contents..
}
</script>
Hope this helps.

Related

Dynamically resize a div using jQuery

I have a div (id="mainDiv") which I need to dynamically resize if the user changes the size of their browser window. I have written the following code to try and get this to work however this doesn't seem to be setting the height of my div:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var height = $(window).height();
$("#mainDiv").height(height);
</script>
<body>
<div id="mainDiv"></div>
</body>
I don't know much jQuery, am I making an obvious mistake?
There are a few things going wrong here:
Your code will execute straight away before your document has finished loading.
Your code will execute only on load of the the script, not on resize
You're not setting the height of your mainDiv - you're setting the height of another element with the id: accordianMain (but I'm guessing you know that).
You need to handle the browser resize event to wait for the browser to resize then get the dimensions of the window and apply accordingly. You'd do this by handling the window.resize event liks this:
var $win = $(window);
$win.on('resize',function(){
$("#mainDiv").height($win.height());
});
What you probably want to do is wait for for a resize to finish to by adding a timeout so that it doesn't fire too often as well:
var timer,
$win = $(window);
$win.on('resize',function(){
clearTimeout(timer);
timer = setTimeout(function(){
$("#mainDiv").height($win.height());
}, 500);
});
You need to wrap it in a resize function:
$(window).on('resize',function(){
var height = $(window).height();
$("#mainDiv").height(height);
});
Although I should point out what your doing could easily be attained through CSS:
body,#mainDiv {
height:100%;
}
This is more to point out the "it needs to be in a resize event wrapper" larger point, in case you wanted to do some logic that actually needed the event.
Yes, the mistake is use jquery hehehe
You do this with CSS
<body>
<div id="mainDiv" style="height:100%"></div>
</body>
Use an event listener for the window resize (and you should wait for page load before accessing elements with JQuery):
$(function() {
$(window).on('resize', function() {
var height = $(window).height();
$("#mainDiv").height(height);
});
});
I used div content and div footer in my page, i will set this code in my js to set dynamic height for div content.
footer = $("div[data-role='footer']");
content = $("div[data-role='content']");
viewHeight = $(window).height();
contentHeight = viewHeight - footer.outerHeight();
contentHeight -= (content.outerHeight() - content.height());
content.height(contentHeight);

How to get height of PDF document load in iframe

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

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.

How to alter the original HTML while it's still loading

I need to use some data, calculated by JS (for example: window size) as css property of some HTML element. To avoid flickering of the window because of layout changes, I can't afford to use document.onready. I actually need to trigger JS function at the time the DOM element is added to the DOM tree.
I've tried with DOMNodeInserted event, but it seems that it triggered only for elements that are added post-loading the HTML code, with JavaScript.
What I need is to change tag that is presented in the original HTML source of the page. So for now I just inline JavaScript just after the HTML code of the tag that has to be changed, but is there a way to do this without inlining JS after every such tag. Something like DOMNodeInserted, but triggered while the original HTML is being rendered. Or how else I can accomplish this - having a JS dependent layout that does not move after it's loaded (it's properly generated before showing it to the user) and still have HTML code in the page (e.g. do not generate the page entirely from JavaScript)?
UPDATE
here is the javascript that is used to resize image. It respects both width and height, while widht:100% or height:100% works unless the window width/height is not smaller then image itself.
function resizeImg() {
var imgwidth = bgImg.width();
var imgheight = bgImg.height();
var winwidth = $(window).width();
var winheight = $(window).height();
var imgratio = imgwidth / imgheight;
imgwidth = winwidth;
imgheight = winwidth / imgratio;
if (imgheight < winheight) {
imgheight = winheight;
imgwidth = imgheight * imgratio;
}
$('.cover-image').css({
width: winwidth+'px',
height: winheight+'px'
});
}
You can use a script to compose a stylesheet and add it to a new style element on the head before the body renders.
Or you can use media queries in a style sheet and apply the styles you prefer for different window or device dimensions.

how to resize an iframe to fit the enclosing panel

I am using PrimeFaces 3 for this.
I have an iframe element inside a p:panel which is enhanced with a p:resizable component. What I want is to automatically resize the iframe on load and on resize event so that it fits the available width and height of the panel.
Note that in this example, there is a p element with some text in it before the iframe. So the relative origin of the iframe isn't a constant.
Here is the template code:
<h1>Page To Test Stuff</h1>
<script type="text/javascript">
function doIFrame(event, ui) {
var frame = document.getElementById("tFrame");
// now what?
}
</script>
<p:panel id="showit">
<p>
What I need is for the following iFrame (id="tFrame") to
automatically resize to the max available space inside
the surrounding panel. This needs to happen when the
window is initially drawn, and when the user clicks and
drags the resize icon.
</p>
<iframe id="tFrame"
src="http://www.apple.com"
/>
</p:panel>
<p:resizable for="showit" onStop="doIFrame(event, ui)"/>
My Javascript proficiency sucks but I am willing to learn. So I don't need more than a clue to get started.
You can get the element's client width and height by element.clientWidth and clientHeight. You can set the element's width and height by assigning element.width and element.height.
So, this should basically do it (roughly; I'm taking panel's default ~20px padding into account and I also assume that you removed that introductory <p>, else you have to take its client height into account as well):
var panel = document.getElementById("showit");
var frame = document.getElementById("tFrame");
frame.width = panel.clientWidth - 40;
frame.height = panel.clientHeight - 40;

Categories

Resources