HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Background images and iframes flash in IE

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#67997 (In Topic #14475)
Avatar

Community saint

My site has semi-transparent standardbox panels on a tiled background image. Everything looks fine in firefox, but in IE 8 the members page, poll side panel and shout box flashes (i.e. empty white page shows through before the contents are displayed transparently on the background image) when loaded.

The white background used to remain (i.e. no transparency) until I set allowTransparency="true" in the  iframe declaration of IFRAME_SCREEN.tpl , BLOCK_MAIN_POLL_IFRAME.tpl , BLOCK_SIDE_SHOUTBOX_IFRAME.tpl

Because the issues only occur with iframes, I can't seem to identify where else I need to set transparencies, or the fall-back background colour.

Note also that all pages, not just the ones listed above, flash very briefly in IE, but that is a very minor irritation compared to the flashing problem detailed above.

To reproduce the problem yourself you can use the Portal Conflict or Desert Combat themes.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#67998
Avatar

That's interesting. I didn't actually know iframes could be transparent.

It sounds like you've solved it for yourself. I don't think it would be appropriate to make this change in the default templates, because I am worried about side effects to some people, plus that this is invalid XHTML (most admins won't care and I don't think they should, but we ensure by default things stay valid).

Btw, iframes can be disabled via this OcCLE command:

Code

:set_value('no_frames','1');
with the trade-off of full page refreshes on submission.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#68001
Avatar

Community saint

I only solved half my problem. I got it to honour the iframe transparency, but I still have the problem with transition where the iframed pages go white for a moment before settling in as transparent.

I'm guessing I need to add transparency & background colour somewhere in the css, but I don't know where.

For example, while IFRAME_SCREEN.tpl contains the iframe declaration it also appears to add some dynamic content, and OCF_MEMBER_DIRECTORY_SCREEN.tpl does not contain a <body>, so I don't know how it fits in and where its getting its <body> from.


Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#68002
Avatar

Probably STYLED_HTML_WRAP.tpl


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#68003
Avatar

Community saint

It does not look like the right place.

Although I can change the background colour there, it still flashes white first.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#68004
Avatar

maybe hard-code style="background: whatever" in the template, to stop it having to load CSS sheets first.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#68016
Avatar

Community saint

Looks like I have found a workaround manipulating heights.

So far I have eliminated flashing on members page and shout box. All that remains (as far as I have noticed) is the poll side panel.

So far my solution for members page and shout box is as follows:

Code

In global.css, change

.dynamic_iframe {
   width: 100%;
   height: 900px; /* {$,This is dynamically resized; 900px is referenced from JAVASCRIPT.tpl so don't change it} */
}

to

.dynamic_iframe {
   width: 100%;
   height: 0px; /* {$,This is dynamically resized; 0px is referenced from JAVASCRIPT.tpl so don't change it} */
}

Code

In JAVASCRIPT.tpl, change

         if (frames[i].style.height=='900px') frames[i].style.height='auto';

to

         if (frames[i].style.height=='0px') frames[i].style.height='auto';

Code

In IFRAME_SCREEN.tpl, change

   <iframe scrolling="no" class="dynamic_iframe" title="{!PAGE}" frameborder="0" marginwidth="0" marginheight="0" name="iframe_page" id="iframe_page" src="{IFRAME_URL*}">{!PAGE}</iframe>

to

   <iframe scrolling="no" class="dynamic_iframe" allowTransparency="true" title="{!PAGE}" frameborder="0" marginwidth="0" marginheight="0" name="iframe_page" id="iframe_page" src="{IFRAME_URL*}">{!PAGE}</iframe>

Code

In BLOCK_SIDE_SHOUTBOX_IFRAME.tpl, change

   <iframe title="{!SHOUTBOX}" id="the_shoutbox" name="the_shoutbox" frameborder="0" marginwidth="0" marginheight="0" class="expandable_iframe" scrolling="no" src="{$FIND_SCRIPT*,shoutbox}?room_id={ROOM_ID*}&amp;num_messages={NUM_MESSAGES*}{$KEEP*}&amp;keep_theme={$THEME*}">{!SHOUTBOX}</iframe>

to

   <iframe title="{!SHOUTBOX}" id="the_shoutbox" name="the_shoutbox" frameborder="0" marginwidth="0" marginheight="0" class="expandable_iframe" allowTransparency="true" scrolling="no" src="{$FIND_SCRIPT*,shoutbox}?room_id={ROOM_ID*}&amp;num_messages={NUM_MESSAGES*}{$KEEP*}&amp;keep_theme={$THEME*}">{!SHOUTBOX}</iframe>

Code

In BLOCK_MAIN_POLL_IFRAME.tpl, change

   <iframe id="the_poll_{RAND%}{PARAM|}" name="the_poll_{RAND%}{PARAM|}" class="expandable_iframe" title="{!POLL}" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" src="{$FIND_SCRIPT*,poll}?param={PARAM*&}&amp;keep_theme={$THEME*&}&amp;zone={ZONE*&}{$KEEP*,0,1}{+START,IF,{$GET,in_panel}}&amp;in_panel=1{+END}{+START,IF,{$GET,interlock}}&amp;interlock=1{+END}">{!POLL}</iframe>

to

   <iframe id="the_poll_{RAND%}{PARAM|}" name="the_poll_{RAND%}{PARAM|}" class="expandable_iframe" allowTransparency="true" title="{!POLL}" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" src="{$FIND_SCRIPT*,poll}?param={PARAM*&}&amp;keep_theme={$THEME*&}&amp;zone={ZONE*&}{$KEEP*,0,1}{+START,IF,{$GET,in_panel}}&amp;in_panel=1{+END}{+START,IF,{$GET,interlock}}&amp;interlock=1{+END}">{!POLL}</iframe>

And as for the poll side panel, I expect that adding "height: 0;" to the expandable_iframe class would have fixed that problem, but it has no affect on it.

Any ideas Chris, Anyone?

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#68018
Avatar

I wonder if it is the block cache, maybe you just need to empty it. This is because whilst template cacheing is smart to see if templates have changed, if the template calls are wrapped inside a block which is itself cached, they won't auto-refresh.

(frames[i].style.height=='0px') worries me a little, just to be extra safe I would do ((frames[i].style.height=='0') || (frames[i].style.height=='0px'))


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#68019
Avatar

Community saint

I give it a de-cache before every test, and force a page re-load in the browser, and that works for me every time.

Thanks for the safety tip, I've implemented it.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#68021
Avatar

Community saint

Thanks to both of you.

I've been relying on an external script to house my Guestbook, but it looks like I may well be able to release that dependancy and fall back to ocPortal's own iframe scripting.

Post has been bookmarked!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#68024
Avatar

Don't think the Guestbook uses iframes?


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#68026
Avatar

Community saint

Chris Graham said

Don't think the Guestbook uses iframes?

Sorry, should have been clearer. The Guestbook I use is an add-on, not ocP's original.

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: