Non-breaking white space Internet Explorer 8 JavaScript regexp bug (and how to fix it)

While developing jQuery plugin for upcoming bookmarking "Items in select boxes" plugin for our Vudu CMS

I wrote a simple regexp to strip few characters (pipe, minus, apostrof and white-space) that are added before the actual item.

 function cleanOptionText(txt)
 return txt.replace(/^[\s|'-]+/, '');

It worked just fine on FF9 and Chrome but in IE8 only the first pipe (|) was removed. After some debugging I discovered that I have both spaces and non-breaking spaces that should be removed and that in IE8 class shorthand \s (which should include all white space) doesn’t include non-breaking space.

Code for non-breaking space is 0xa0 (dec 160) so regexp should be updated as follows:

function cleanOptionText(txt)
return txt.replace(/^[\s\xA0|'-]+/, '');

Continue reading Non-breaking white space Internet Explorer 8 JavaScript regexp bug (and how to fix it)

jQuery v1.6 change you should know about

jQuery v1.6 release has been announced for May 1st and it will include rewritten internal method jQuery.attr and the addition of jQuery.prop. That will bring a solid performance improvement, a modularized implementation, and a cleaner way of dealing with attributes but this rewrite will confuse some people who have been using jQuery.fn.attr for cases for which it was not intended, but have always worked. Read more details about this on Timmy Willsons's blog (jQuery Core Bug team member) and check performance increase by the numbers.

$("div").attr("id", "holder");  // OK  
$("video").attr("autofocus", true);  // OK  
$(window).attr... // NO  
$(document).attr...  // NO  

Inconsistent behaviour of default browser tooltip

I've had some spare time before bedtime to put into digital form something what I discussed with the guys at the office - inconsistent cross browser behavior of default tooltip functionality.

First, a little introduction to the subject of tooltips:

The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small "hover box" with information about the item being hovered over. (Wikipedia)

In your regular computer usage, you see tooltips every day (all day) and chances are that you don't even notice them anymore. All browsers display the title attribute of an HTML element as a tooltip when a user hovers the mouse cursor over that element. Some browsers will also display the alt attribute of an image as a tooltip in the same manner (if a title attribute is also specified, it will override the alt attribute for tooltip content).

On the wide spaces of world wide web you can also find custom generated tooltips (eg. in javascript or Flash or just by absolutely positioning of elements via css), but they are not the subject of this post. I did my fair share of tooltips in different Flash projects I was working on, and each time we did a new tooltip type, we tried to make tooltips an integral part of visual part of design having in mind usability.

From user stand point - I never paid too much attention to browser tooltips. Probably because I got used to them. If website I am visiting is done well, if I hover something (probably an image) - a default browser tooltip will appear over that element. That usual and expected behavior was enough for me to put browser tooltips somewhere in back of mi mind. But, recently something about tooltips started to bother me and I couldn't pinpoint it.

Just around the time when we were working on release of Globus portal, I finally did figure out what was wrong with tooltips - tooltips in Firefox to be exact.

Firefox (tested on 3.5.5) has a nasty bug which causes hovered element to fire up onmouseout event when you rollover a default browser tooltip which that element invoked. When you rollout of the tooltip (because tooltip disappears), the browser element fires onmouseover event again, and that can cause some really nasty behavior.

Firefox 3 tooltip bug
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
(i've recorded this behaviour. you'll need flash player to see the video. if you can't - try MOV or AVI file.

On Globus that bug caused so much problem in elements which change layout when you hover them - that we had to remove title tags completely. And that from SEO standpoint is a BIG inconvenience. I've tested tooltips in all browsers, and AFAIK only Firefox 3.5 (Win) tooltips are "working" that way. I've submitted this bug to Bugzilla so will see what they'll say about it.

While doing tests in browsers I had around (Firefox, Safari, Chrome and IE8), I've noticed another inconvenience. Not a single browser did not displaying the tooltip the same way.

I've put up a little html demo for you to test by your self (ignore my css 'skills'). The 'demo' contains one div with image inside it with a link. If you hover the image, the link's title will show up in a default browser tooltip. Take notice how tooltip:

  1. appears when you roll over element
  2. disappears when you roll out
  3. behaves when you move around element
  4. behaves when you try to rollover the tooltip it self

You will notice that not a single respected browser currently available on Windows is not displaying tooltip the same way.

Chrome 3 toolip
- lazy (shows and dissapears with an delay), you can rollover it with your mouse without any side effects. The fact that you can rollover tooltip in combination with rather long hide delay can be inconvenience.
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Internet Explorer 8 toolip
- pretty standard windows based tooltip behaviour. if you hover a tooltip - it will disappear which I think it's best behavior.
- has a nasty habbit of blinking two times when you hover an element. it doesn't produce other nasty effects to dom events
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Safari 4 toolip
- has a nasty habit of disappearing and reappearing while you are still hovering the element. it doesn't produce other nasty effects to dom events
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

I haven't tested Opera on purpose. It's market share is just too low. :-(

I have no idea why not a single web browser doesn't have tooltip behavior configuration setting like follow mouse, delay in ms, different show/hide effects etc. I think that would be cool. :)

Feedback is welcome!

Trackers, banners, analyzers…. and other shit that slows down your site

We spend a large amount of time in optimizing frontend of each site we produce. Yes, everybody knows about famous yahoo's 14 rules (plus recent 20 new rules), but how to successfully reach them is another, story.

After some thinking and pimping, you can get straight A out of yslow. That's a fact. But then one day client comes and says - I need this banner here and that banner there and this tracking code and that tracking code.... 5 days later your straight A page becomes bullseye F. Why? Because you had to put tons and tons of inline javascript which not only broke your wonderful w3c compliant markup, but also completely f*cked up page loading/rendering time. Each page render now has to coup with inline javascript (even iframes) and loading of external javascript, images and flash files from different slow and overcrowded ad servers.

Until today I was mislead by thought that only we have that kind of problems, but my recent try to browse encouraged me to write this post.

Guys at BBC use (like many other) DoubleClick for banner management. There is nothing wrong with DoubleClick, or any other banner management software. In picture below you can see what timeout did to a bbc homepage. After 60 seconds or so, page eventually loaded, but was missing banners:

On our recent project, we didn't liked the fact that ad server is slowing our page render time by 300-500%. OpenAds didn't update their banner publishing scheme for at least 5 years so we did a little trick.

There is a placeholder that holds layout and displays "loading..." msg where banner should appear. Then we load the banner at the bottom of the page and once the banner is loaded we append it to the placeholder on top of the page .

This technique works well but can't be used in every configuration. Btw, if you are using jQuery, just be sure to use v1.2 since appendTo later on contains a bug. Eventually you could patch your current with this fix.

This won't solve all of your problems, and will off course introduce new ones but will help your page render time slightly and make your visitors not so annoyed. You should reconsider how to solve bottleneck to your ad server by making a farm or something.

Embed this!

New 2.0 beta version of SWFObject is out (previously known as flashobject, then swfobject, then SWFFix project). Over the years, it become the de-facto standard for embedding Flash/Flex content in xhtml friendly cross browser compliant valid way.

The new version is a complete rewrite from SWFObject 1.5, so it needs to be tested like hell before officially launch because it will replace the older SWFObject and UFO scripts. And since they have Adobe involved, they will be including this embed system in the Adobe authoring tools in the future. GREAT NEWS! Meanwhile, grab the beta from google code.

jQuery 1.1.3 released

Just two words - fast and fixed! If you haven't checked out v1.1.3 before from SVN, jQuery 1.1.3 was released officially yesterday. Tons and tons of bug fixes, and massive speed gain. Guys also announced roadmap of new 1.2 branch (which sure looks promising) and a whole new Drag & Drop library called jQuery UI. The library will contain full code for Draggables, Droppables, Sortables, Resizables, and a Slider. Sweet!