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

How can I improve performance on draggable Panels.

Expand Messages
  • Flinn2112
    Hi, YUI Panels are sort of an excellent base for building next generation Internet apps, however when creating large panels (500 x 600px) that host a bunch of
    Message 1 of 10 , Jan 29, 2008
      Hi,

      YUI Panels are sort of an excellent base for building next generation
      Internet apps, however when creating large panels (500 x 600px) that
      host a bunch of stuff or IFRAMES from other sites I experience serious
      downgrades (especially in IE) while dragging a panel over another.
      IE simply loses grip of the title bar and draggin' is over then.
      Firefox performs better but also not optimal.
      I suspect it got to do with reflow behaviour - tried some DDProxy to
      get around it but to no avail.
      Anyone any solutions, work-arounds (no hacks plz).

      Kind Regards

      Frank
    • Jaime Bueza
      While you re dragging it keeps firing events and keeps on trying to reload the SRC attribute of the iframe each pixel you drag it. In your startDrag function,
      Message 2 of 10 , Jan 29, 2008
        While you're dragging it keeps firing events and keeps on trying to
        reload the SRC attribute of the iframe each pixel you drag it.

        In your startDrag function, save the src of the iframe into a
        variable, and then re-apply the src of the iframe on endDrag.

        Or you could just remove the iframe entirely on startDrag, and then
        re-initialize the iframe on endDrag. However; there will be a delay
        because the iframe will need to re-download its content. Ultimately,
        the performance of dragging the panel will be increased. I've also
        noticed the performance decreases when dragging large images within a
        panel.

        Sadly, setting display: none; or visibilty: hidden; has no effect on
        increasing performance. The best thing to do is just swap in a  
        (space) while you're dragging the panel, and when you endDrag, swap in
        the content.

        --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@...> wrote:
        >
        > Hi,
        >
        > YUI Panels are sort of an excellent base for building next generation
        > Internet apps, however when creating large panels (500 x 600px) that
        > host a bunch of stuff or IFRAMES from other sites I experience serious
        > downgrades (especially in IE) while dragging a panel over another.
        > IE simply loses grip of the title bar and draggin' is over then.
        > Firefox performs better but also not optimal.
        > I suspect it got to do with reflow behaviour - tried some DDProxy to
        > get around it but to no avail.
        > Anyone any solutions, work-arounds (no hacks plz).
        >
        > Kind Regards
        >
        > Frank
        >
      • Flinn2112
        Thanks Jamie, excellent, I will fiddle around a bit with this. One question about your save the src of the iframe hint: You mean saving the whole HTML to
        Message 3 of 10 , Jan 29, 2008
          Thanks Jamie,

          excellent, I will fiddle around a bit with this.
          One question about your 'save the src of the iframe' hint:
          You mean saving the whole HTML to memory and then re-aply it at the
          new position, is that right?
          And then wondering: is there any article about why the content would
          be downloaded again when repositioned?


          Kind regards

          Frank

          --- In ydn-javascript@yahoogroups.com, "Jaime Bueza" <jbueza@...> wrote:
          >
          > While you're dragging it keeps firing events and keeps on trying to
          > reload the SRC attribute of the iframe each pixel you drag it.
          >
          > In your startDrag function, save the src of the iframe into a
          > variable, and then re-apply the src of the iframe on endDrag.
          >
          > Or you could just remove the iframe entirely on startDrag, and then
          > re-initialize the iframe on endDrag. However; there will be a delay
          > because the iframe will need to re-download its content. Ultimately,
          > the performance of dragging the panel will be increased. I've also
          > noticed the performance decreases when dragging large images within a
          > panel.
          >
          > Sadly, setting display: none; or visibilty: hidden; has no effect on
          > increasing performance. The best thing to do is just swap in a  
          > (space) while you're dragging the panel, and when you endDrag, swap in
          > the content.
          >
          > --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@> wrote:
          > >
          > > Hi,
          > >
          > > YUI Panels are sort of an excellent base for building next generation
          > > Internet apps, however when creating large panels (500 x 600px) that
          > > host a bunch of stuff or IFRAMES from other sites I experience serious
          > > downgrades (especially in IE) while dragging a panel over another.
          > > IE simply loses grip of the title bar and draggin' is over then.
          > > Firefox performs better but also not optimal.
          > > I suspect it got to do with reflow behaviour - tried some DDProxy to
          > > get around it but to no avail.
          > > Anyone any solutions, work-arounds (no hacks plz).
          > >
          > > Kind Regards
          > >
          > > Frank
          > >
          >
        • Flinn2112
          And then again, just for information: After thinking it over, i decided to evaluate some other Framework to check wether this is just a YUI issue. I came
          Message 4 of 10 , Jan 30, 2008
            And then again, just for information:
            After thinking it over, i decided to evaluate some other
            Framework to check wether this is just a YUI issue.
            I came across this: http://demo.backbase.com
            They have an excellent ajax widget demo there.
            And I tried the 'Window Buttons' from the windows and dialogs section.
            You can edit the source code and I pasted some IFrames like this:

            <b:window label="Window without buttons" buttons="none" top="50px"
            left="50px" dragConstraint=".." resizeConstraint="..">
            <iframe src="http://www.google.de" width="500"
            height="600"></iframe> </b:window>

            E wollah - nothing worked no more - total dragg mess.
            So this just for info.

            Kind regards

            Frank






            --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@...> wrote:
            >
            > Thanks Jamie,
            >
            > excellent, I will fiddle around a bit with this.
            > One question about your 'save the src of the iframe' hint:
            > You mean saving the whole HTML to memory and then re-aply it at the
            > new position, is that right?
            > And then wondering: is there any article about why the content would
            > be downloaded again when repositioned?
            >
            >
            > Kind regards
            >
            > Frank
            >
            > --- In ydn-javascript@yahoogroups.com, "Jaime Bueza" <jbueza@> wrote:
            > >
            > > While you're dragging it keeps firing events and keeps on trying to
            > > reload the SRC attribute of the iframe each pixel you drag it.
            > >
            > > In your startDrag function, save the src of the iframe into a
            > > variable, and then re-apply the src of the iframe on endDrag.
            > >
            > > Or you could just remove the iframe entirely on startDrag, and then
            > > re-initialize the iframe on endDrag. However; there will be a delay
            > > because the iframe will need to re-download its content. Ultimately,
            > > the performance of dragging the panel will be increased. I've also
            > > noticed the performance decreases when dragging large images within a
            > > panel.
            > >
            > > Sadly, setting display: none; or visibilty: hidden; has no effect on
            > > increasing performance. The best thing to do is just swap in a  
            > > (space) while you're dragging the panel, and when you endDrag, swap in
            > > the content.
            > >
            > > --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@> wrote:
            > > >
            > > > Hi,
            > > >
            > > > YUI Panels are sort of an excellent base for building next
            generation
            > > > Internet apps, however when creating large panels (500 x 600px) that
            > > > host a bunch of stuff or IFRAMES from other sites I experience
            serious
            > > > downgrades (especially in IE) while dragging a panel over another.
            > > > IE simply loses grip of the title bar and draggin' is over then.
            > > > Firefox performs better but also not optimal.
            > > > I suspect it got to do with reflow behaviour - tried some DDProxy to
            > > > get around it but to no avail.
            > > > Anyone any solutions, work-arounds (no hacks plz).
            > > >
            > > > Kind Regards
            > > >
            > > > Frank
            > > >
            > >
            >
          • funcionalidade
            Hello Frank, What are your requirements to choose Panel, besides use iframes inside it? I mean, did you ever tried use Overlay instead? Panels are extensions
            Message 5 of 10 , Feb 2, 2008
              Hello Frank,

              What are your requirements to choose Panel,
              besides use iframes inside it?

              I mean, did you ever tried use Overlay instead?
              Panels are extensions of Overlays in YUI.
              No hacks necessary, but some assembly required ;)
              One step back may/can help us with a light solution.
              (yes, us - I'm facing similar experiences!)
              http://developer.yahoo.com/yui/container/#model

              You can get DD capabilies using just two (or one) lines of code:
              instantiating DD and setting a handler - real quick:
              > dd3 = new YAHOO.util.DD("dd-demo-3"); // instantiating
              > dd3.setHandleElId("dd-handle-3a"); // handler
              just like here:
              http://developer.yahoo.com/yui/examples/dragdrop/dd-handles.html
              or if you will not use this DD instance anywhere else
              > new YAHOO.util.DD("dd-demo-3").setHandleElId("dd-handle-3a"); // it
              works too, no variable/object to take care!

              Skinning!? Just rename or copy (from container.css)
              .yui-panel lines to .yui-ovelay!
              Overlays don't have close icons, but we can easily set them (.hide
              method). You can set key listeners, etc... like Panels.

              Limitations I found with this approach till now:
              NO 'underlay' properties: shadow, matte...
              I didn't tried use scrollbars yet.

              Overlay deserve good attention...
              http://developer.yahoo.com/yui/examples/container/overlay.html

              Give me a feedback.

              Regards,
              Leite
            • Jaime Bueza
              It can be safely assured that the YUI Developers have performance first in their mindset. :) Here s a suggestion: you could just set the iframe visibility to
              Message 6 of 10 , Feb 2, 2008
                It can be safely assured that the YUI Developers have performance first in their mindset. :)

                Here's a suggestion: you could just set the iframe visibility to "hidden" on startDrag, and on endDrag, you set its visibility back to "visible". This will save you another request because you don't have to redownload the content into the iframe, as it is already there, just hidden.

                The performance increase will be noticeable: Here's some documention (http://www.devx.com/tips/Tip/13638). If you scroll down, it says "Note that when an item is hidden, it doesn't receive events". This was one of the main problems when I was building http://www.xwned.com. Everytime you drag an iframe, the iframe will receive every onDrag event in association to your pixel threshold, so it'll try and redownload the content.

                If you set the iframe's visibility to hidden, voila--Increased performance when dragging iframes.

                --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@...> wrote:
                >
                > Thanks Jamie,
                >
                > excellent, I will fiddle around a bit with this.
                > One question about your 'save the src of the iframe' hint:
                > You mean saving the whole HTML to memory and then re-aply it at the
                > new position, is that right?
                > And then wondering: is there any article about why the content would
                > be downloaded again when repositioned?
                >
                >
                > Kind regards
                >
                > Frank
                >
                > --- In ydn-javascript@yahoogroups.com, "Jaime Bueza" jbueza@ wrote:
                > >
                > > While you're dragging it keeps firing events and keeps on trying to
                > > reload the SRC attribute of the iframe each pixel you drag it.
                > >
                > > In your startDrag function, save the src of the iframe into a
                > > variable, and then re-apply the src of the iframe on endDrag.
                > >
                > > Or you could just remove the iframe entirely on startDrag, and then
                > > re-initialize the iframe on endDrag. However; there will be a delay
                > > because the iframe will need to re-download its content. Ultimately,
                > > the performance of dragging the panel will be increased. I've also
                > > noticed the performance decreases when dragging large images within a
                > > panel.
                > >
                > > Sadly, setting display: none; or visibilty: hidden; has no effect on
                > > increasing performance. The best thing to do is just swap in a &nbsp;
                > > (space) while you're dragging the panel, and when you endDrag, swap in
                > > the content.
                > >
                > > --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@> wrote:
                > > >
                > > > Hi,
                > > >
                > > > YUI Panels are sort of an excellent base for building next generation
                > > > Internet apps, however when creating large panels (500 x 600px) that
                > > > host a bunch of stuff or IFRAMES from other sites I experience serious
                > > > downgrades (especially in IE) while dragging a panel over another.
                > > > IE simply loses grip of the title bar and draggin' is over then.
                > > > Firefox performs better but also not optimal.
                > > > I suspect it got to do with reflow behaviour - tried some DDProxy to
                > > > get around it but to no avail.
                > > > Anyone any solutions, work-arounds (no hacks plz).
                > > >
                > > > Kind Regards
                > > >
                > > > Frank
                > > >
                > >
                >
              • Jaime Bueza
                It can be safely assured that the YUI Developers have performance first in their mindset. :) Here s a suggestion: you could just set the iframe visibility to
                Message 7 of 10 , Feb 2, 2008
                  It can be safely assured that the YUI Developers have performance first in their mindset. :)

                  Here's a suggestion: you could just set the iframe visibility to "hidden" on startDrag, and on endDrag, you set its visibility back to "visible". This will save you another request because you don't have to redownload the content into the iframe, as it is already there, just hidden.

                  The performance increase will be noticeable: Here's some documention (http://www.devx.com/tips/Tip/13638). If you scroll down, it says "Note that when an item is hidden, it doesn't receive events". This was one of the main problems when I was building http://www.xwned.com. Everytime you drag an iframe, the iframe will receive every onDrag event in association to your pixel threshold, so it'll try and redownload the content.

                  If you set the iframe's visibility to hidden, voila--Increased performance when dragging iframes.

                  --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@...> wrote:
                  >
                  > Thanks Jamie,
                  >
                  > excellent, I will fiddle around a bit with this.
                  > One question about your 'save the src of the iframe' hint:
                  > You mean saving the whole HTML to memory and then re-aply it at the
                  > new position, is that right?
                  > And then wondering: is there any article about why the content would
                  > be downloaded again when repositioned?
                  >
                  >
                  > Kind regards
                  >
                  > Frank
                  >
                  > --- In ydn-javascript@yahoogroups.com, "Jaime Bueza" jbueza@ wrote:
                  > >
                  > > While you're dragging it keeps firing events and keeps on trying to
                  > > reload the SRC attribute of the iframe each pixel you drag it.
                  > >
                  > > In your startDrag function, save the src of the iframe into a
                  > > variable, and then re-apply the src of the iframe on endDrag.
                  > >
                  > > Or you could just remove the iframe entirely on startDrag, and then
                  > > re-initialize the iframe on endDrag. However; there will be a delay
                  > > because the iframe will need to re-download its content. Ultimately,
                  > > the performance of dragging the panel will be increased. I've also
                  > > noticed the performance decreases when dragging large images within a
                  > > panel.
                  > >
                  > > Sadly, setting display: none; or visibilty: hidden; has no effect on
                  > > increasing performance. The best thing to do is just swap in a &nbsp;
                  > > (space) while you're dragging the panel, and when you endDrag, swap in
                  > > the content.
                  > >
                  > > --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@> wrote:
                  > > >
                  > > > Hi,
                  > > >
                  > > > YUI Panels are sort of an excellent base for building next generation
                  > > > Internet apps, however when creating large panels (500 x 600px) that
                  > > > host a bunch of stuff or IFRAMES from other sites I experience serious
                  > > > downgrades (especially in IE) while dragging a panel over another.
                  > > > IE simply loses grip of the title bar and draggin' is over then.
                  > > > Firefox performs better but also not optimal.
                  > > > I suspect it got to do with reflow behaviour - tried some DDProxy to
                  > > > get around it but to no avail.
                  > > > Anyone any solutions, work-arounds (no hacks plz).
                  > > >
                  > > > Kind Regards
                  > > >
                  > > > Frank
                  > > >
                  > >
                  >
                • Jaime Bueza
                  Also, just to add on to my last post-- It s probably best to use the YUI Selector to find all , , , , and elements within
                  Message 8 of 10 , Feb 2, 2008
                    Also, just to add on to my last post--

                    It's probably best to use the YUI Selector to find all <img>, <object>, <applet>, <embed>, and <iframe> elements within the Panel and set their visibility on startDrag.

                    The reason for this is because these elements all have a high chance of decreasing your drag performance. So far, from what I've observed, dragging around text nodes are fast. Also, <table>'s kinda slow down performance.

                    --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@...> wrote:
                    >
                    > Thanks Jamie,
                    >
                    > excellent, I will fiddle around a bit with this.
                    > One question about your 'save the src of the iframe' hint:
                    > You mean saving the whole HTML to memory and then re-aply it at the
                    > new position, is that right?
                    > And then wondering: is there any article about why the content would
                    > be downloaded again when repositioned?
                    >
                    >
                    > Kind regards
                    >
                    > Frank
                    >
                    > --- In ydn-javascript@yahoogroups.com, "Jaime Bueza" jbueza@ wrote:
                    > >
                    > > While you're dragging it keeps firing events and keeps on trying to
                    > > reload the SRC attribute of the iframe each pixel you drag it.
                    > >
                    > > In your startDrag function, save the src of the iframe into a
                    > > variable, and then re-apply the src of the iframe on endDrag.
                    > >
                    > > Or you could just remove the iframe entirely on startDrag, and then
                    > > re-initialize the iframe on endDrag. However; there will be a delay
                    > > because the iframe will need to re-download its content. Ultimately,
                    > > the performance of dragging the panel will be increased. I've also
                    > > noticed the performance decreases when dragging large images within a
                    > > panel.
                    > >
                    > > Sadly, setting display: none; or visibilty: hidden; has no effect on
                    > > increasing performance. The best thing to do is just swap in a &nbsp;
                    > > (space) while you're dragging the panel, and when you endDrag, swap in
                    > > the content.
                    > >
                    > > --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@> wrote:
                    > > >
                    > > > Hi,
                    > > >
                    > > > YUI Panels are sort of an excellent base for building next generation
                    > > > Internet apps, however when creating large panels (500 x 600px) that
                    > > > host a bunch of stuff or IFRAMES from other sites I experience serious
                    > > > downgrades (especially in IE) while dragging a panel over another.
                    > > > IE simply loses grip of the title bar and draggin' is over then.
                    > > > Firefox performs better but also not optimal.
                    > > > I suspect it got to do with reflow behaviour - tried some DDProxy to
                    > > > get around it but to no avail.
                    > > > Anyone any solutions, work-arounds (no hacks plz).
                    > > >
                    > > > Kind Regards
                    > > >
                    > > > Frank
                    > > >
                    > >
                    >
                  • Jaime Bueza
                    Also, just to add on to my last post-- It s probably best to use the YUI Selector to find all , , , , and elements within
                    Message 9 of 10 , Feb 2, 2008
                      Also, just to add on to my last post--

                      It's probably best to use the YUI Selector to find all <img>, <object>, <applet>, <embed>, and <iframe> elements within the Panel and set their visibility on startDrag.

                      The reason for this is because these elements all have a high chance of decreasing your drag performance. So far, from what I've observed, dragging around text nodes are fast. Also, <table>'s kinda slow down performance.

                      --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@...> wrote:
                      >
                      > Thanks Jamie,
                      >
                      > excellent, I will fiddle around a bit with this.
                      > One question about your 'save the src of the iframe' hint:
                      > You mean saving the whole HTML to memory and then re-aply it at the
                      > new position, is that right?
                      > And then wondering: is there any article about why the content would
                      > be downloaded again when repositioned?
                      >
                      >
                      > Kind regards
                      >
                      > Frank
                      >
                      > --- In ydn-javascript@yahoogroups.com, "Jaime Bueza" jbueza@ wrote:
                      > >
                      > > While you're dragging it keeps firing events and keeps on trying to
                      > > reload the SRC attribute of the iframe each pixel you drag it.
                      > >
                      > > In your startDrag function, save the src of the iframe into a
                      > > variable, and then re-apply the src of the iframe on endDrag.
                      > >
                      > > Or you could just remove the iframe entirely on startDrag, and then
                      > > re-initialize the iframe on endDrag. However; there will be a delay
                      > > because the iframe will need to re-download its content. Ultimately,
                      > > the performance of dragging the panel will be increased. I've also
                      > > noticed the performance decreases when dragging large images within a
                      > > panel.
                      > >
                      > > Sadly, setting display: none; or visibilty: hidden; has no effect on
                      > > increasing performance. The best thing to do is just swap in a &nbsp;
                      > > (space) while you're dragging the panel, and when you endDrag, swap in
                      > > the content.
                      > >
                      > > --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@> wrote:
                      > > >
                      > > > Hi,
                      > > >
                      > > > YUI Panels are sort of an excellent base for building next generation
                      > > > Internet apps, however when creating large panels (500 x 600px) that
                      > > > host a bunch of stuff or IFRAMES from other sites I experience serious
                      > > > downgrades (especially in IE) while dragging a panel over another.
                      > > > IE simply loses grip of the title bar and draggin' is over then.
                      > > > Firefox performs better but also not optimal.
                      > > > I suspect it got to do with reflow behaviour - tried some DDProxy to
                      > > > get around it but to no avail.
                      > > > Anyone any solutions, work-arounds (no hacks plz).
                      > > >
                      > > > Kind Regards
                      > > >
                      > > > Frank
                      > > >
                      > >
                      >
                    • Flinn TwentyOneTwelve
                      Why, panels? Hm, decided so because of the need for resizing (derived a class for this), dragging, the neat close button. Well just a decision. I will think it
                      Message 10 of 10 , Feb 5, 2008
                        Why, panels?
                        Hm, decided so because of the need for
                        resizing (derived a class for this), dragging, the
                        neat close button.
                        Well just a decision.
                        I will think it over.

                        Kind regards

                        Frank


                        ____________________________________________________________________________________
                        Be a better friend, newshound, and
                        know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ
                      Your message has been successfully submitted and would be delivered to recipients shortly.