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

Fancy Content in Dynamically-Created Panels

Expand Messages
  • monsieurdizzy
    Hello. Are there any imposed limitations to using a Panel that has been created by script versus one that has been created from markup? I am using an extended
    Message 1 of 10 , Oct 1, 2007
    • 0 Attachment
      Hello.

      Are there any imposed limitations to using a Panel that has been
      created by script versus one that has been created from markup?

      I am using an extended version of Panels to create a customizable home
      page. Adding a new widget without refreshing the entire page requires
      me to instantiate the new widget from JavaScript.

      When it comes time to fill the new widget with its actual content, I
      run into problems with the script-created Panels, regardless of the
      fact that the code is reused multiple times for various other actions
      without incident. If the content contains anything other than just
      styled text, such as a Flash object, it will not render within the
      Panel body.

      The only thing separating these newly-added Panels from the ones that
      are pre-existing on the page is the fact that they're created from script.

      Does anybody have any clarifications or solutions to this issue? Is
      it possible to add Flash content to a script-instantiated Module/Panel?

      Thank you very much.
    • Satyen Desai
      Hi, Can you provide a URL for us to look at? Thanks, Satyen _____ From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of
      Message 2 of 10 , Oct 2, 2007
      • 0 Attachment

        Hi,

        Can you provide a URL for us to look at?

         

        Thanks,

        Satyen

         


        From: ydn-javascript@yahoogroups.com [mailto: ydn-javascript@yahoogroups.com ] On Behalf Of monsieurdizzy
        Sent: Monday, October 01, 2007 12:05 PM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] Fancy Content in Dynamically-Created Panels

         

        Hello.

        Are there any imposed limitations to using a Panel that has been
        created by script versus one that has been created from markup?

        I am using an extended version of Panels to create a customizable home
        page. Adding a new widget without refreshing the entire page requires
        me to instantiate the new widget from JavaScript.

        When it comes time to fill the new widget with its actual content, I
        run into problems with the script-created Panels, regardless of the
        fact that the code is reused multiple times for various other actions
        without incident. If the content contains anything other than just
        styled text, such as a Flash object, it will not render within the
        Panel body.

        The only thing separating these newly-added Panels from the ones that
        are pre-existing on the page is the fact that they're created from script.

        Does anybody have any clarifications or solutions to this issue? Is
        it possible to add Flash content to a script-instantiated Module/Panel?

        Thank you very much.

      • monsieurdizzy
        I ll try my best. I can t show anyone the original, but I ll try to create a mock-up that generally does the same thing.
        Message 3 of 10 , Oct 3, 2007
        • 0 Attachment
          I'll try my best. I can't show anyone the original, but I'll try to
          create a mock-up that generally does the same thing.
        • Satyen Desai
          Thanks, it really helps get a quicker (and broader) response from the group. I have seen working Panel implementations with Flash content (as well as other
          Message 4 of 10 , Oct 3, 2007
          • 0 Attachment
            Thanks, it really helps get a quicker (and broader) response from the
            group.

            I have seen working Panel implementations with Flash content (as well
            as other complex markup) so there maybe something implementation
            specific going on.

            Regards,
            Satyen
          • monsieurdizzy
            I ve had no issues putting Flash inside drag-and-drop Panels, as long as those Panels were instantiated from existing DIV elements. The problem is confined to
            Message 5 of 10 , Oct 3, 2007
            • 0 Attachment
              I've had no issues putting Flash inside drag-and-drop Panels, as long
              as those Panels were instantiated from existing DIV elements. The
              problem is confined to when those Panels are created directly from script.

              I don't understand what the trouble could be. :'(
            • Satyen Desai
              Hi, Just a reference - here s a quick example with a Panel from script, which looks OK on IE6/FF2/Opera9.
              Message 6 of 10 , Oct 3, 2007
              • 0 Attachment
                Hi,

                Just a reference - here's a quick example with a Panel from script,
                which looks OK on IE6/FF2/Opera9.

                http://yuiblog.com/sandbox/yui/v231/examples/container/flashInPanel.html

                I'll take a look once you post your example.

                Regards,
                Satyen
              • david.marr
                ... Satyen, Hope you dont mind me jumping into this thread. This looks good, except for a major issue in ie6. If you start the flash movie, and then use the
                Message 7 of 10 , Oct 3, 2007
                • 0 Attachment
                  --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdesai@...> wrote:
                  >
                  > Hi,
                  >
                  > Just a reference - here's a quick example with a Panel from script,
                  > which looks OK on IE6/FF2/Opera9.
                  >
                  > http://yuiblog.com/sandbox/yui/v231/examples/container/flashInPanel.html
                  >
                  > I'll take a look once you post your example.
                  >
                  > Regards,
                  > Satyen
                  >

                  Satyen,
                  Hope you dont mind me jumping into this thread. This looks good,
                  except for a major issue in ie6. If you start the flash movie, and
                  then use the panel's close icon, it continues playing the audio. I
                  have been trying to come up with a solution here, but keep coming up
                  short. If you have any ideas that would be excellent.

                  Dave
                • Satyen Desai
                  Hey David, I m no Flash expert, but as we discussed, two possible paths you could pursue are: a). Provide a JS interface, to stop the flash movie in a
                  Message 8 of 10 , Oct 3, 2007
                  • 0 Attachment
                    Hey David,

                    I'm no Flash expert, but as we discussed, two possible paths you could
                    pursue are:

                    a). Provide a JS interface, to stop the flash movie in a hideEvent
                    listener (not sure if there's a base JS interface exposed by default,
                    which you can use without having to create your own)

                    b). Brute Force - remove the flash object/embed element from the DOM,
                    the down side being the startup time, next time the Panel is shown
                    (I've updated the example to use this method)

                    Regards,
                    Satyen
                  • monsieurdizzy
                    The big difference between your example and my implementation is that you re injecting straight HTML markup into your body, and for whatever reason, the Flash
                    Message 9 of 10 , Oct 4, 2007
                    • 0 Attachment
                      The big difference between your example and my implementation is that
                      you're injecting straight HTML markup into your body, and for whatever
                      reason, the Flash guy has been using JavaScript.

                      An example looks like this:

                      ==========================================================

                      <script type="text/javascript">
                      YAHOO.ptl.displayArea_penguins;
                      if (YAHOO.ptl.displayArea)
                      {
                      YAHOO.ptl.displayArea_penguins = YAHOO.ptl.displayArea;
                      }
                      else
                      {
                      YAHOO.ptl.displayArea_penguins = "penguinsContainer";
                      }

                      function getMovie(m) {
                      if(navigator.appName.indexOf("Microsoft") != -1) {
                      return window[m];
                      } else if (document[m]) {
                      return document[m];
                      } else {
                      return document.getElementById(m);
                      }
                      }

                      function renderPenguins() {
                      document.getElementById(YAHOO.ptl.displayArea_penguins).innerHTML =
                      "<object id=\"penguins\" "
                      + "class=\"flashPortlet\" "
                      + "width=\"270\" "
                      + "height=\"100%\" "
                      +
                      "codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#\
                      version=8,0,0,0\"
                      "
                      + "classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" "
                      + ">"
                      + "<param value=\"/flash/portlet/penguins/penguins.swf\" "
                      + "name=\"movie\"/>"
                      + "<param value=\"/flash/portlet/penguins/penguins.swf\" "
                      + "name=\"penguins\"/>"
                      + "<param value=\"high\" "
                      + "name=\"quality\"/>"
                      + "<param value=\"transparent\" "
                      + "name=\"wmode\"/>"
                      + "<embed id=\"penguinsMovie\" "
                      + "class=\"flashPortlet\" "
                      + "height=\"100%\" "
                      + "width=\"270\" "
                      + "type=\"application/x-shockwave-flash\" "
                      + "pluginspage=\"http://www.macromedia.com/go/getflashplayer\" "
                      + "quality=\"high\" "
                      + "wmode=\"transparent\" "
                      + "src=\"/flash/portlet/penguins/penguins.swf\"/>"
                      + "</object>";
                      }

                      YAHOO.util.Event.onDOMReady(renderPenguins);
                      </script>
                      <div class="flashContainer" id="penguinsContainer">
                      </div>

                      ====================================================================

                      The Javascript is the common element that's causing trouble; not the
                      Flash. And in this particular case, I see no reason why we should be
                      relying on Javascript, but there are certainly other "widgets" that
                      will need it for more solid reasons.

                      Javascript isn't evaluated properly when using the Panel.setBody()
                      function, so we use a common script called execJS() to parse out all
                      the Javascript and execute it. The blog where we found this code
                      unfortunately has been taken down.

                      So let me expand this question, I guess... Is there any limitation
                      when passing JavaScript to a Panel that has been instantiated from script?

                      If we use the same code in a static DIV or in a Panel that was
                      instantiated from markup, everything displays properly. In a Panel
                      created from script... nada.

                      Thanks for your help and your example. I'm still working on mine.
                      (It's a busy week, unfortunately.) This has been extremely helpful so
                      far. At the very least, I'll be able to strip out the Javascript and
                      use a temporary solution until our widgets get more robust.
                    • Satyen Desai
                      Hi, Re: JS execution: As far as I know, to execute script tags added via innerHTML (which calling setBody also does, when passed a string) you will need a
                      Message 10 of 10 , Oct 4, 2007
                      • 0 Attachment
                        Hi,

                        Re: JS execution:

                        As far as I know, to execute script tags added via innerHTML (which calling
                        setBody also does, when passed a string) you will need a separate evaluation
                        step after the script nodes are added to the DOM to support the A-Grade
                        browser list. This is what execJS is probably doing.

                        I've updated the example to include a script tag with defer=true, which is
                        required for IE to execute it, without the additional evaluation step, but
                        it's still not A-Grade compatible.

                        Re: Differences in implementation:

                        You don't include the code which instantiates the Panel, so I don't know
                        whether or not "penguinsContainer" is the container provided to the Panel
                        constructor, but if it is, this is really the main difference in
                        implementations.

                        I'm adding an HTML string to the container's body (<div class="bd">) element
                        by virtue of the setBody call - which is the recommended method - whereas
                        your code is adding it to the "pengiunsContainer" div, which, if it's the
                        container div provided to the Panel constructor, or outside of the
                        container's body element (<div class="bd">) will not produce the expected
                        results.

                        Hope that helps,
                        Satyen
                      Your message has been successfully submitted and would be delivered to recipients shortly.