Cursor Direction

**dcr33** · 09-18-2011, 09:06 AM

The following program is meant to run in IE4+ but doesnot run in my IE8 browser.
What can be the problem with the code?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<script language='JavaScript' type='text/JavaScript'>
//Cursor Direction
//Move mouse to see the cursor direction

function fifteenth(e){seventeenth = document.body.scrollLeft+event.clientX;eighteenth = document.body.scrollTop+event.clientY;nineteenth = event.clientX;twentieth = event.clientY;first2(seventeenth,eighteenth);}document.onmousemove = fifteenth;var second2;var third2;var fifth2;var fourth2;var sixth2;var fifteenth3;var sixteenth3 = Array();sixteenth3[0] = 'n-resize';sixteenth3[1]='ne-resize';sixteenth3[2]='e-resize';sixteenth3[3]='se-resize';sixteenth3[4] = 's-resize';sixteenth3[5]='sw-resize';sixteenth3[6]='w-resize';sixteenth3[7]='nw-resize';
function first4(second4) {document.body.style.cursor = sixteenth3[second4];}
function first2(seventeenth4,third4) {second2 = seventeenth4;third2 = third4;sixth2 = second2 - fifth2;fifteenth3 = third2 - fourth2;
if ((sixth2 <  2) && (fifteenth3 < -2)) {first4(0);}
if ((sixth2 <  2) && (fifteenth3 >  2)) {first4(4);}
if ((sixth2 >  2) && (fifteenth3 <  2)) {first4(2);}
if ((sixth2 < -2) && (fifteenth3 <  2)) {first4(6);}
if ((sixth2 >  2) && (fifteenth3 >  2)) {first4(3);}
if ((sixth2 >  2) && (fifteenth3 < -2)) {first4(1);}
if ((sixth2 < -2) && (fifteenth3 >  2)) {first4(5);}
if ((sixth2 < -2) && (fifteenth3 < -2)) {first4(7);fifth2 = second2;fourth2 = third2;}}
</script>

</body>
</html>

Help please.

**jscheuer1** · 09-18-2011, 03:21 PM

Now should work in any modern browser, including IE 8:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cursor Direction Demo</title>
<script type="text/javascript">
/* <![CDATA[ */
//Cursor Direction
//Move mouse to see the cursor direction

;(function(){
	document.documentElement.style.height = '100%';
	var cursors = ['e-resize', 'n-resize', 'sw-resize', 'se-resize'], x1, y1, x2, y2, x3, y3;
	x2 = y2 = 0;
	function changecursor(index) {
		document.documentElement.style.cursor = cursors[index];
	}
	function directcursor(e) {
		e = e || event;
		x1 = e.clientX;
		y1 = e.clientY;
		x3 = x1 - x2;
		y3 = y1 - y2;
		if (x3 >  2 && y3 >  2 || x3 < -2 && y3 < -2) {changecursor(3);}
		else if (Math.abs(x3) >  2 && Math.abs(y3) >  2) {changecursor(2);}
		else if (x3 <  2 && Math.abs(y3) >  2) {changecursor(1);}
		else if (Math.abs(x3) >  2 && y3 <  2) {changecursor(0);}
		x2 = x1;
		y2 = y1;
	}
	document.onmousemove = directcursor;
})();
/* ]]> */
</script>
</head>
<body>

</body>
</html>

**dcr33** · 09-19-2011, 08:27 AM

Hi John
Thanks very much.

The code works!!
But thats altogether different code.
What about my earlier code? Can it not be modified so that it works like your code?

**jscheuer1** · 09-19-2011, 04:58 PM

It actually is the same code modified. The code in your post had a lot of unnecessary stuff going on, missed some essentials for modern browsers and used function and variable names that had no relationship to what they are or do.

