Prepare!

Lee Harvey's Zombie Hit Parade

Enhance Opera's mouse cursor over text

, , , , , ,

Ever wish Opera's mouse cursor behaved like Firefox's or MSIE's in web pages? You know, when you hover over text in a web page, the cursor actually changes to a meaningful text caret, rather than remaining a stupid old default NW mouse cursor.

Usability experts say that text carets (vertical mouse cursor) should be used as a visual feedback mechanism when underlying text can be selected. Plus, text carets do not obscure underlying text, like the default NW mouse cursor does. Personally, this is just one Opera pet peeve solved with User JavaScript.

So, with my latest UserJS script (shown below), now you too can have this 'smart' mouse cursor feature in Opera!

Keep in mind, this script is currently non-optimized for extremely large pages, or pages with poorly written HTML markup and/or scripts. Regardless, it does seem to work pretty well on most HTTP sites.

Download/view the textNodes.js script
window.addEventListener("load",
	function(event) {
		var body = document.getElementsByTagName("BODY");
		if (!body) return;
		if (body.length) body = body[0];

		var isIgnored = function(node) {
			var bad = /^(SCRIPT)|(STYLE)|(OPTION)|(TEXTAREA)|(INPUT)|(\#cdata\-section)|(\#comment)$/i;
			var result = false;
			while (node && !result) {
				result = (node.nodeName.match(bad) || 
				         ((node.nodeName == "A") && node.href));
				node = node.parentNode;
			}
			return result;
		}

		var nodeIterator = document.createNodeIterator( 
			body, 
			NodeFilter.SHOW_TEXT, 
			{ acceptNode : function (node) {
				return (/\S+/.test(node.data) && !isIgnored(node)) ?
					NodeFilter.FILTER_ACCEPT :
					NodeFilter.FILTER_REJECT;
			  }
			}, 
			true
		);

		var a = new Array();
		var textNode;
		while ((textNode = nodeIterator.nextNode())) { 
			if (!textNode.parentNode.style) continue;
			if (textNode.parentNode.style.cursor != "") continue;
			a.push(textNode);
		}

		if (!a.length) return;
		var ss = false;
		var sheet = null;
		for (var i = 0; i < document.styleSheets.length; i++) {
			sheet = document.styleSheets[i];
			ss = (!sheet.media || !sheet.media.length);
			if (ss) break;
			for (var j = 0, m; m = sheet.media[j]; j++) {
				ss = (m.match(/^(\*)|(all)|(screen)$/i));
				if (ss) break;
			}
		}

		if (ss) sheet.insertRule(
			"SPAN.crsrTxt { \
			font: inherit !important; \
			color: inherit !important; \
			background: none !important; \
			padding: 0 0 0 0 !important; \
			margin: 0 0 0 0 !important; \
			clear: none !important; \
			z-index: inherit !important; \
			float: none !important; \
			display: inline !important; \
			cursor: text !important; }", 0);

		while ((textNode = a.pop())) {
			var span = document.createElement("span");
			if (ss)	span.className = "crsrTxt";
			else {
				span.style.color = "inherit";
				span.style.background = "none";
				span.style.padding = "0 0 0 0";
				span.style.margin = "0 0 0 0";
				span.style.clear = "none";
				span.style.zIndex = "inherit";
				span.style.float = "none";
				span.style.display = "inline";
				span.style.cursor = "text";
			}
			textNode.parentNode.insertBefore(span, textNode);
			span.appendChild(textNode);
		}
	}, 0);

I'll keep this blog entry updated to reflect the most recent version of the script, so stay tuned.

Known issue:
  • Script may not work on poorly coded HTML and JavaScript websites (foxnews.com)
  • There's a known crash bug in Opera 9.20 when using this script on newegg.com
  • By default, UserJS scripts do not run on HTTPS/SSL pages, unless changed by users

Updated: 6/3/2010 - This squeaky wheel finally found some grease. Fixed for Opera 10.53!

BTW, feedback is always appreciated.

Enjoy.

UserJS fix for Yahoo!'s global search box stealing keystrokesUserJS for Belastingdienst.nl

Comments

Øyvind ØstlundNoteMe Sunday, March 4, 2007 1:01:55 AM

To be honest, I have never really noticed it before. But now when you mention it, I can't stop thinking about it. You really forced me into adding that functionality now bigsmile


Cheers,
- ØØ -

David Cowelldavidcowell Thursday, April 5, 2007 6:52:24 AM

Does this javascript fall into the same crack that the .ani exploit does? Just curious before I start using it.

Lee HarveyLee_Harvey Wednesday, April 11, 2007 1:15:31 PM

-- Does this javascript fall into the same crack that the .ani
-- exploit does? Just curious before I start using it.

No.

This UserJS script simply uses the default text/caret cursor as specified by the user/OS. The .ani cursor exploit requires an infected .ani file to be downloaded and previewed on an unpatched Windows system.

To obtain the Windows patch, simply visit Windows Updates with IE:
http://windowsupdate.microsoft.com

Chojiro Thursday, January 31, 2008 11:32:37 PM

You can make the cursor change if you want. Or you could just change the colour of the text underneath. You know on some sites where you have a list of options, and you roll over them and they all flash/glow, that's what I'd do. Problem is if it's laggy, which is really annoying.

Edit: Oops, just realised this is old. Oh well.

dapxin Tuesday, March 3, 2009 6:27:02 AM

does it still work ?

Lee HarveyLee_Harvey Tuesday, March 3, 2009 12:48:15 PM

Yes, it still works (sometimes).

Save the script to a folder, then specify that folder (not filename) at Preferences > Advanced > Content > JavaScript Options... > User JavaScript files

You can effectively disable this script by using site-specific preferences, and declaring a different User JavaScript files folder location. If you encounter issues on a site, right-click on the page, select "Edit Site Preferences...", goto the "Scripting" tab, and change the "User JavaScript files" folder location.

As mentioned in the "Known Issues" above, the script may not work on poorly-coded HTML and JavaScript websites. Also, if the content already specifies a cursor for its display, then this script does not override the author's original intent.

And for large, complex web pages, there may be a slight performance hit of 1-4 seconds after the page has loaded.

My original intent for this script was simply to provide a proof-of-concept for Opera; to display cursors more like IE and Mozilla browsers.

In general, this script is not intended to change the look-and-feel of the author's original underlying content, only the mouse cursor.

dapxin Tuesday, March 3, 2009 6:04:12 PM

Yeah, found out it works in the end, but the drag on some websites isn't worth the trouble, for my family computer.

I hope they implement it in O10.

Lee HarveyLee_Harvey Wednesday, March 4, 2009 12:09:15 AM

I agree. For older PCs, this particular proof-of-concept script might not be worth the extra overhead when visiting larger websites.

mdajobs Tuesday, November 17, 2009 5:33:03 AM

Why I never noticed that and now it's hitting me in the face. Perhaps ignorance is sometimes bliss, and if that were the case it seems we'd have more happy people.

Thank you and that's a nice little routine you wrote. How did you ever figure that out?

While I followed your instructions, its not working for me. I know I followed them right because I tried to change the folder name after setting the preferences, just in case the space in the folder name was causing the problem, and Windows complained that it was being used.

precisely how does Opera know how to reach your event handler in textNotes.js?


;-))

