CSS is not loading in Iframe fancy box - javascript

I have a fancybox iframe and css is written on parent page. but css is not working in Fancy box but when i change to ajax it is working properly.

If you have something in iframe you have to set the css for the page inside it too, If u want it to work. The css for the main page works just for the main page not for the iframe content.

Related

CSS to popup window from IFrame

I have a page which has an iframe.
The iframe has a button which opens a new popup window.
I want a CSS to be applied to the popup window.
The page for the popup window is a third party application.
So I cannot add CSS for that.
Is there a solution for this?
You can't apply css directly. But with js you can add style tag to iframe content - and put rule there ( or link to css file )

Loading splash page while HTML styles and scripts get rendered?

I have all my JavaScript files linked on the bottom of my page. This way, the HTML can get rendered before loading any of the scripts. The only problem is that the HTML shows to the user before the scripts finish "decorating" the HTML elements. Is there an elegant way to show the user a splash page to your app before the scripts and styles kick in?
You can create a div with position: fixed and a high z-index covering the whole screen as first element in body. A loading animation or text can be shown inside.
The very last line of the body then is a JavaScript which sets display: none to that div.
In your HTML you can write you splash page and overwrite this with real content (which is hidden by default) by using javascript once it is loaded.
However there is a huge drawback to this solution: what if somebody has JS disabled?
Demo: http://jsfiddle.net/FDcNx/

Is it possible to place a loader image inside an iframe while its loading its content?

I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.

Fancybox page anchors

Is it possible to use page anchors (http://example.com/page.php#jump_to) in Fancybox and if so how?
I have tried like you normally do with a normal HTML page, where it works, but it doesn't work in Fancybox.
If you use an iframe to display the Fancybox content, then I suspect anchors will work.

jQuery load external swf into div

Hi I have an html page with jQuery accordian menu, that shows, hides divs on click. What I can't seem to figure out is how to load a swf into a div that sits on the page. Please help!!
$("#divId").html(swfHtmlString);

Categories