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

[Deepak Singh]

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]

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.

See this SO post for details: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

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]

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]

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.