I am designing a web page with HTML IFrames
is there a possible way to make the Iframe width and height autoresize and is that compatable with at least (IE,firefox,safari,chrom) ??
please help !
No.
You can manage the width pretty easily, but web pages are flow documents and do not "understand" the concept of height (not easily, at least).
In order to do something like this, you'll have to use javascript. To make your javascript cross-browser compatible as easily as possible, you should use a framework such as jQuery.
There are several questions here about resizing content to height using jQuery like this one.
in onload of iframe call a function where you set the height , width of the iframe .
<iframe name="preview" id="preview" width="450" height="450" onLoad="iframeResize();"></iframe>
<script>
function iframeResize () {
document.getElementById('preview').height = SOMEVALUE
document.getElementById('preview').width = SOMEVALUE
}
</script>
Related
I am just wondering, is there anyway to resize a video that is inside an iframe? Below is the code I am working on, when I tried to resize the iframe, it only resizes the wrap and not the player itself therefore creating a scrollbar. Is there anyway to resize the video player itself?
<iframe width="600" height="370" src="http://online.fairytail.tv/s/googplayer.php?skintype=nemesis1&to=1002MJumgQZG&autostart=false&id=108994262975881368074/Ft1#5832691710150899906"></iframe>
iframe{
width: 600px; height: 370px;
}
you cant style the elements inside iframe from another domain
unless they give you the ability to change some parameters in url or something...
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Here's your WORKING DEMO
$("button").click(function () {
$('embed').attr('width', '800');
$('embed').attr('height', '600');
});
Stackoverflow is not a code generator, that's why I only gave you a clue not a simple solution. It would be better if you can work out something and become your own knowledge. Id doesn't mean I don't really know how to.
Chrome flickers when reloading content in iframes. Can this be avoided in any way, thinking of:
Wrapping a-links with js that does some magic.
Meta-tags in content-html. (I have source control over the html in the iframes)
Please note that the content-type in the iframe may vary (pdfs, html, images) so if ajax is the only way out here, does it reflect the http-content-type back to the iframe?
Please visit the demo at http://jsfiddle.net/2tEVr/
Excerpt of fiddle:
<iframe name="if" width="800" height="600"></iframe>
UPDATE
The solution that worked best for me was to replace regular href's with ajax-requests, repopulating the body-area, (solution 4 below) Flickering is gone but comes at a price of akward debugging since sync between content and "view-source" is lost on ajax-request.
Also, since the content-type in my case may change, the method for performing the ajax-request had to have some brains and possibly fall back to regular location request.
regards,
#user247245: From your question, its not entirely clear how you (want to) use the iframe. Does it reload periodically, or once when the whole webpage loads?
Solution 1: Different background color
In case you just want to avoid the ugly white, and avoid over-complication. Set a different background color in your HTML header of the framecontents.html file, like so:
<!DOCTYPE html>
<html style="background-color: #F48;">
This way, while the CSS file loads,parses, and gets applied, the background is not #fff.
Solution 2: Transparent iframe
While there is no content, the iframe should simply not be visible. Solution:
<iframe src="/framecontents.html" allowTransparency="true" background="transparent"></iframe>
Ofcourse dont use this in combination with solution 1, you'll shoot yourself in the foot.
Solution 3: Preload iframe page
In case you are loading the iframe later (such as user clicking a link), consider preloading its contents. Hide this in near the top of your (parent) page:
<iframe src="/framecontents.html" style="position: absolute; width: 0px; height: 0px"></iframe>
But i'd advise using solution 2 instead.
Solution 4: If doing a mobile web interface:
See how jQuery Mobile did it. We built a web interface that had to feel like a native app, so without reload flashes. jQM fixed that. Basically does a background ajax call to retrieve the full HTML contents, then extracts the body (the "page" div to be more precise) and then replaces the contents (with a transition if you like). All the while a reload spinner is shown.
All in all this feels like more like a mobile application: no reload flashes. Other solutions would be:
Solution 5: Use JS to inject CSS:
See answer by jmva, or http://css-tricks.com/prevent-white-flash-iframe/ .
Solution 6: use JS to inject CSS (simple version)
<script type="text/javascript">
parent.document.getElementById("theframe").style.visibility = "hidden";
</script>
<iframe id="theframe" src="/framecontents.html" onload="this.style.visibility='visible';"></iframe>
You could ofcourse leave out the <script> part and add style="visibility:hidden;" to the iframe, but the above would make sure that the frame is visible for visitors with JS disabled. Actually, i'd advise to do that because 99% of visitors has it enabled anyway, and its simpler and more effective.
A common trick is to display the iframe just when it's full loaded but it's better to not rely on that.
<iframe src="..." style="visibility:hidden;"
onload="this.style.visibility='visible';"></iframe>
The same trick a bit optimized using JS.
// Prevent variables from being global
(function () {
/*
1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
/*
2. When window loads, remove that CSS,
making iframe visible again
*/
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
Extracted from css-trick
If you have to switch between different sites and that trick of onload isn't working the only viable solution would be destroy and create the iframe programatically.
Try adding transform: translate3d(0, 0, 0); on a parent element.
I had an issue where the iframe was taller than its parent (parent has overflow: hidden). The iframe's overflown portion was flickering on each video loop on Chrome (YouTube iframe API).
Forcing hardware acceleration this way was the only thing that worked for me.
A simpler solution that worked in my case was just adding this CSS to the iframe
will-change: height;
min-height: 400px;
I've seen an effect on a few websites that gives you what are essentially vertical 'pages' which each fill the browser window. Examples:
http://www.bleed.no/
http://www.weworkonsunday.com/
The first is a good deal cleaner and more sophisticated.
I've been puzzling how to achieve this effect. It would be simple enough to do with page anchors etc. if height wasn't an issue, but filling the vertical of the window (as well as the width) is what's throwing me off.
Is there a straightforward method I'm missing? Or is all some complex java tomfoolery?
Many thanks for any help
Conceptually I would build a vertical page with stacked divs all with the same class that responds to the height of the window (and also responds when the browser is resized). Untested code using jQuery:
<div id="page1" class="page">content</div>
<div id="page2" class="page">content</div>
<div id="page3" class="page">content</div>
<script>
// set up onResize event handler
window.onresize = onResizeScreen;
// run onResize event handler once on load
$.(function() { onResizeScreen(); });
// onResize event handler
function onResizeScreen(event) {
$(".page").attr("height", screen.height);
}
// function to scroll to specific page
function gotoPage(pageNumber){
window.scroll(screen.height*pageNumber-1);
}
</script>
<style>
.page {
width: 100%;
}
</style>
You sound new to solving these kinds of problems. If you don't know what the above means check up on jQuery and handling JavaScript events.
This result does require some javascript expertise (in the way thats is implemented in your examples).
There is a jquery library that tries to simplify this process.
http://stephband.info/jparallax/
Even tho there are no really simple way to implement. Among the reasons the effect is very layout dependent and being a "new" way of doing websites... it will take some time until someone tackles the problem.
Here is another example of how to implement parallax in the way you described without teh help of the lib.
HOW-TO: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
Demo: http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/index.html
you will find plenty other resources if you search for "parallax scrolling".
How could I create a preview of a webpage? Using iframe, I could not scale down the contents of the page in order to create a nice looking overview.
The following fails
<iframe src="/mplahmplah#important_stuff" style="width:700px; height:900px; -moz-transform:scale(0.15, 0.15)" sandbox="" seamless scrolling="no"></iframe>
If the domain of the iframe and the container page is the same and you are using jQuery, try something like this:
$(function(){
$('iframe').on('load', function(){
$(this).contents().find('body').css({'-webkit-transform':'scale(0.15, 0.15)', '-moz-transform':'scale(0.15, 0.15)'});
});
});
The point is that you don't want to scale the iframe, you want to scale it's contents.
I understand that <frameset> and <frame> tag are becoming deprecated. Is there a way to emulate resizable frames? What I want is a narrow separator separating the area either horizontally or vertically, which is movable by the user so that when one side of it becomes smaller, the other side becomes larger, and vice versa. I do not want to fill in each frame with an html page like the conventional frame, but instead with some DOM materials.
I know that CSS3 has resize attribute, but that controls only the size of itself. I am not sure if this is to be used for the solution.
I don't particularly prefer using JavaScript, but I am not excluding the possibility of using it if necessary.
Do not use frameset, please. I don't think jQuery resize will help you much, either.
The best way to do this is by using a "splitter". There are several plugins for jquery that will do this in many different way and they all are actually quite simple.
I have previously used this one: http://methvin.com/splitter/
You can find a nice demo here: http://methvin.com/splitter/3psplitter.html
From my point of view jQuery Resizable or such js things is your solution. Go for it's demos.
In case of using jQuery you'll have extra possibilities:
Maximum / minimum size
Constrain resize area
Delay start
Snap to grid
Here is a sample code for jQuery Resizable default functionality:
<style>
#resizable {
width: 150px;
height: 150px;
display: block;
border: 1px solid gray;
text-align: center;
}
</style>
<script>
$(function() {
$("#resizable").resizable();
});
</script>
<div id="resizable">
<h3>Resizable</h3>
</div>
You may like this link for YUI
http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html
Example:
http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html
Janus Troelsen's solution above is great if you don't mind tables.
I also found this solution by SoonDead without tables, which worked great with Chrome and FF, but had to spend a nasty amount of time for IE8. It's on StackOverflow as "Emulate Frameset Separator Behavior"
I would look into Javascript and drag and drop support.
In fact, an emulated frameset could be just two divs and a handle between them which can be grabbed to resize. JQuery has samples to demonstrate how to resize an element: http://jqueryui.com/demos/resizable/ I don't think it would be very difficult to expand that concept to fit.
Then I would load the documents via AJAX, and this could probably replace frames completely.