How can I trigger a jQuery alert when an iframe AND its CSS is loaded and rendered?


Tags: jquery,css,iframe,tinymce

Problem :

I'm trying to trigger an alert when an <iframe> and its CSS files are loaded and rendered.

I have the following so far:

$("#content_ifr").ready(function (){
        alert('iframe ready');
});

The problem with this is that the alert is happening before the CSS is rendered on the page, after the Alert is closed, then you see the CSS taking effect in the browser.

Any ideas on how to solve this with OUT a sloppy timeout hack?

Thanks.



Solution :

Since it's tinyMCE you're dealing with, have you tried their APIs?

http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.Editor

I'm thinking onLoadContent is your best bet, but I'm not sure if it does any CSS magic.

The only way we've found to pause loading until a CSS is loaded is a sloppy timeout hack. basically:

  1. set a real specific rule, like div.test-file-loaded{ color: #123456 }
  2. create a div of that class.
  3. check if color of that element is #123456, keep timeouting and retrying until it is.

Would really like to know if there's a non hack way, but I don't think there is. Since you're dealing with an iframe, even more hackiness will be needed....


    CSS Howto..

    How to change font color of select2 control using css

    How can I float two tables next to each other left to right and center them both?

    Angular 2 Materialize CSS Side-Nav Not Showing

    How to show and hide fieldset content on click of the legend

    How to make highlighted table with rowspan

    How to remove style type css wordpress from header?

    How to attach click event to a css styled checkbox

    How to change header size in css

    CSS while hover a div how to display other class(or) div?

    How to add multiple style rules to css pseudo elements using js?

    How to apply Title Case in input box through css

    CSS How to animate a transition from opacity 0 upon hover

    Why the input box is showing so different on Ipad but not on chrome

    How to resize image according from screen resolution on html css

    How to make a
    container width and height for each same as “the value of clientWidth and clientHeight in maximized window”?

    How to fit in an image inside span tag when onclick?

    How to enable top and bottom margins between a series of spans inside a div?

    How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?

    CSS Key animation: How do I make an image expand and shrink properly?

    How to set a single value of transform while leaving the other values?

    How can set text row limit using angularJs ng-repeat?

    Rails 4: how to identify and format links, hashtags and mentions in model attributes?

    How can I change the color of the last letter in an element?

    How To Wrap A Div When Parent Container Shrinks Using CSS

    How can I set CSS only for specific IE browsers?

    How to remove border in radial gradient so that it can mix well?

    How do I remove the gap between the header and image slider

    How to move this button?

    CSS hover transition - how to remove delay?

    How to align text in line with icons?