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;
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.
This is my situation; I am displaying ads on my website but I want to display a specific banner if a visitor is using an ad blocker. First thing I've looked for is a script that detects the ad blocker, but after trying a few different scripts it seems most of them no longer work (at least, I couldn't get them to work).
So I gave up on that and went with a different solution. Displaying a CSS background image behind the ad so that if the ad isn't shown, the image is. Because a typical ad takes a moment to load I made the background image a GIF image with 2 seconds of transparency. This works like a charm the first time, but when you reload the page or open a different page the GIF animation doesn't play and instantly displays the last frame, skipping the transparency.
I've tried adding random stuff behind the URL in the CSS, which didn't work. I've tried a data/inline version of the image, that didn't seem to work either. I'm kinda running out of solutions.
The CSS:
.ads {
position: relative;
top: 15px;
float: right;
height: 60px;
width: 468px;
background-image: url('/images/ads/ads_top.gif?randomstuff=39485')
}
I'm basically looking for either;
1) A way to show an alternative image if the ad is blocked (that is still actual and works).
2) A way to delay a CSS background image from being loaded.
3) A way to prevent a GIF from being cached or forced to replay the animation on each pageload.
Any of these would fix my problem. Hope someone is able to help.
Thanks!
Look this link. It is very simple and I don't think you need comments. Another question is how to set up time to each image.
Time to use some jQuery:
Your html code:
<div class='ads'></div>
<div class='ads'></div>
And the css code:
.ads {
position: relative;
top: 15px;
float: right;
height: 60px;
width: 468px;
}
Your jQuery code:
$(".ads").each(function() {
var timestamp = $.now();
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");
});
Your jQuery code have to be placed into the .js file. Do you have some js files? If yes, then add my code into onload handler. If you don't have any create new file, say, scripts.js and put this code into it:
$(document).ready(function()
{
$(".ads").each(function() {
var timestamp = $.now();
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");
});
}
Explanation:
.ready function means that all instructions in body of this
function will be read and started on page load. You don't need them
to work before page loaded, right?
$(".ads") — we get element with selector .ads (with class ads).
$(".ads").each(function() { /* body */ } — .each function means that we will assign instructions from function body to all elements with selector .ads
var timestamp = $.now(); — getting timestamp and assigning it into variable
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')"); — adding css property to $(this) element (this element is current element with selector .ads)
Thats all. Simple. Now you have file scripts.js with content above. Put it somewhere on your site, where you usually put your media files. For example, {root}/media/ <-- here.
The last thing you should do is link your new js file and jQuery library. Note, that jQuery library have to be linked before file, using $ variable.
Add next code to the <head></head> tag to your view:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/media/script.js"></script>
Don't forget to do all js actions in onload handler.
Hope this will help. Tell me about result, please.
JSFIDDLE
A possible solution for option 1, is to check with javascript (or preferably jquery) if the banner is visible. (You probably need to put a setTimeout around it, because as far as I know the page js loads first, and after that the adblocker js.
var ads = $('.ads').filter(':visible');
if(!ads.length) {
//do your alternative image showing magic here
}
A possible solution for option 2 might be to link to a php script and put a sleep(2); inside it, with after that the appropriate headers and print/echo of the image.
Say I have a URL: http://rythmengine.org/doc/expression.md#transformer
Immediately after the page is loaded, the anchor is shown correctly, however I have a script to automatically add some iframes across the page, chrome/opera will later on shift away from the anchor #comment, firefox and IE (10) are all good.
Any idea how to fix it in Chrome/opera?
I do not know if I would implement this or not since the iframes do take a noticeable amount of time to load and the user might already be scrolling around the page and get jolted back to the hash element but here is a solution I came up with using jQuery.
Since the iframes are being replaced in the document after it initially loads you can use the .load() function which normally never fires if you just have it on the document.
Demo on this page and edit the fiddle here.
Just add this jQuery code into your script tag where you replace all of the pre code:
Code:
$('iframe').load(function() {
moveToHash();
});
// Scroll to the url hash element
function moveToHash()
{
var hashElem = $(window.location.hash);
// If the hash elment exists
if(hashElem.length)
{
window.scrollTo(hashElem.position().left, hashElem.position().top);
}
}
Edit: had a few mistakes and unnecessary in the code that are now fixed.
When every iframe ends loading tell the browser to go to that hash
$('iframe').load(function() {
document.location.href = document.location.hash;
});
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".
Using a iframe where I call a site from my webspace, Using one css file with body {background-color: #222}.
The iframe src also use this CSS file. The Problem is that the body in the iframe need another background-colour.
tried
iframe>body { background-color: #other }
Any idea or suggestions?
I assume the iframe takes up a smaller portion of your site. In that case I would advice you to simply use a div with the same size of the iframe is loaded, and giving this div the proper background-color.
OR: include a style property in the source of the iframe page:
<head>
<style>body {background-color:#COLOR}</style>
</head>
This question is similar to How to apply css to iframe content?. Basically you can use jQuery to change the CSS properties in the iframe
$('#yourIframe').contents().find('body').css({
background-color: '#333333'
});
Edit:
You may need to add that when the iframe loads:
$('#yourIframe').load(function(){
$(this).contents().find('body').css({
background-color: '#333333'
});
});
Remember that a Javascript can modify only properties of iframe with the same origin of the site, otherwise you'll get a Security Error.
Protocols, domains and ports must match.
ive used this and it works for me. (and its sooooo easy!)
in your CSS file put:
iframe { background-color:orange; }
Just change the "orange" to whatever color you need.
Thats it!
Enjoy!
In the page that the iframe contains, link another stylesheet and then change all the CSS styles that you wish to.
using Javascript We can add Background Color to Iframe
var x = document.getElementById("myframe");
var y = (x.contentWindow || x.contentDocument);
if (y.document)y = y.document;
y.body.style.backgroundColor = "red";
Reference w3schools