Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello,
I want to display a popup dialog next to current mouse cursor. The behavior of the
dialog is similar with context menu but with more sophisticated controls on it.
For example, if users click on "rename" on the context menu, I want to display a
dialog to inquire the new name right at current mouse position.
I've tried to use "onClick" event, but it seems provide relative x,y only.
Is there any solution to this?
Thanks !!
Hi lendle,
Maybe you need to write some javascript code for capture the mouse position, check this:
http://www.zkoss.org/doc/devguide/ch07s19.html
Hi lendle,
From your requirement I don't see the need for getting x y position of the mouse,
You can achieve the same requirement by creating a new window component when your context menu (Menupopup) has been clicked. You can pass variables between different modal window by using set/getAttribute method.
If I am right and you need an example, please let me know by replying to this thread.
Hello,
thanks for the suggestions
I finally achieve the effect I want by registering a handler for javascript "onmousemove" event.
The javascript handler has references to zk textbox components through uuid and thus
(x, y) information captured by the handler can be passed to zk environment.
(x, y) information is important to my application since I want to control the location of some popup
dialog for convenience.
Furthermore, it appears this mechanism will fail for modal dialogs, because modal dialogs are always at
the center of the client screen. Is there any way to overcome this limitation?
By the way, the (x, y) information may be very useful for some situation, is there any plan for such feature?
Thanks!
lendle, I'm quite interested in your solution. If you would care to share the details of your implementation, I would appreciate it.
The current pop-up behavior operates on a delay after entering the element. I want the delay timer to start after the mouse stops moving. So I think I need the onmousemove handler as well as the x, y information.
Thanks.
/Daryl
Hello, below is the code snippet
the javascript handler part is actually modified from some examples found on the web but I
forget the link to the source
<script type="text/JavaScript">
var mouseXHolder=null;
var mouseYHolder=null;
function setHolder(idMouseXHolder, idMouseYHolder){
mouseXHolder=document.getElementById(idMouseXHolder);
mouseYHolder=document.getElementById(idMouseYHolder);
}
function requestFocus(idComponent){
document.getElementById(idComponent).focus();
}
document.onmousemove=function(_e){
if(mouseXHolder==null || mouseYHolder==null)
return;
if(document.all){
mouseXHolder.value=event.clientX;
mouseYHolder.value=event.clientY;
}else{
mouseXHolder.value=_e.clientX;
mouseYHolder.value=_e.clientY;
}
if (document.createEvent) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent( 'blur', false, false);
mouseXHolder.dispatchEvent(evt);
evt = document.createEvent('HTMLEvents');
evt.initEvent( 'blur', false, false);
mouseYHolder.dispatchEvent(evt);
var evt2 = document.createEvent('HTMLEvents');
evt2.initEvent( 'change', false, false);
mouseXHolder.dispatchEvent(evt2);
evt2 = document.createEvent('HTMLEvents');
evt2.initEvent( 'change', false, false);
mouseYHolder.dispatchEvent(evt2);
} else if (document.createEventObject) {
mouseXHolder.fireEvent('onblur');
mouseXHolder.fireEvent('onchange');
mouseYHolder.fireEvent('onblur');
mouseYHolder.fireEvent('onchange');
}
return true;
};
</script>
<zk:page style="height: 100%">
<zk:zscript>
void onWindowCreate(){
Clients.evalJavaScript("setHolder('"+mouseX.getUuid()+"', '"+mouseY.getUuid()+"');");
}
</zk:zscript>
<zk:borderlayout>
<zk:west style="width: 30%">
<zk:window id="treeWindow" onCreate="onWindowCreate();">
<zk:textbox id="mouseX" visible="true" value="0"/>
<zk:textbox id="mouseY" visible="true" value="0"/>
</zk:window>
</zk:west>
<zk:center>
<zk:textbox multiline="true" id="console" rows="50"/>
</zk:center>
</zk:borderlayout>
</zk:page>
Hi lendle, thanks for the code. I took my own stab at it (also borrowing code from the web). I see you used clientX/Y. I think that's the position within the browser window rather than the page. IOW, it doesn't work when the page scrolls. Here is a fairly cross-browser solution I stole from
http://www.howtocreate.co.uk/tutorials/javascript/eventinfo
var mouseX;
var mouseY;
if (! evt) evt = window.event;
if (evt) {
if (typeof(evt.pageX) == 'number') {
mouseX = evt.pageX;
mouseY = evt.pageY;
} else if (typeof (evt.clientX) == 'number') {
mouseX = evt.clientX;
mouseY = evt.clientY;
if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
mouseX += document.body.scrollLeft;
mouseY += document.body.scrollTop;
} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
mouseX += document.documentElement.scrollLeft;
mouseY += document.documentElement.scrollTop;
}
}
}
(JavaScript)
comm.sendUser(myComponentElement, 'onMyEvent', mouseX, mouseY);
(Java/server side)
myComponent.addEventListener("onUser", new EventListener() {
public void onEvent(Event event) throws Exception {
String[] args = null;
if (event.getData() != null) {
if (event.getData() instanceof String[]) {
args = (String[]) event.getData();
} else {
args = new String[1];
args[0] = event.getData().toString();
}
}
if (args != null) {
String eventName = args[0];
if (eventName.equalsIgnoreCase("onMyEvent")) {
int mouseX = Integer.parseInt(args[1]);
int mouseY = Integer.parseInt(args[2]);
...
}
}
}
});
/Daryl
Hello,
I want to display popup at center to an image component which of size 70X320 (height X Width), is it possible to get the x,y position of an image....
I am displaying popup on mouse click anywhere on screen
Thanks
Asked: 2008-09-24 06:33:17 +0800
Seen: 2,416 times
Last updated: Jan 03 '12
