auto re-sizing iframe that dynamically changing height (smaller or bigger) - javascript

I know there's a lot of post about re-sizing iframe but all i found is this code:
<script type="text/javascript" language="JavaScript">
<!--
function autoResize(id) {
var newheight;
var newwidth;
if (document.getElementById) {
newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
}
document.getElementById(id).height = (newheight);
document.getElementById(id).width = (newwidth);
};
//-->
</script>
and this is the sample mark-up code:
Home
Profile
<iframe src="index.php" name="content" height="500px" width="100%" id="Main_Content" onload="autoResize('Main_Content');"></iframe>
those codes above are working, but I have one problem. consider this scenario:
index.php page height is 800px
and
profile.php page height is 1200px
when i click on the link to index.php page, the iframe resizes to 800px, and then I click the link to profile.php page and the iframe resizes to 1200px BUT this is my problem, when I click again the link to index.php which is the height is smaller than the profile.php page, the iframe is not resizing and not adapting the 800px height and it results in excess space below the content of the index.php which is not looking good, I do not have a problem on growing an iframe height but having some trouble on shrinking it,anyone can give me a hand? any help is appreciated. thanks!

Why not just do:
height: auto;
max-height: 1200px;
On the iframe itself within style="" or thru a css doc.
If height is set to auto, then it won't need to use the 1200px for the index.php. But when displaying the profile.php it's allowed to use a maximum of 1200px.

I reproduced the problem.
The problem seems to be the use of scrollHeight and scrollWidth which by intention return the current or needed space of the scrollbar, which is not equal to the size of the document itself.
The problem goes away for me when I change
newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
into
newheight = document.getElementById(id).contentWindow.document.body.style.height;
newwidth = document.getElementById(id).contentWindow.document.body.style.width;
is that doable for you, or is this not under your control?

Related

set div to window size with JavaScript linked to html file

So I have been trying to make an image fit to the window size. Is there any way to resize a div to window width while keeping the right ratios using an event listener? I have looked through the internet but nothing has worked. I think that it will be using stuff like this. when resize expand to window width, hight = 5/3 width. It will most likely use an EventListener. i have tried making width 100% but that just cuts off the bottom of the image not letting me scroll down to see the rest.
Set image width to 100%, don't set a height and the image will maintain aspect ratio.
<body>
<img src="..." style="width: 100%" />
</body>
See example:
http://codepen.io/jessegavin/pen/QNzeaX
CSS is the way you should go. width: 100%;is one thing you can go. But if your viewport is scaleable, you should use width: 100vw;.
Try this code
window.onresize = function(){
div.style.width = window.innerWidth + 'px';
div.style.height = window.innerHeight + 'px';
}

How can one find the "maximized" height of a browser window?

I am trying to make a picture take up 70% of the user's screen. However, if the screen is made smaller when the page is loaded or if the person has inspect element open, the picture becomes small and stretched. I believe the best solution would be to find the maximum height of the browser window and make the image that size. However, I am not sure how to do that?
Here is my current code for image sizing:
var topoffset = window.innerHeight * 0.77;
var profilestart = topoffset - $(".prof-header").height();
$('.splashPic').css("height", topoffset);
$('.splashPlaceholder').css("top", profilestart);
I also want to make it so that if someone is using a huge monitor (i.e. large Mac), the image size maxes out at that point? Any suggestions would be very helpful!
Edit: I don't want to make the image resize dynamically. Only load once.
Use window.screen.availHeight instead of window.innerHeight
or screen.height
var x = screen.height*0.7;
EDIT: Here's more code to show that it works for what you asked. Gets the height upon load and doesn't resize.
<img id="img2" src="http://lorempixel.com/320/240/food" />
<script>
$(document).ready(function () {
var x = screen.height*0.7;
$('#img2').css("height",x);
}
</script>
It sounds like what you want to do is something like this:
img{
display:block;
width:70%;
min-width:320px;
max-width:1200px;
}
If you want the image to take up 70% of the viewport height (and obviously retain its ratio) you could use the new css unit vh (viewport height) like this:
img
{
height: 70vh;
}
FIDDLE

How to make the content of a page readjust to iframe size

this is my first question here so please, bear with me.
I have a page with a small gallery, ming I have a few thumbnails that are links so that certain images load onto an iframe. Below that I have text.
Right now, my iframe adjusts to the size of its content which is exactly what I want, also, my images are not all the same size, so when they load to the iframe, they push the text down.
So far so good.
The problem is that if I load an image with a height of 600px, and then load one with a height of 200px, the text below stays where the 600px image pushed it.
What I want is for the text to readjust to the height of the currently loaded image on de iframe.
Help?
I wrote this for you withjQuery1.10.2, this will be set the text's width dynamically depend on your iframes width.
first, add jQuery to your page;
<script type="text/javascript" src="../jQuery/jquery-1.10.2.min.js"></script>
and then give your iframe's width and set this width for your textwrapper:
<script type="text/javascript" language="javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
$(document).ready(function(e) {
$('#columnthumb img').click(function(){
var width = $('iframe').width();//if you want to write it for your img, write img instead of iframe
//alert(width + '<-----Width');//this is for test and figure out your iframe's width
$('p.textocorpo').css({'width':width, 'text-align':'justify'});
});
});
</script>
You need to do it like this
Conceptual:
onclick get image height then set image height to iframe height.
Code:
<script type="text/javascript" language="javascript">
$(document).ready(function(e) {
$('#ImagesColumn img').click(function(){
var imgHeight = $(this).height();
var imgWidth = $(this).width();
$('#iframeId').css({height: imgHeight, width: imgWidth})
$('p.textocorpo').css({'width':imgWidth, 'text-align':'justify'});
});
});
</script>

Window height too long after ajax loaded content is resized in browser

We have created a responsive one page website that loads in chunks of content via ajax. When the main index page is resized to a smaller width (mobile size) and then adjusted back, the window does not adjust the height back to the original height of the conent and leaves a huge chunck of whitespace underneath and scrollbars that are too long.
Have tried adjusting the window size
<script>
$(window).resize(function() {
var bodyHeight = $(body).css(height, '100%');
$(window).height(bodyHeight);
});
</script>
and
window.resizeTo(width,height)
nothing seems to work, suggestions appreciated

Dynamically resize div based on window size

I'm trying to optimise my website for different resolutions. In the center of the website I have a DIV that currently has a fixed size. I'm trying to make its size (and contents) change according to the size of the browser window. How do I do that?
This is my website if you want to take a look at its code:
http://www.briefeditions.com
If you resize the page the div will resize with it and on load of the page.
$(window).on('load resize', function(){
$('#div').width($(this).width());
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(document).ready(function(){
var windowHeight = $(window).height();
$('#divID').css('min-height',windowHeight+'px');
});
UPDATE
If you want that site will resize based on browser resize then use % instead of px
CSS:
html {height:100%; overflow:hidden}
body {height: 100%;}
I guess you need screen width and height for client(users) machine.
at onload of page get screen width & height and set those values to divs using jquery/javascript
var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;
check this for more info
Keep in mind that in your example iframe also has fixed size. You should also resize it to the parents width. In your example this would work:
$(window).on('load resize', function(){
$('#content, #content > iframe').width($(this).width());
});
Keep in mind that you must remove all margins, as well as absolute positioning like: top, left, position:absolute from you element styles.
I checked the code from the provided link in question.
Change width to 80% in #content style.
And in .wrapper change width to 100%.
You have used mainly 920px for width, so whenever you will resize window the control will not re-size. Use equivalent % instead of 920px;
You can do like this
var width = $(window).width();
$("#divId").width(width);

Categories