Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Loading Screen CSS

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Loading Screen CSS
 Login/Join
 
Silver Member
posted
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,


Production: WebFOCUS 8.202M
QA: WebFOCUS 8.206.01
Windows/SQL
 
Posts: 37 | Registered: May 24, 2017Report This Post
Expert
posted Hide Post
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?


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Guru
posted Hide Post
You could create some javascript or jquery that runs when your page is loaded and adjusts the frame.

Fernando


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03
 
Posts: 278 | Registered: October 10, 2006Report This Post
Silver Member
posted Hide Post
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: noneWink 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.


Production: WebFOCUS 8.202M
QA: WebFOCUS 8.206.01
Windows/SQL
 
Posts: 37 | Registered: May 24, 2017Report This Post
Expert
posted Hide Post
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...


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Expert
posted Hide Post
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...


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Silver Member
posted Hide Post
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.


Production: WebFOCUS 8.202M
QA: WebFOCUS 8.206.01
Windows/SQL
 
Posts: 37 | Registered: May 24, 2017Report This Post
Expert
posted Hide Post
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;");


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Expert
posted Hide Post
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';
});


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Silver Member
posted Hide Post
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

}


Production: WebFOCUS 8.202M
QA: WebFOCUS 8.206.01
Windows/SQL
 
Posts: 37 | Registered: May 24, 2017Report This Post
Silver Member
posted Hide Post
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.


Production: WebFOCUS 8.202M
QA: WebFOCUS 8.206.01
Windows/SQL
 
Posts: 37 | Registered: May 24, 2017Report This Post
Expert
posted Hide Post
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;");
});


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Silver Member
posted Hide Post
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).


Production: WebFOCUS 8.202M
QA: WebFOCUS 8.206.01
Windows/SQL
 
Posts: 37 | Registered: May 24, 2017Report This Post
Expert
posted Hide Post
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



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Silver Member
posted Hide Post
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!


Production: WebFOCUS 8.202M
QA: WebFOCUS 8.206.01
Windows/SQL
 
Posts: 37 | Registered: May 24, 2017Report This Post
Silver Member
posted Hide Post
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...


Production: WebFOCUS 8.202M
QA: WebFOCUS 8.206.01
Windows/SQL
 
Posts: 37 | Registered: May 24, 2017Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Loading Screen CSS

Copyright © 1996-2020 Information Builders