Lee HarveyLee_Harvey Wednesday, December 23, 2009 1:59:49 PM

First, apologies for the late response.

I figured it out by reading-over Opera's UserJS Tutorial (over-and-over again): http://www.opera.com/browser/tutorials/userjs/using/

Also, the tutorials at UserJS.org also helped: http://userjs.org/help/tutorials/

In fact, UserJS.org has a nice article describing how to install UserJS scripts, if you are still having problems: http://userjs.org/help/installation

In general, Opera simply loads all *.js files from the folder specified by:

opera:config#UserPrefs|UserJavaScriptFile

...or Preferences> Advanced tab> Content section> JavaScript Options... button> User JavaScript folder.

To disable a UserJS script, simply rename the file extension (from .JS) to something other than .JS

Hope this helps

dapxin Saturday, April 10, 2010 8:41:03 PM

I seem not to notice it, in O10. me ?

Lee HarveyLee_Harvey Saturday, April 10, 2010 9:04:44 PM

You're not alone: I get no results in 10.51 either (Win7/64bit). When I find some free time, I'll investigate further. Stay tuned..

dapxin Saturday, April 10, 2010 9:27:25 PM

Thanks. will expect the news smile

Evgenylopotun Sunday, May 16, 2010 1:03:05 PM

Yes, Øyvind Østlund is right. I had never noticed the different cursor over a text before you mentioned it.
And since you made me addicted to it rolleyes, you just must make it working again in Opera 10.5x bigsmile
Thanks! up

Lee HarveyLee_Harvey Friday, June 4, 2010 3:10:36 AM

COME AND GET IT WHILE IT'S FRESH. Now updated for Opera 10.53 -- and seems faster than ever (most likely due to Opera's revamped JavaScript engine).

Enjoy.

dapxin Friday, June 4, 2010 12:57:19 PM

gratias Lee:) I am here getting it now.

kslee Wednesday, June 9, 2010 7:38:52 PM

Thank you, thank you, thank you very much !!! up cheers sing
I've been waiting sooooo looooooong.
Works fine on 10.60.

dapxin Tuesday, May 3, 2011 4:14:18 AM

will this work with opera11+ ?

Lee HarveyLee_Harvey Tuesday, May 3, 2011 12:15:52 PM

Yes. I'm using it in Opera 11.10 right now. Seems to work fine for the majority of sites that I visit -- although, not on JavaScript-heavy Facebook.

Dependencies:
- Page must load successfully (no errors preventing JS execution)
- Page must contain at least one <script> block to load UserJS
- Page must contain at least one <body> block to enumerate
- Page must contain at least one <style> block to insert CSS rule

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.