Skip navigation.

Prepare!

Lee Harvey's Zombie Hit Parade

Enhance Opera's mouse cursor over text

Saturday, 3. March 2007, 21:32:43

, , , , , ,

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 sites.

Download/view the textNodes.js script 
document.addEventListener("load",
   function() {

      var body = document.getElementsByTagName("BODY");
      if (!body) return;

      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[0], 
         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;
         if (textNode.parentNode.currentStyle.cursor != "default") 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

BTW, feedback is always appreciated.

Enjoy.

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

Comments

Øyvind Østlund 4. March 2007, 01:01

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 :D


Cheers,
- ØØ -

David Cowell 5. April 2007, 06:52

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

Lee Harvey 11. April 2007, 13:15

-- 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 31. January 2008, 23:32

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 3. March 2009, 06:27

does it still work ?

Lee Harvey 3. March 2009, 12:48

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 3. March 2009, 18:04

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 Harvey 4. March 2009, 00:09

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

mdajobs 17. November 2009, 05:33

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 Harvey 23. December 2009, 13:59

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

Write a comment

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

Photos

THUNDE~3.JPGLane.jpgWalnutTree1[1].jpgFallenWalnut1[1].jpg