Hello,

I have created a custom loading screen for our HTML files and it works great, except that when a page is loading, if it is NOT maximized and we resize the page the loading screen will stay at a fixed size. Which means that if content (which does load based on a pct of the screen size) is behind it, we will see an ugly overlap.

I looked at the code that is in the resultant html page and is applicable to the loading frame:

  
<iframe name="loadingiframe" id="loadingiframe" src="<loading animation html here>" style="width: 1481px; height: 927px; top: 0px; left: 0px; position: absolute; z-index: 10000; border: none; display: none;"></iframe>

If you look at the iframe tag you see that there is an embedded style with a fixed width/height for the loading animation html. That sucks..

I want to be able to alter the loadingiframe ID to allow for a responsive loading page and get rid of that embedded style.

Unfortunately since this tag is pre-pended ahead of any embedded CSS I write either on the html page that has the content OR the loading page I can't do anything about it without finding where the loadingiframe ID is stored in a css file somewhere.

Anyone have any tricks to fixing this? It's quite annoying to have a responsive page without a responsive loader.

Thanks.

This message has been edited. Last edited by: FP Mod Chuck,

You "created a custom loading screen" using what tool?

If you have access to the html file for this custom loading screen, can't you alter the html and css?

You could create some javascript or jquery that runs when your page is loaded and adjusts the frame.

Fernando

Francis I just used the HTML composer. The loading screen is just an HTML page with some div tags on it.

The problem is that the loadingiframe iframe is using an inline css style (note the style="width: 1481px; height: 927px; top: 0px; left: 0px; position: absolute; z-index: 10000; border: none; display: none which pretty much eliminates any possibility of overriding it downstream.

I need a way to remove the inline style from that particular tag so I can use a class change downstream, or a way to replace it upstream.

I found a couple techniques online, none of which work though.

My two cents:

Since this is a loading screen - once it works, you won't need to modify it, and you seem to know a bit about html and css, why not write code instead of using HTML Composer? Then you'll have complete control over what goes on...

It takes less code than what HTML Composer generates to create a responsive "please wait" screen.

Here's one example: SmallEnvelop: Display a loading icon until the page loads completely and there dozens more...

Right I understand that. After creating the page I promptly used "Edit with associated tool" and stripped out all the garbage that gets put in using the composer and added my styles and the div tags.

My problem isn't the responsive image or the loading image. That works fine.

I'm setting a background color of white for the loading html page to hide anything behind the loading page until loading is complete.

My problem is that the loadingiframe tag sets a static style for my loading page so that while the page behind is responsive, the background and the loading page in front ISN'T.

Resulting in the contents behind the loading page peeking out if someone resized the page before it was done loading.

I need to have the loading page be responsive while the main page is loading behind it. It really wouldn't be a problem if that static style tag was not there.

I don't have access to a WF 8 environment at the moment, so my suggestions are untested.

Thanks for your explanation, since I am currently in a non-GUI WF 7 environment, I had forgotten about loadingiframe. Is it not possible to reference the loadingiframe tag from the loading screen html, with perhaps

elem = window.opener.document.getElementById('loadingiframe');
elem.setAttribute("style","width: 100%; height: 100%; background-color: white;");

In some old code I dug up, I have this, so it seems possible to alter loadingiframe from the HTML Composer page, and not from the custom wait screen page:

$(document).ready(function()
{
    // Change the style of the loading iframe that contains the custom wait screen
    document.getElementById('loadingiframe').style.height = '40px';
    document.getElementById('loadingiframe').style.width  = '40px';
    document.getElementById('loadingiframe').style.top    = '94px';
    document.getElementById('loadingiframe').style.left   = '576px';
});

I suppose that's one way to do it, yeah, but that means touching all the HTML pages we've ever created instead of fixing it upstream in just the loading page.

Another way to do it (which is super lazy) is adding a !important after the change in composer and it will overwrite..but that means touching all the html pages we have instead of fixing it in one place (the loading page).

for example:

  
#loadingiframe

{

width: 100% !important

}

I updated the ibi_flat.css which is the style we use for the page..however it looks like it's trying to pull from some subdirectory I can't find:


http:///ibi_apps/ibi_html/S164_14940292781F/javaassist/ibi/html/composer/themes/nonBindows/IBI-Themes/ibi_flat.css


I don't see the S164_14940292781F directory or any way to get to it.

What about trying to alter loadingiframe from the custom wait screen?

$(document).ready(function()
{
    // Change the style of the loading iframe that contains the custom wait screen
    elem = window.opener.document.getElementById('loadingiframe');
    elem.setAttribute("style","width: 100%; height: 100%; background-color: white;");
});

That would work, if the loadingiframe id was within the scope of the loadinganimation.htm file, but it's not.

Here's the problem

 
  
A    <head>
     <body>
        <iframe id=loadingiframe>
           B   #document
                    <html>
                     <style>....
                     </html>
 

Any code I put in the area labelled "B" can't affect the iframe above it because that's affected by stuff in section "A".

I can put all the code I want in "B" which is the loading page. but I need to change the style stuff on the iframe above it.

A is controlled by internal IBI css files which are the preferable place to put the change since it would be global. I can also put embedded CSS into the composer for the HTML page containing the content and that will also work (which I don't want to do, since it involves changing dozens of things).

quote:

Any code I put in the area labelled "B" can't affect the iframe above it because that's affected by stuff in section "A".

Not true, as you can reference the window.top.document, which will allow you to reference anything in the "outer" DOM. You can also use .parent type qualification.

I use this method to force a proper modal drilldown from a portal widget (which would normally only allow association within the widget).

You just need to be able to build the JavaScript referencing and then maintain it.

T

Awesome, thanks Tony and Francis!

So this was the resultant change that now makes it work as expected:

  
window.parent.document.getElementById('loadingiframe').style.cssText = "top: 0px; left: 0px; position: absolute; z-index: 10000; border: none; width:100%; height:100%;";

I basically took everything except the display:none from the resultant css after the page rendered. It looks like the display:none is inserted after the page actually loads to make the loading animation go away, so don't put it in there obviously.

Appreciate the help!

Hah, so I spoke too soon.

When I use a Task & Animation to load a report into a frame on an html page, the loading used to appear in the frame, now it covers up the whole page.

I only want the loading to affect the whole page on the initial total HTML load. If I run stuff in frames using the tasks and animations I want the loading to appear in the frame, not appear to overwrite the whole page.

Back to the drawing board...