I have a div with height: 485px and I want to put an iframe inside with a width of 100% so the user can scroll the div and not the scrollbar (Im doing this because I'm using a CSS scrollbar).
<div id="demo1" style="height:485px; overflow:scroll;float: left;overflow-x: hidden;">
<iframe height="100%" width="455px" scrolling="no" frameborder="0" src="www" ></iframe>
</div>
I tried to include style to the iframe like style="height: auto;" or 100% but doesn't work.
Any suggestion how to check the height of the iframe?
Thanks
To get the height on an iframe, you'll need to communicate between two window. If you only support IE8+, then that's rather simple with postmessage. You basically use a script inside the iframe (1- the iframe content is owned by you and you add the script, or the owner of the iframe trust you and add your code snippet).
If you want to support older browser, then you'll have a lot of fun breaking the cross domain barrier.
But, that's really the only way you can get the inner height of an iframe.
I'm not sure I've quite understand your use case here, but what it seemed like to me, is that you're loading a complete website in an iframe in order to use some special scrolling effect? If that's really the case, seriously look at other solution, messing around with cross domain communication to get a simple visual effect isn't the best use of time (plus the performance hit of nesting a complete website iframe).
Hope this help!
Related
My app needs to use iframes to work with third party websites.
One of these websites, has a function that automatically sets its "overflow" to "hidden" when it detects itself being used as an iframe.
Is there a fix to this? I know in general if the iframe is not of same origin I shouldn't be able to change their css.
I would also like to know if there is a good reason to set "overflow: hidden" just because it is used as an iframe...
The app runs only on Samsung devices, using Chrome.
Any help is appreciated. Thanks!
Their is nothing legitimate that you can do to fix this. The content of an iframe is sandboxed from the parent page by the security system in the browser.
As for why they do this, I expect they have another usecase where they find it useful, but it would be better to just turn scrolling off in the iframe element, than use overflow like this.
I have been trying to find a solution for creating a responsive iFrame. I have found quite some solutions, but they usually describe a situation where the person wanting to embed an iFrame has control over the parent page.
If I offer embed code that allows people to embed a certain webpage into their own page by means of an iFrame, how should I do that and make sure it is responsive, without any knowledge of the parent page it will be embedded in? In other words, can I manage to implement this from the code in the iFrame itself?
Thank you!
I guess you can technically make the iframe responsive.. but I just don't see the point if the website you're pointing to isn't responsive. Here's an example: http://jsfiddle.net/uMbWP/1/
Resize the bottom right frame width to see.
I set the min-width to 320px, because that's as small as mobile devices usually go.
HTML:
<div class="wrap">
<iframe src="http://www.reddit.com"></iframe>
</div>
CSS:
.wrap {
min-height:640px;
min-width:320px;
}
iframe {
width:100%;
height:640px
}
Yes I know no one likes iframes, but here's the scenario.
I have a client who has his website that he's never going to change.
He has page that has an iframe with a 680px width and 600px height.
He currently has a website embedded in it that has a width of 950px.
What I want to know is if there is a way (I've searched all over) to automatically set the website to fit into the iframe box?
I have access to the child site but not to the parent, but my client actually knows some html/css so I can build a test link on my server and send him the code (if he needs it) to be applied on his end.
Thanks in advance.
This isn't an "automatic" way, but one thing you could do is apply some CSS to the little page. If the page you are loading doesn't change, you can apply CSS that is specific to that page which will change the elements' widths, and anything else that needs to be changed. Here is an answer on SO that describes just how to do that for iframes.
I am currently using a modified version of this theme to display an annual report:
http://www.elegantthemes.com/preview/ElegantEstate/
I can't link the report as our project manager wants to keep the site private until launch.
The project manager is complaining of a strange loading pattern where some content in the features slider shows up before the first slide for a few seconds, until the page is completely loaded. I do not have this problem myself.
Could anyone explain why this might be happening, and how I could fix it? Could I install a plugin that would pre-load the entire page or something like that?
I tried an image pre-loader plugin that did not solve the problem.
Thanks for your help.
Many sliders employ a technique where all of the content is loaded in the html, something like:
<div id="slider">
<div class="pane">
content
</div>
<div class="pane">
content
</div>
<div class="pane">
content
</div>
</div>
While the height and width of the combination of all three individual pane heights and widths, it will be larger than your slider wrapper div. For those who do not use JS, this is what they will see. This is considered to be graceful degradation, whereby they will not get the fancy slider, but they still will be able to see the content.
Once the JS loads in the page, the slider script most likely applies CSS rules that limit the size of the viewable slider area. The slider will likely get height and width parameters and an overflow declaration, something like:
width:200px;
height:200px;
overflow:hidden;
Once those rules take effect, the slider will look as it should. Until that happens, your slider will look nothing like a slider and all of the content will be viewable in a very ugly fashion.
The reason why your project manager is seeing it differently than you may be due to different connection speeds or individual browser inconsistencies. It sounds to me like your slider is working, you just want it to do something that it's not meant to do.
I think you might be able to hack this to work the way you want by adding rules similar to the ones I showed above to the containing div in your CSS style sheet.
I know you cannot post the url here, but if you can post or link to some JS, HTML, and/or CSS for the slider (or even the slider script used in this project), we might be of more help.
This div will have a computed height of 104.5px (in most recent Chrome, FF, and IE)
<div><img src="" height="100px" /></div>
This div will have a computed height of 100px
<div style="overflow:auto;"><img src="" height="100px" style="float:left;" /></div>
I used FireBug to look at the DIVs and IMGs, and both IMGs have 0 for margin, padding, and border, yet the computed height somehow is 4.5px bigger in the first instance.
Why is this? It impacts me when I try to layout a page with a consistent vertical grid. Ideally, I'd like to not have to float the imgs.
I tried to look here ==> http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.7.2 and I even tried vspace=0, but that didn't change anything.
Thanks for your help!
clients include their own stylesheets that should be overidden before you try to do any pixel-perfect layouts or cross-browser debugging. Even if you remove all your stylesheets there are still styles on the page.
Try it again with a css reset at the top of your stylesheet. Also, make sure that you're declaring a valid doctype. Use a strict doctype and make sure your code validates if that still doesn't help.
I usually use the meyer web reset with a few minor modifications that suit my workflow.
If other people are seeing 100px then it's likely a client side problem, so hopefully this troubleshoots it for you.
I use Yahoo! CSS Reset to get my browsers all starting from scratch, usually helps.
Look out for a line-height definition at a high level when applied to a div that only contains an image. (for example html {line-height:1.5em;})
You probably still want this line height setting in general for resetting text throughout the site, but try applying line-height:0 just to the div with nothing but an img inside it.
http://jsfiddle.net/kq3Yy/
Setting <div style="display:inline" /> should fix your problem.
There must be more going on here than what you show. How are you measuring these half pixels? What tool are you using? I can see line-height coming into play but you don't show that in your sample.