How to find that an element is now in view on the screen

48 views
Skip to first unread message

Deepak Singh

unread,
Apr 29, 2012, 4:40:53 PM4/29/12
to google-we...@googlegroups.com, gwtquery
Hi,

Suppose i have an HtmlPanel or a DivElement and i want to know that while scrolling up/down, this particular element is  viewable on the screen by user.

It should not be out of sight even if attached to the DOM.

Thanks
Deepak Singh

Joseph Lust

unread,
Apr 30, 2012, 9:48:04 AM4/30/12
to google-we...@googlegroups.com, gwtquery
There is no built in browser mechanism to achieve this, however you can look at the offsets of the target element and its containing element and deduce it yourself.


Also, note that the getClientRects() DOM method can also give you the bounding box information. Still, you'll need to do the math yourself to see if the element is visible or not.


If you want to have something always visible however, why have it in a scroll panel? Why not just place in an absolute position so that it does not scroll?


Sincerely,
Joseph

Julien Dramaix

unread,
May 2, 2012, 11:48:15 AM5/2/12
to gwtq...@googlegroups.com, google-we...@googlegroups.com
With GwtQuery :

import static com.google.gwt.query.client.GQuery.$;
import static com.google.gwt.query.client.GQuery.window;

...

//you can also use a GQuery object wrapping the element
public boolean isScrolledIntoView(Element elem)
{
int docViewTop = $(window).scrollTop();
int docViewBottom = docViewTop + $(window).height();

int elemTop = $(elem).offset().top;
int elemBottom = elemTop + $(elem).height();

return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
}


call this method to know if the elem is entirely visible on the screen
inside your scroll event handler. For adding a scroll event handler,
use the scroll method:

$(window).scroll(new Function(){
public void f(){
//put your code here
}
});

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

Jonathan Franchesco Torres Baca

unread,
May 2, 2012, 12:17:17 PM5/2/12
to google-we...@googlegroups.com
pnlContenedor.getElement().getStyle().setWidth(Window.getClientWidth(), Unit.PX);
pnlContenedor.getElement().getStyle().setHeight(Window.getClientHeight()-20, Unit.PX);

Widget=FlowPanel=pnlContenedor

2012/5/2 Julien Dramaix <julien....@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.


Reply all
Reply to author
Forward
0 new messages