Loading ...
Sorry, an error occurred while loading the content.

39293Re: Problem with flex (.swf) inside a panel in Firefox

Expand Messages
  • aniad
    Oct 14, 2008
    • 0 Attachment
      I've been digging into this myself and came across this discussion:
      http://snook.ca/archives/other/hit_bug_in_fire/

      I'm almost there! If you create the outside <div> like this
      var panelBody = '<div id="flexWrapperDiv"
      style="position:fixed;overflow:auto;width:1000px;">Please wait...</div>';

      then it almost works. So the createPanel() function looks like this:

      function createPanel()
      {
      var panelBody = '<div id="flexWrapperDiv"
      style="position:fixed;overflow:auto;width:990px;">Please wait...</div>';

      gToolPanel = new YAHOO.widget.Panel( "thePanel", { close:
      false, width: "1000px", visible:true });
      gToolPanel.setHeader('The Panel');
      gToolPanel.setBody ( panelBody );
      gToolPanel.renderEvent.subscribe( onPanelReady);
      gToolPanel.render(document.body);
      gToolPanel.center();
      }

      It works, meaning the swf's controls are responsive (!!!), however,
      the panel and the swf don't paint in sync, meaning the panel is small,
      and the flex spills outside panel's borders.

      I will TREMENDOUSLY appreciate if you try this and see if there is a
      way to fix up the panel so that it draws its borders outside the swf,
      if that can be accomplished then we'll have this licked!

      I'll wait for your response,
      Ania.


      --- In ydn-javascript@yahoogroups.com, "aniad" <aniad@...> wrote:
      >
      > Hi,
      >
      > The .swf is a fairly complicated widget and splitting it is not a
      > simple, or perhaps even viable solution for us.
      >
      > I also tried the shim idea over the iframe with the same bad results.
      > I also tried setting up the panel with an iframe. So the panel has a
      > div, which has an iframe. The iframe references an html which in turn
      > loads the .swf. This resulted in even more bizarre behavior, where
      > dragging the panel over the iframe or any other part of the layout
      > would "wipe out" the display of the .swf, meaning the .swf's parts
      > over those areas would cease to render all together.
      >
      > Of course the issue at heart is that not only does the .swf reload
      > after the `overflow' style of the panel's div is changed, but if the
      > .swf subsequently creates new controls (buttons, pulldowns, etc) these
      > will not work again, thus rendering the "overflow fix" somewhat mute
      > as subsequently setting the panel's `overflow' style again is a NOP,
      > and even if it weren't it would cause a reload again.
      >
      > I understand you are busy, but I will TREMENDOUSLY appreciate if you
      > keep looking into this as we would REALLY like to find a solution
      > which would allow us to use panels with flex over iframes.
      >
      > Thank you, and with your permission I might `poke' you again next week…
      > Ania.
      >
      > --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdesai@> wrote:
      > >
      > > Hi,
      > >
      > > I did take another look at it and attempted a DIV shim based
      > solution to cover the iframe, as an alternate approach, but that did
      > not help.
      > >
      > > On the swf side of things, I was wondering if you might want to
      > evaluate a solution which split the state from the UI, so you can
      > store the state in another swf (which has no UI and doesn't need to be
      > reloaded), or in JS.
      > >
      > > That would free you up to reload the swf which renders the UI,
      > whenever you need to work around the FF/iframe overlap issue and
      > restore it's state from JS/the other swf. NOTE: My swf knowledge is
      > fairly limited, so not sure how big/small a task this is. I believe
      > this is something we do for the Charts component to resolve the reload
      > issue.
      > >
      > > Will continue to dig, but am a little short on time this week.
      > >
      > > - Satyen
      > > ________________________________________
      > > From: ydn-javascript@yahoogroups.com
      > [mailto:ydn-javascript@yahoogroups.com] On Behalf Of aniad
      > > Sent: Monday, October 13, 2008 10:12 AM
      > > To: ydn-javascript@yahoogroups.com
      > > Subject: [ydn-javascript] Re: Problem with flex (.swf) inside a
      > panel in Firefox
      > >
      > > Hi,
      > >
      > > I don't mean to push on this, but I'm kind of stuck on this... Did you
      > > have a chance to look at this?
      > >
      > > Thank you,
      > > Ania.
      > >
      > > --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdesai@> wrote:
      > > >
      > > > Hi,
      > > >
      > > > Been away from a computer for a few days. Will follow up on this
      > > > thread once I've had a chance to replicate your test.
      > > >
      > > > Regards,
      > > > Satyen
      > > >
      > > > --- In ydn-javascript@yahoogroups.com, "aniad" <aniad@> wrote:
      > > > >
      > > > > Satyen,
      > > > >
      > > > > Here are some additional observations: when I bring up the panel
      > > > > w/.swf, change the div's style which will cause the .swf to
      > reload so
      > > > > in my test case I reinitialize the flex again, at the end of all
      > that
      > > > > I get a working dialog/panel with swf. Then I close the panel
      > (ie put
      > > > > if off screen). Some subsequent user interaction changes the
      > state of
      > > > > things and the panel is made visible again, but because the
      state of
      > > > > things has changed the .swf will display a different version of
      > > > > buttons and controls. Unfortunately, those new
      buttons/controls are
      > > > > again unresponsive. Setting div's style again acts like a nop at
      > this
      > > > > point because the style has already been set, I suppose.
      > > > >
      > > > > ANY help/ideas to accomplish being able to put swf in a panel,
      > keep it
      > > > > active by hiding it off screen and have responsive
      buttons/controls
      > > > > over an iframe will be extremely appreciated.
      > > > >
      > > > > Ania.
      > > > >
      > > > > --- In ydn-javascript@yahoogroups.com, "aniad" <aniad@> wrote:
      > > > > >
      > > > > > Yes, this is in your modified file. So, if you seperate the
      > > showing of
      > > > > > the panel from setting the overflow attrib of the panel into 2
      > > > > > functions like this:
      > > > > >
      > > > > > function showPanel()
      > > > > > {
      > > > > > gToolPanel.cfg.setProperty ("fixedcenter", true );
      > > > > > gToolPanel.center();
      > > > > > }
      > > > > >
      > > > > > function fixOverflow()
      > > > > > {
      > > > > > if (YAHOO.env.ua.gecko &&
      > > > > > navigator.userAgent.toLowerCase().indexOf("macintosh") == -1)
      > > > > > {
      > > > > > // On the mac, Panel already applies it's own set of
      > > > > > overflow management to Panel,
      > > > > > // to prevent scrollbar bleedthrough.
      > > > > > YAHOO.util.Dom.setStyle("flexWrapperDiv", "overflow",
      > > > > "auto");
      > > > > > }
      > > > > > }
      > > > > >
      > > > > > And then add a 5th button:
      > > > > > <button onclick="fixOverflow();">5): click to fix
      > > > > > overflow, see flex repaint</button>
      > > > > >
      > > > > > and then do button 1, button 2, button 3 and finally button 5,
      > > you'll
      > > > > > see the flex totally repaint/reload.
      > > > > >
      > > > > > The reload messes us up, as the first, originally instantiated
      > > version
      > > > > > of flex has a state already set. Basically the .swf in panel
      > > talks to
      > > > > > other parts of the UI, which depend on that .swf but in turn the
      > > .swf
      > > > > > gets a 'state' from those other parts. So, when it reloads
      all is
      > > > > lost...
      > > > > >
      > > > > > Thank you again for looking into this. I've been working on this
      > > > > > problem for quite a while now and truly appreciate your help!
      > > > > >
      > > > > > Ania.
      > > > > >
      > > > > >
      > > > > >
      > > > > > --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdesai@>
      > > wrote:
      > > > > > >
      > > > > > > >> first .setStyle does it. Can you think of any other work
      > around
      > > > > which
      > > > > > > would not involve a reload of the flex?
      > > > > > >
      > > > > > > Is this with the updated file I provided below or with your
      > > original
      > > > > > zip? Also any specific version of FF/OS?
      > > > > > >
      > > > > > > >> p.s. What I also noted, is that when the panel is hidden
      > and I
      > > > > bring
      > > > > > > up Firebug (f12) the panel "spontaneously" becomes visible...
      > > > any idea
      > > > > > > about that?
      > > > > > >
      > > > > > > I believe this may be because in your original code you had
      > > > > > "fixedcenter" set to true, which will attempt to center the
      Panel
      > > > > > whenever the window is resized. In my modified version, I just
      > > changed
      > > > > > this to invoke panel.center() when it's shown.
      > > > > > >
      > > > > > > Regards,
      > > > > > > Satyen
      > > > > > > ________________________________________
      > > > > > > From: ydn-javascript@yahoogroups.com
      > > > > > [mailto:ydn-javascript@yahoogroups.com] On Behalf Of aniad
      > > > > > > Sent: Thursday, October 02, 2008 3:58 PM
      > > > > > > To: ydn-javascript@yahoogroups.com
      > > > > > > Subject: [ydn-javascript] Re: Problem with flex (.swf)
      inside a
      > > > > > panel in Firefox
      > > > > > >
      > > > > > > Hi Satyen,
      > > > > > >
      > > > > > > Thank you so much for your reply.
      > > > > > >
      > > > > > > I'm still working on this... turns out that setting the style
      > > on the
      > > > > > > div causes a RELOAD of the flex widget, which is something we
      > > > are very
      > > > > > > much trying to avoid. In addition, after it reloads the flex's
      > > > > > > external interfaces seem unresponsive... You can see that
      reload
      > > > when
      > > > > > > you create the panel, then the layout (which hides the
      > panel) then
      > > > > > > show the panel which will come back blank then paints the
      > > .swf. What
      > > > > > > I don't quite understand is that from there on it seems fine.
      > > > Meaning
      > > > > > > that subsequent hide/show don't cause the reload, it is as if
      > > > only the
      > > > > > > first .setStyle does it. Can you think of any other work
      around
      > > > which
      > > > > > > would not involve a reload of the flex?
      > > > > > >
      > > > > > > Ania.
      > > > > > >
      > > > > > > p.s. What I also noted, is that when the panel is hidden and I
      > > bring
      > > > > > > up Firebug (f12) the panel "spontaneously" becomes visible...
      > > > any idea
      > > > > > > about that?
      > > > > > >
      > > > > > > a.
      > > > > > >
      > > > > > > --- In ydn-javascript@yahoogroups.com, "Satyen Desai"
      <sdesai@>
      > > > wrote:
      > > > > > > >
      > > > > > > > Hi,
      > > > > > > > Thanks for the detailed example page.
      > > > > > > >
      > > > > > > > Try using the following version of your page:
      > > > > > > >
      > > > > > > >
      > > > > > >
      > > > > >
      > > > >
      > > >
      > >
      >
      http://yuiblog.com/sandbox/yui/v250/examples/container/panelOverIframe.html
      > > > > > > >
      > > > > > > > (Your swf isn't hosted at the above location, so you'll
      > need to
      > > > > > > download it and try it out locally)
      > > > > > > >
      > > > > > > > The main change is to applying overflow:auto to the
      > > > flashWrapperDiv.
      > > > > > > >
      > > > > > > > Some notes:
      > > > > > > >
      > > > > > > > * I found that I had to apply overflow:auto dynamically
      > through
      > > > > > > > script as opposed to using static CSS - probably a "redraw"
      > > issue.
      > > > > > > >
      > > > > > > > * We apply overflow:auto to the Panel shadow, for FF/Mac
      > > > already to
      > > > > > > > deal with scrollbar bleed through issues, so the fix was
      only
      > > > > > > > required for FF/Win.
      > > > > > > >
      > > > > > > > The other minor changes are just to get the height set
      > > correctly.
      > > > > > > >
      > > > > > > > Tried it across FF2, FF3 on WinXP/MacOS and seems to work
      > fine,
      > > > > > > aside from the fact that the swf is not re-drawn when
      > dragging in
      > > > > > > FF2/MacOS for step 1 of your repro example (which can
      > probably be
      > > > > > > resolved also, if it's a real part of your application)
      > > > > > > >
      > > > > > > > Let me know how it goes.
      > > > > > > >
      > > > > > > > Regards,
      > > > > > > > Satyen
      > > > > > > >
      > > > > > > > ________________________________________
      > > > > > > > From: ydn-javascript@yahoogroups.com
      > > > > > > [mailto:ydn-javascript@yahoogroups.com] On Behalf Of aniad
      > > > > > > > Sent: Thursday, October 02, 2008 9:45 AM
      > > > > > > > To: ydn-javascript@yahoogroups.com
      > > > > > > > Subject: [ydn-javascript] Re: Problem with flex (.swf)
      > inside a
      > > > > > > panel in Firefox
      > > > > > > >
      > > > > > > > Here is a link to a zip file which has a simple .html and a
      > > simple
      > > > > > > > .swf file which demonstrate the problem (I have also
      included
      > > > > the code
      > > > > > > > for the .swf file in case you need it).
      > > > > > > >
      > > > > > > >
      > > https://download.amberpoint.com/forYahoo/SwfOverIframe_Problem.zip
      > > > > > > > Username: Yahoo
      > > > > > > > Password: bug4yahoo
      > > > > > > >
      > > > > > > > As you will see in the text in the .html, the problem is
      > > very much
      > > > > > > > linked to the order in which items are created. However,
      > we have
      > > > > > > > certain dependencies between the .swf and other items on the
      > > page
      > > > > > > > therefore need to create the panel w/.swf first.
      > > > > > > >
      > > > > > > > Ania.
      > > > > > > >
      > > > > > > > --- In ydn-javascript@yahoogroups.com, "aniad" <aniad@>
      wrote:
      > > > > > > > >
      > > > > > > > > Eric,
      > > > > > > > >
      > > > > > > > > Changing the wmode helped a little. The mouse tracks
      > correctly
      > > > > when
      > > > > > > > > the panel is dragged around over most of the screen areas,
      > > > > > however it
      > > > > > > > > still is unresponsive when the panel is over an iframe.
      > > I'll put
      > > > > > > > > together simple example of this problem.
      > > > > > > > > Ania.
      > > > > > > > >
      > > > > > > > > btw, did you have a chance to look at
      > > > > > > > >
      > > > http://tech.groups.yahoo.com/group/ydn-javascript/message/38440? I
      > > > > > > > > posted simple nested layout code which demonstrates the
      > > 'invalid
      > > > > > > > > argument' error.
      > > > > > > > > a.
      > > > > > > > >
      > > > > > > > > --- In ydn-javascript@yahoogroups.com, Eric Miraglia
      > > <miraglia@>
      > > > > > > wrote:
      > > > > > > > > >
      > > > > > > > > > Ania,
      > > > > > > > > >
      > > > > > > > > > Here's what our Flash experts say:
      > > > > > > > > >
      > > > > > > > > > My suggestion would be to check the wmode of their SWF
      > > embed.
      > > > > > This
      > > > > > > > > > sounds like a longstanding issue with the plugin version
      > > > of the
      > > > > > > > player
      > > > > > > > > > when the wmode is set to transparent or opaque.
      > Changing the
      > > > > wmode
      > > > > > > > to
      > > > > > > > > > window should fix it. If that is not the case, they'll
      > > need to
      > > > > > > > send a
      > > > > > > > > > link or their code and I can take a look.
      > > > > > > > > >
      > > > > > > > > > See if wmode solves your problem; if not, please send
      > a link
      > > > > > to the
      > > > > > > > > > page where you're having the problem.
      > > > > > > > > >
      > > > > > > > > > Regards,
      > > > > > > > > > Eric
      > > > > > > > > >
      > > > > > > > > >
      > > > > > > > > > On Sep 30, 2008, at 3:45 PM, aniad wrote:
      > > > > > > > > >
      > > > > > > > > > > We have a nested full screen layout. In the `bottom'
      > part
      > > > > of the
      > > > > > > > > > > inner layout (which is in the `center' of the outer
      > > > layout) we
      > > > > > > > have a
      > > > > > > > > > > tabs control. Each tab creates an iframe into which a
      > > > page is
      > > > > > > > > > > displayed, depending on what is selected elsewhere in
      > > > the UI.
      > > > > > > > > > >
      > > > > > > > > > > When the user clicks a button a panel is made visible
      > > which
      > > > > > has a
      > > > > > > > > > > <div> inside which a .swf file is rendered. The swf
      > has a
      > > > > > > number of
      > > > > > > > > > > controls, buttons and drop boxes with which the user
      > > > > interacts.
      > > > > > > > > > >
      > > > > > > > > > > The problem (FF only, works correctly in IE):
      > > > > > > > > > > When the panel with .swf is visible the mouse is not
      > > tracked
      > > > > > > > properly
      > > > > > > > > > > within the swf. The portions of the panel/swf that
      > > > overlay the
      > > > > > > > iframe
      > > > > > > > > > > displayed in the bottom/tabs portion do not track the
      > > mouse
      > > > > > > > properly,
      > > > > > > > > > > thus appearing unresponsive. Right clicking in the
      .swf
      > > > > > shows the
      > > > > > > > > > > standard flex context menu way off from where the
      > > mouse was
      > > > > > > clicked.
      > > > > > > > > > > Dragging the panel around the screen exaggerates the
      > > > > problem of
      > > > > > > > > > > tracking the mouse, even allowing the flex context
      > menu to
      > > > > > appear
      > > > > > > > > > > entirely outside of the panel/swf area. The problem
      > > does not
      > > > > > > seem to
      > > > > > > > > > > be contained to the panel being over an iframe.
      > > Dragging the
      > > > > > > > panel so
      > > > > > > > > > > that it sits on top of other parts of the layout (with
      > > > simple
      > > > > > > html)
      > > > > > > > > > > also has issues. There is another flex control always
      > > > > > displayed in
      > > > > > > > > > > one of the parts of the layout. Dragging the panel
      > to that
      > > > > > part of
      > > > > > > > > > > the screen always tracks the mouse correctly
      within the
      > > > > > panel that
      > > > > > > > > > > sits directly on top of that other flex widget.
      > > > > > > > > > >
      > > > > > > > > > > Are there any known problems of hosting a .swf
      inside a
      > > > panel
      > > > > > > in FF?
      > > > > > > > > > > As mentioned before, this does not happen in IE.
      > > > > > > > > > >
      > > > > > > > > > > Ania.
      > > > > > > > > > >
      > > > > > > > > > >
      > > > > > > > > > >
      > > > > > > > > >
      > > > > > > > >
      > > > > > > >
      > > > > > >
      > > > > >
      > > > >
      > > >
      > >
      >
    • Show all 17 messages in this topic