Is it possible to use an iframe with a fixed width (.ex. 75%) and a dynamic height? Want I want to achieve is that when the page that is loaded into the iframe, it will not be wider than I have specified, but the lenght needs to be according to the page its content. Is it a page with 5 lines text, the frame will be just big enough to display these 5 lines. Are we loading a large document with 1000 lines, the Iframe height will be automatically adjusted.
Prerequisites:
The url in the frame is on a different domain from the parent.
The code should work on mobile phone browsers too.
Let's try to avoid jQuery if possible. (to make the above faster)
I know you'd like to avoid it, but it really shouldn't slow you down so much that it'd be a burden on your site. I've done far crazier things with jquery and it's handled it like a champ. When talking "dynamic" it's usually a safe bet that you will need to touch some javascript at some point :P
$(selector)[0].scrollHeight
As for making it dynamic? You could setup an interval to adjust the height.
Something like this:
function setHeight(selector){
var contentHeight = $(selector)[0].scrollHeight;
$('#iframe-id').attr('height', contentHeight);
}
Then you either load it on page load or you wrap it in a setInterval.
If it's just the jquery thing and you don't mind javascript, then this site could help you
http://www.mattcutts.com/blog/iframe-height-scrollbar-example/
IFrame height can be manipulated using the page rendering code, or JavaScript...but there is no way for the iframe to dynamically resize based on content.
The link in mplungjan's comment takes you to a really good post about this subject.
Related
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
My website has a bunch of iframes that need sizing. I have been using:
x=window.innerWidth;
y=window.innerHeight;
Thus I know how many pixels I have to work with and things work great. However, now I'm creating a page that scrolls. I need to know the height of the page in pixels (as in how tall the window would need to be so that the content wouldn't scroll). What would be the simplest way to write this using javascript?
document.body.scrollHeight should work...
Can I use some sort of JS script to take advantage of the size control here in the url
<iframe id="myIframe" src="https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&width=1280&height=1280&secure=true&key=0202f0ddb5a3458aabf520e5ab790ab9&"
to dynamically force the size of the iframe content to match the user's browser window?
This will combine the solution to my original question with a secondary solution to provide the perfect fix for my problem here.
(My goal here is actually to place this Twitch feed as a background to my webpage - resizing the actual content of the iframe is actually a very unusual but additional treat here, because of the way Twitch's url works!)
To be clear, I'm very early in my learning of JS, and looking for a beginner solution to take the browser window size to dynamically control the parameters in this url to control the size of the content in this iframe.
width=1280&height=1280&
are the key lines here. I need to make these measurements follow the viewport size instead of being static. What method is best to do this?
I don't know if I get your question right but changing the width and height parameters of your iframe can be done by this (used jquery for getting height and width of window cross browser)
$(document).ready(function() {
var iframe = $("#myIframe");
iframe.attr("width",$(window).width());
iframe.attr("height",$(window).height());
});
Case:
I was searching the web for re-sizing the iframe based on its content (iframe and the page hosting are from the same domain). What I found as the possible working solution is to call a function of parent window from iframe sending the size to set height for the iframe. That is simple to implement.
Problem:
The problem now is that the page loading inside iframe is AJAX intensive and is dependent on user's interaction on the page. The height can increase or decrease relative to user's actions (note that height only changes on user interaction and not randomly or automatically). Now I want to trigger a function when the height of "body" (of page inside iframe) changes the height. This would help me to re-size the iframe every time the height changes inside it.
Possible Solutions:
I tried using
jQuery(document).ready(function(){
document.body.watch("clientHeight", function(property, oldHeight, newHeight) {
alert('New Height: ' + newHeight);
});
});
but the function never triggers. Even I get it to work, from what I found on internet, it does not work on IE. I want a solution that at-least works for IE8.
Another possible solution was to watch the user's interaction on the events that could cause the change of height. But that would be really inefficient as there are a-lot of such events that could cause height changes.
So what is the best way to go around it?
Regards
Jehanzeb
There is a link at the bottom. Pretty much what happens, is when the page gets opened, it loads entirely on the right side of the screen. Then when it finishes loading every single element, it moves to the center which is it's actual position.
I believe the problem is caused by javascript, since the site works perfectly fine without it. It doesn't seem to matter what javascript is included, if I leave just 1 of them, the whole thing comes back.
Could really use the help. Also the site right now is about 500 pages big, so I'm really hoping for a solution which can fix this with just a few steps.
Thanks.
Here is the link to the page so you can get css/code: http://bit.ly/3EyoWu
Its definitely javascript. I think the banners on your site are loaded at the very end, which leaves the browser making incorrect guesses about the dimensions of the content until the page is loaded.
Try enclosing your javascript code inside fixed width (and height) divs or tables. You can easily determine the width (and height) required by javascript generated code by inspecting your page after its loaded. If its the banners, they are almost always predefined size.
Edit 1 ----
I got it. The specified cell widths for your table are narrower, the browser therefore is unable to calculate the page layout until the page is rendered completely. A column with width 110px has a banner having width = 120px.
Edit 2 ----
Try specifying widths for all-but-one column. That is, if you have three columns in the suspect table, specify the width for two, and let the browser decide the width for the third. Furthermore, the banners seem to occupy a width of 125px instead of 120px, probably because of unnecessary white space around them. I suggest that you revise the column widths appropriately (and parent table's width if necessary).
This might almost qualify as a 'flash of unstyled content' (FOUC) except that the browser doesn't first render a page in an unstyled format.
Instead, you see styled content before the Javascript is able to add the finishing touches.
You might get some further hints by searching for 'flash of unstyled content'.