For instance, although there are 8 directional cursors (from http://www.blooberry.com/indexdot/cs...mic/cursor.htm):

one for each side and each corner of a box, since there is no box, only four need be used. That allowed the sixteenth3 array (which I renamed to the much more logical cursors array and put in browser friendly [] notation) to be reduced to 4 items.

Another example is, since we only need to know where the cursor is moving relative to where it has just been, we don't need to know the scrollLeft or scrollTop state of the page. That would give us more information than we need, so that part was dropped.

The original code had two functions to get the current position and to run the function that sets the cursor's style, since we don't need the scroll state, these two could be combined.

The original code exclusively used the IE proprietary event model, I added in a mechanism to catch which was available (IE's or the standard model) and use that:

Code:

	function directcursor(e) {
		e = e || event;

The if tests in the original code all ran every time and were more numerous than required. By figuring out the logic involved I reduced them to 4 and created an if/else hierarchy that saves time on most iterations. Having just 4 saves time for all compared to the original. This is important for something that fires every time the mouse moves.

The original code exposed a lot of global variables and functions. I guess that's why they chose such weird names for them. I enclosed the code in a self executing anonymous function to shield it from this type of exposure. The only exposed parts are the onmousemove, that could be overridden by a later script on the same page (but that could be fixed if it's an issue), and the styles, these can almost always be overridden by clever css or subsequent scripting (that could be overcome by repeatedly appending stylesheets to the page, but the response time might suffer). The original has these same issues. In any case it's much more other script friendly and bulletproof than the original.

I think that about covers the modifications. If you have further questions, feel free to ask.

**dcr33** · 09-20-2011, 01:59 PM

ya I have several questions @ John.

1)why is there a semi-colon before the function keyword?
2)What does code this mean? -
/* <![CDATA[ */
3)I didn't get it -

Code:

function directcursor(e) {
		e = e || event;

4)What to do if I want to get single directional arrow instead of bi-directional arrows?

**Minos** · 09-20-2011, 03:32 PM

3) IE doesn't pass event information the same way.

The standard way is that the onmousemove passes the information about the event (mouse location, etc.) directly to the function. This is why he has function directcursor(e). e is the variable that holds that information. This is used by most browsers.

In IE, there is a variable called event that holds this information, and nothing is passed. In this case, e would hold no value. Saying e = e || event is basically like saying, if (e==null) e = event. Now, even if the browser is IE, e holds the information.

**jscheuer1** · 09-20-2011, 03:53 PM

A self executing function must begin on a fresh 'line' as determined by the browser's script parser. If you were to put other code for other things before it that wasn't properly terminated, without the semicolon there, that would break it. With other properly written code or if it's the only script on the page, it's not required, but it doesn't hurt anything.

Code:

/* <![CDATA[ */

is paired with:

Code:

/* ]]> */

at the end of the script. They do nothing for the script because they're each surrounded with the javascript comment tokens /* */. They're only there because the DOCTYPE you used for the page requires them for validation. They tell the browser and the validator that what's inside them isn't XHTML markup.

Standards compliant browsers (all pretty much except IE in this particular case) use the event model where an event object is passed to the event function as the last argument. MSIE uses the event - a globally available event object whenever an event occurs.

So, if the passed event (e) in the code is there, the browser uses that. If it's not, it's IE and uses the global event:

Code:

e = e || event;

means 'e equals e if it's there, or it equals event'.

There are some differences in what information is available in each, or at least what it's called and/or how it's accessed from the event object. But fortunately the clientX and clientY work the same in IE and others.

As far as I know there are no cursors that look like that. You would have to make your own custom cursors. But support for them is still uneven in the various browsers. Or you could make an absolute or fix position division to follow the cursor around. You would still see the cursor though, but in that division you could put any images of your choosing. Small .gif images with transparent backgrounds would be good, or alpha level .png (could look better), but if you want to support IE 6, that gets tricky. A nice touch would be to supply a transparent custom cursor so you only see your images. This would only work in those browsers which supposr the custom cursor, but the others woul still show your images and their cursor. And no matter what you do, if it's not an actual cursor supported by the browser's standards, when it passes in front of colors that don't contrast with it, it would be hard to see.

Thread: Cursor Direction

Thread Tools

Search Thread

Cursor Direction

Bookmarks

Bookmarks

Posting Permissions