Monday, March 31st, 2008

Browser CSS float error detection with jQuery

Category: Browsers, CSS, Debugging, jQuery

<>p>Mario Heiderich of Ormigo has created a jQuery based code snippet/bookmarklet that is capable of detecting floating errors and adding a dotted orange border to elements which should be cleared – but aren’t.


It saved me a huge bunch of time debugging complex layouts for all browsers – especially IE6. If jQuery isn’t already loaded on the page it can easily be fetched with the several jQuerify approaches.

Snippet

javascript
< view plain text >
  1. (function(){
  2.     function checkNext(element, floating) {
  3.             if(element.css('clear') != 'none') {
  4.                 var clearing = true;
  5.             } else {
  6.                 if(element.next().length !== 0) {
  7.                     var clearing = false;          
  8.                     checkNext(element.next(), floating);
  9.                 } else {
  10.                     console.log(element);
  11.                     element.css({border:'2px dotted orange;'})
  12.                 }
  13.             }
  14.     }
  15.     $('body *').each(function(){
  16.         var element = $(this);
  17.         if(element.css('float') !== 'none' && element.next().length !== 0) {
  18.             checkNext(element.next(), element.css('float'));
  19.         }
  20.         eval('');
  21.     });
  22. })();

Bookmarklet

javascript
< view plain text >
  1. javascript:eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(3(){3 5(a,b){4(a.2(\'p\')!=\'9\'){6 c=h}d{4(a.1().7!==0){6 c=o;5(a.1(),b)}d{n.m(a);a.2({l:\'j i k;\'})}}}$(\'g *\').f(3(){6 a=$(e);4(a.2(\'8\')!==\'9\'&&a.1().7!==0){5(a.1(),a.2(\'8\'))}q(\'\')})})();',27,27,'|next|css|function|if|checkNext|var|length|float|none||||else|this|each|body|true|dotted|2px|orange|border|log|console|false|clear|eval'.split('|'),0,{}))

Related Content:

Posted by Dion Almaer at 6:30 am
7 Comments

++++-
4 rating from 25 votes

7 Comments »

Comments feed TrackBack URI

Mhhm. The bookmarklet says $ is not defined?

Comment by andig — March 31, 2008

The code won’t really work. It totally ignores new block formatting contexts. So if you’ve got an overflow:hidden applied to a parent element (which, if you didn’t know, creates a BFC), then this code blindly carries on searching sibling elements ignoring the fact that floats are not contained by ancestors, they’re contained by BFC’s.

Oh – and it will break if your not using Safari or Firebug[lite].

Comment by RichB — March 31, 2008

Hi!

The code works – but not for any situation. When I find find some more time I will maybe work on all the special cases like clearfix and your mentioned case. Anyway – yes: firebug is necessary but to be honest I don’t know too much web devs not using it during work. Consider it herewith mentioned as requirement ;)

So – to wrap it up:
Requirements:
– jQuery
– Firebug (llite)

Greetings,
.mario

Comment by x00mario — March 31, 2008

Just for fun a quick port to Prototype \w bonus Element#css added :)
http://pastie.caboo.se/173214

Comment by jdalton — March 31, 2008

alt link: http://www.pastie.org/173224

Comment by jdalton — March 31, 2008

Great idea ;) I prepare version for Mootools here: http://blog.desmart.com/2008/04/01/34/
Thx Mario!

Comment by Skowron — April 1, 2008

Nice idea. I’ll check out the implementation. It would be sweet to have this integrated into a front end test suite like Selenium. Set it up as part of the automated build that happens on each check-in and you have another fine tool for catching front-end errors before users do.

Comment by jdempcy — May 6, 2008

Leave a comment

You must be logged in to post a comment.