Lee Harvey - Enhance Opera's mouse cursor over text

Enhance Opera's mouse cursor over text

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

mouse, userjs, text, browser, cursor, opera, javascript

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

NoteMe # 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

Cheers,
- ØØ -

davidcowell # 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.