Topic: cursor position (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=28384" title="Pages that link to Topic: cursor position (Page 1 of 1)" rel="nofollow" >Topic: cursor position <span class="small">(Page 1 of 1)</span>\
 
Blacknight
Paranoid (IV) Inmate

From: INFRONT OF MY PC
Insane since: Dec 2001

 posted 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
		}


it workes fine with IE but wont work for firefox whats going wrong???
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted 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);

I've not tested that code, but well you see the point.
Blacknight
Paranoid (IV) Inmate

From: INFRONT OF MY PC
Insane since: Dec 2001

 posted 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);



the script will get to step1 but will not get to step2 in ff. it workes nicely in IE

checked it by inserting alerts

(Edited by Blacknight on 09-02-2006 16:51)
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 09-02-2006 17:12

it should certainly be:

code:
function eventHandler( e )
{
    var e = e||event;
    // your code
}
Blacknight
Paranoid (IV) Inmate

From: INFRONT OF MY PC
Insane since: Dec 2001

 posted 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
http://www.digitalwright.net/bilder/wikitest.htm
_Mauro
Maniac (V) Inmate

From:
Insane since: Jul 2005

 posted 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..
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 09-02-2006 18:01

/me fires FireFox and will fix the script. Hold on.

Meanwhile, you should bare in mind that you could put the details of each section as a children in the LI and use some className switch on the UL to change their visibility

_Mauro: check the code




(Edited by poi on 09-02-2006 18:12)
_Mauro
Maniac (V) Inmate

From:
Insane since: Jul 2005

 posted posted 09-02-2006 18:25

@poi, "give a man a fish.." I don't need to learn event handlers.

With a window.status like I proposed, he'd see if his event is fired at all,
and if that's the case, he'd also see what the values are.

But I have given it a glance and I see 3 possible causes:
1) he uses IE compliant objects in his evaluations... the || part should
be isolated to be a succesful browser specific test.
2) event bubbling, the event gets "swallowed" before popping back
3) event listeners, shouldn't he avoid the "onclick" syntax for better options,
like dynamically set event listeners?
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 09-02-2006 18:41

Blacknight: I got the CSS+JS thing working. It takes ~4 lines of JS.

Ok, in the "Teach how to fish, don't give a fish" tradition, I'll let you give it a try and if you really struggle I'll post the source code.

*hint* use position:relative; on the 'detail' TAGs to not mess with the UL and position the details relatively to the label of the LIs.



(Edited by poi on 09-02-2006 19:04)
Blacknight
Paranoid (IV) Inmate

From: INFRONT OF MY PC
Insane since: Dec 2001

 posted posted 09-02-2006 19:42

ok will give it a nother go
Blacknight
Paranoid (IV) Inmate

From: INFRONT OF MY PC
Insane since: Dec 2001

 posted 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!
_Mauro
Maniac (V) Inmate

From:
Insane since: Jul 2005

 posted 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
"javascript event bubbling" "mouse event" whatever and would check some other snippets. But then it really is up to you guys - I have this headache and 10000 things to do)
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted 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 ?

Notice it could be cleaner and ideally the details should be visible by default and hidden onload so that the page is accessible even with JavaScript OFF and CSS ON.



(Edited by poi on 09-02-2006 20:35)
Blacknight
Paranoid (IV) Inmate

From: INFRONT OF MY PC
Insane since: Dec 2001

 posted posted 09-02-2006 20:45

why this:

code:
#theUl.community	#community	.details,
#theUl.management	#management	.details,
#theUl.blogs		#blogs		.details



why not all one class??
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 09-02-2006 20:50

To select a particular .details among those in #theUl. Applying a class to #theUl let you filter which .details to display.
Blacknight
Paranoid (IV) Inmate

From: INFRONT OF MY PC
Insane since: Dec 2001

 posted posted 09-02-2006 20:51

yes but if this list gets expand to about 100 entries ..thats alot of css
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted posted 09-02-2006 20:56

Ok you've got a point.
I said the whole thing can be cleaner.
That's not an excuse but I didn't thought you wanted to expand the list.

You could get rid of the CSS selector jabbi jabba by passing this to the showdetails( what ) function which would traverse the DOM to display the details and hide the previously displayed deatils.

Do you see how to do that ?
Blacknight
Paranoid (IV) Inmate

From: INFRONT OF MY PC
Insane since: Dec 2001

 posted posted 09-02-2006 20:57

not exactly
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 posted 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>

Still unclear ?
Blacknight
Paranoid (IV) Inmate

From: INFRONT OF MY PC
Insane since: Dec 2001

 posted posted 09-02-2006 21:28

may i call you my god??

thanks! tanks a lot ... now i will study it to know exactly what you did and how it workes


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail