Is it possible to have a div overlay something, but not catch the clicks (ie, "transparent" to clicks?)

[darkflame]

I suspect the answer here might just be "no", but before I do anything
too eleborate I thought Id ask.

Basicly I have a page with a lot of widgets, imagine if I wanted to
tint the screen slightly - for example a 50% blue overlay. Yet I still
want the widgets all clickable/interactable as normal.
I know I can somewhat just pass an event to a specific widget, but is
there a way to pass it to anything that happens to be under as if the
overlay isnt there?

Thanks,
Thomas

[David Given]

On 08/10/11 11:48, darkflame wrote:
[...]

> Basicly I have a page with a lot of widgets, imagine if I wanted to
> tint the screen slightly - for example a 50% blue overlay. Yet I still
> want the widgets all clickable/interactable as normal.

You can do it by setting pointer-events:none on the overlay DIV... but I
don't know what the browser support is like for this. Here's a demo:

http://robertnyman.com/css3/pointer-events/pointer-events.html

--
┌─── ｄｇ＠ｃｏｗｌａｒｋ．ｃｏｍ ───── http://www.cowlark.com ─────
│
│ "Under communism, man exploits man. Under capitalism, it's just the
│ opposite." --- John Kenneth Galbrith

[darkflame]

hmz...something to keep an eye on, but sadly IE and Opera dont support
it yet;
http://caniuse.com/pointer-events

>  signature.asc
> < 1KViewDownload

[darkflame]

Still struggleing with a solution for this.
My knowledge of event handeling clearly isnt good enough;

a) Is it possible to pass an event (or all events) to a parent/
container element and have it automaticaly passed on to all its
children?

b) would this event be triggered under the normal conditions of the
children, or would it just trigger under the parents conditions.
That is, if I pass a event that happens to be a mouse over event from
parent to child, would it trigger if the mouse isnt actualy over the
child? (but merely over the parent). Or would it still correctly only
fire if its over the child.

My end goal remains the same; a method to have a overlay which doesnt
block the event handeling of elements under it.
I'm hoping its possible by somehow passing events down from the
overlay to, say, a container with everything else.

The long winded way to do it seems to be manualy checking all the
elements, their co-ordinates, and calculating mouse over/out/click
events myself. Surely theres an easier method?

Thanks,
Thomas

[darkflame]

I found this;
http://www.vinylfox.com/forwarding-mouse-events-through-layers/

It seems the agreed way to do this at the moment.
I only hope its adaptable to GWT :-/

[darkflame]

Ok, dont mean to spam, but I think I'm getting near a solution and it
could be usefull to other people.

Based on;
http://groups.google.com/group/gwt-cal/browse_thread/thread/7e756151acbd9b14

I came up with this;


/** a class designed to catch events and forward them to a panel under
it
* uses the techique specified in;
* http://www.vinylfox.com/forwarding-mouse-events-through-layers/
* In future, css3 might be used instead to make this whole thing more
simple **/
public class SpiffyOverlay extends FocusPanel {


static Logger Log = Logger.getLogger("SpiffyOverlay");

public SpiffyOverlay(Widget forwardEventsToThis){

//set temp background
this.getElement().getStyle().setBackgroundColor("blue");
this.getElement().getStyle().setOpacity(0.5);

this.add(new Label("test"));
this.setSize("100%", "100%");

sinkEvents(Event.ONMOUSEUP | Event.ONDBLCLICK | Event.ONCONTEXTMENU
| Event.ONCLICK | Event.ONMOUSEOVER | Event.ONMOUSEOUT);

}

//capture events
@Override
public void onBrowserEvent(Event event){
Log.info("______________________onBrowserEvent from overlay");
//event.cancelBubble(true);// This will stop the event from being
// propagated
DOM.eventCancelBubble(event, true);



event.preventDefault();

switch (DOM.eventGetType(event)) {

case Event.ONCLICK:

Log.info("________________________________________________________Event.ONCLICK
");


int x = DOM.eventGetClientX(event);
int y = DOM.eventGetClientY(event);

Element clickedElement =
DOM.eventGetCurrentTarget(event);

// temporarily hide the appointment canvas
//clickedElement.setAttribute("style",
"visibility:hidden");

clickedElement.getStyle().setVisibility(Visibility.HIDDEN);

// use a native JavaScript method to find the element at
the doubleclick event
Element elementBehind = getElementFromPoint(x, y);


Log.info("________________________________________________________restoring
visibility ");

// restore the appointment canvas

clickedElement.getStyle().setVisibility(Visibility.VISIBLE);

Log.info("________________________________________________________found
element : "+elementBehind.getParentElement().getOffsetWidth());



Log.info("________________________________________________________firing
event ");

//copy the event
NativeEvent eventcopy =
Document.get().createClickEvent(event.getTypeInt(),
event.getScreenX(),
event.getScreenY(),
event.getClientX(),
event.getClientY(),
event.getCtrlKey(),
event.getAltKey(),
event.getShiftKey(),
event.getMetaKey());

elementBehind.getParentElement().dispatchEvent(eventcopy);

elementBehind.getParentElement().setTitle("test title
from overlay");



}


}

private native Element getElementFromPoint(int x, int y) /*-{
return $wnd.document.elementFromPoint(x, y);
}-*/;


}


This works for basic click events, allthough I cant seem to adapt it
for other types.

The problem is I need to copy the event and I have no idea how to do
that for anything other then clicks. Document has "createClickEvent"
but nothing thats just "createEvent".

If I just parse the event on without copying I get a
"EventException.DISPATCH_REQUEST_ERR (1)" error.