Topic: cursor position |
|
---|---|
Author | Thread |
Paranoid (IV) Inmate From: INFRONT OF MY PC |
posted 09-02-2006 16:24
i'm trying to detect the cursorpostion on click heres my js code: var IE = document.all?true:false var tempX = 0 var tempY = 0 if(IE){ // grab the x-y pos.s if browser is IE tempX = event.clientX + document.body.scrollLeft tempY = event.clientY + document.body.scrollTop }else{ // grab the x-y pos.s if browser is NS tempX = e.pageY tempY = e.pageX }
|
Paranoid (IV) Inmate From: Norway |
posted 09-02-2006 16:35
introspect the event object to see which property to pick. code: bla = '' for( key in e ) bla += key +' = '+ e[key +'\n'; alert( bla ) Oh, and you shouldn't try to detect a browser, but some features. Hence your code should be: code: var e = event||e; tempX = document.body.scrollLeft+ (e.clientX||e.pageX); tempY = document.body.scrollTop+ (e.clientY||e.pageY); |
Paranoid (IV) Inmate From: INFRONT OF MY PC |
posted 09-02-2006 16:50
ok the somethiong strange going on code: var tempX = 0; var tempY = 0; //step1 var e = event||e; //step2 tempX = document.body.scrollLeft+ (e.clientX||e.pageX); tempY = document.body.scrollTop+ (e.clientY||e.pageY);
|
Paranoid (IV) Inmate From: Norway |
posted 09-02-2006 17:12 |
Paranoid (IV) Inmate From: INFRONT OF MY PC |
posted 09-02-2006 17:26
ok something is completely wrong here i uploded it if it helps ..it's probably me thinking wrong, this happens |
Maniac (V) Inmate From: |
posted 09-02-2006 17:54
Works in Op and IE. probably an event bubbling issue. Care to try to window.status the x/y offsets? I am in a lazy, but still supportive mood.. |
Paranoid (IV) Inmate From: Norway |
posted 09-02-2006 18:01
/me fires FireFox and will fix the script. Hold on. |
Maniac (V) Inmate From: |
posted 09-02-2006 18:25
@poi, "give a man a fish.." I don't need to learn event handlers. |
Paranoid (IV) Inmate From: Norway |
posted 09-02-2006 18:41
Blacknight: I got the CSS+JS thing working. It takes ~4 lines of JS. |
Paranoid (IV) Inmate From: INFRONT OF MY PC |
posted 09-02-2006 19:42
ok will give it a nother go |
Paranoid (IV) Inmate From: INFRONT OF MY PC |
posted 09-02-2006 20:25
ok poi i surender could you hand over that bit of code ...if you could give an explanation to it ..would be great thanks! |
Maniac (V) Inmate From: |
posted 09-02-2006 20:28
(it's all up to poi now. - suspense - I personally would give an answer and a little explanation about the why's. In the meantime, if I was bk I'd google |
Paranoid (IV) Inmate From: Norway |
posted 09-02-2006 20:33
that was quick code: <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'> <html> <head> <style type='text/css'> #theUl .details { display:none; } #theUl.community #community .details, #theUl.management #management .details, #theUl.blogs #blogs .details { display:inline; position:relative; top:1em; left:-.5em; background:pink; padding:.25em; } </style> <script type='text/javascript'> function showdetails( detail ) { if( theUlHandle = document.getElementById( 'theUl' ) ) theUlHandle.className = theUlHandle.className==detail?'':detail; document.body.id = document.body.id; // force a redraw, don't ask } </script> </head> <body> <ul id='theUl'> <li id='community'> <a href='#' onclick='showdetails("community")'>community</a> <div class='details'> <a href='http://en.wikipedia.org/wiki/community'>wikipedia:community</a> </div> </li> <li id='management'> <a href='#' onclick='showdetails("management")'>management</a> <div class='details'> <a href='http://en.wikipedia.org/wiki/management'>wikipedia:management</a> </div> </li> <li id='blogs'> <a href='#' onclick='showdetails("blogs")'>blogs</a> <div class='details'> <a href='http://en.wikipedia.org/wiki/blogs'>wikipedia:blogs</a> </div> </li> </ul> </body> </html> Do you need some explanations ? |
Paranoid (IV) Inmate From: INFRONT OF MY PC |
posted 09-02-2006 20:45
why this: code: #theUl.community #community .details, #theUl.management #management .details, #theUl.blogs #blogs .details
|
Paranoid (IV) Inmate From: Norway |
posted 09-02-2006 20:50 |
Paranoid (IV) Inmate From: INFRONT OF MY PC |
posted 09-02-2006 20:51
yes but if this list gets expand to about 100 entries ..thats alot of css |
Paranoid (IV) Inmate From: Norway |
posted 09-02-2006 20:56
Ok you've got a point. |
Paranoid (IV) Inmate From: INFRONT OF MY PC |
posted 09-02-2006 20:57
not exactly |
Paranoid (IV) Inmate From: Norway |
posted 09-02-2006 21:23
code: <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'> <html> <head> <style type='text/css'> .details { display:none; position:relative; top:1em; left:-.5em; background:pink; padding:.25em;} } </style> <script type='text/javascript'> detailsHandle = null function showdetails( where ) { // search the 'details' around the tag that called this function while( where && where.className!='details' ) where = where.nextSibling; // toggle the display of the new 'details' if( where ) where.style.display = where.style.display!='inline'?'inline':'none'; // hide the previous 'details' if( detailsHandle && where!=detailsHandle ) detailsHandle.style.display = 'none'; // remember the handle of the new 'details' detailsHandle = where document.body.id = document.body.id; // force a redraw, don't ask } </script> </head> <body> <ul> <li> <a href='#' onclick='showdetails(this)'>community</a> <div class='details'> <a href='http://en.wikipedia.org/wiki/community'>wikipedia:community</a> </div> </li> <li> <a href='#' onclick='showdetails(this)'>management</a> <div class='details'> <a href='http://en.wikipedia.org/wiki/management'>wikipedia:management</a> </div> </li> <li> <a href='#' onclick='showdetails(this)'>blogs</a> <div class='details'> <a href='http://en.wikipedia.org/wiki/blogs'>wikipedia:blogs</a> </div> </li> </ul> </body> </html> |
Paranoid (IV) Inmate From: INFRONT OF MY PC |
posted 09-02-2006 21:28
may i call you my god?? |