Invisible Elements Rendering

22 views
Skip to first unread message

Daniel Ribeiro

unread,
Aug 22, 2010, 1:38:34 AM8/22/10
to jLayout
As far as i know, jLayout, doesn't work with hidden elements, as they
do not have dimensions visible to jquery (it was mentioned on some
other thread). Using far left out mentioned by jquery ui's
documentation (http://jqueryui.com/demos/tabs/), and setting
properties ' position: absolute; left: -10000px; ' enable the slow
generation of the elements offside, without showing faulty transioning
versions. This is a common motif on layout frameworks based on jquery
(like this:
http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/b65bfa2a8511dbfb/c7bc1d71cd78f63b?lnk=gst&q=invisible#c7bc1d71cd78f63b).

However, Ext-js seem to be to handle them (the example:
http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html).

The queston: is it possible to modify jLayout so that it can handle
hidden element generation more gracefully, like Ext-js? Or is it too
hard wired into the framework?

Bram Stein

unread,
Sep 5, 2010, 11:09:39 AM9/5/10
to jla...@googlegroups.com
Hi,

Sorry for the late response---I'm on vacation (in China.) To answer
your question: jLayout is a rather low level library, it does not
dictate how you create elements, hide or show them. All it does is
measure elements and position them according to the layout manager you
have chosen.

To lay out a "hidden" element, you'll have to create it, add it to the
DOM, move it offscreen, and then measure it. I'm fairly certain ExtJS
also does it that way (although it hides the actions from you.)

Let me know if you have any other questions or if wasn't clear,

Best,

Bram

> --
> You received this message because you are subscribed to the Google Groups "jLayout" group.
> To post to this group, send email to jla...@googlegroups.com.
> To unsubscribe from this group, send email to jlayout+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/jlayout?hl=en.
>
>

Daniel Ribeiro

unread,
Sep 5, 2010, 2:59:02 PM9/5/10
to jLayout
Hi,

The left out technique is useful, but then it adds 2 other phases for
dynamic elements: create the html, insert in the dom *hidden, apply
all the jquery plugins to your heart's content, !!new move left out,
show the elements, !!new move back in

In the end, we opted to create simple HBox and VBox using divs and
percentile dimensions. Simple, clean, flexible, and if we want to
change the percentile dimensions to use the original' body values (or
the container's dimensions), we can do this all without ever inserting
things in the dom. Which also means it is more testable.

Thanks for the reply though.
- Daniel

On Sep 5, 12:09 pm, Bram Stein <b.l.st...@gmail.com> wrote:
> Hi,
>
> Sorry for the late response---I'm on vacation (in China.) To answer
> your question: jLayout is a rather low level library, it does not
> dictate how you create elements, hide or show them. All it does is
> measure elements and position them according to the layout manager you
> have chosen.
>
> To lay out a "hidden" element, you'll have to create it, add it to the
> DOM, move it offscreen, and then measure it. I'm fairly certain ExtJS
> also does it that way (although it hides the actions from you.)
>
> Let me know if you have any other questions or if wasn't clear,
>
> Best,
>
> Bram
>
> On Sun, Aug 22, 2010 at 7:38 AM, Daniel Ribeiro <dan...@gmail.com> wrote:
> > As far as i know, jLayout, doesn't work with hidden elements, as they
> > do not have dimensions visible to jquery (it was mentioned on some
> > other thread). Using far left out mentioned by jquery ui's
> > documentation (http://jqueryui.com/demos/tabs/), and setting
> > properties ' position: absolute; left: -10000px; ' enable the slow
> > generation of the elements offside, without showing faulty transioning
> > versions. This is a common motif on layout frameworks based on jquery
> > (like this:
> >http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/...).
>
> > However, Ext-js seem to be to handle them (the example:
> >http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-brows...).
Reply all
Reply to author
Forward
0 new messages