Browser CSS float error detection with jQuery
Date : 2008 03 31 Category : Tech & Development
AjaxianMario 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
PLAIN TEXT JAVASCRIPT:(function(){ function checkNext(element, floating) { if(element.css('clear') != 'none') { var clearing = true; } else { if(element.next().length !== 0) { var clearing = false; checkNext(element.next(), floating); } else { console.log(element); element.css({border:'2px dotted orange;'}) } } } $('body *').each(function(){ var element = $(this); if(element.css('float') !== 'none' && element.next().length !== 0) { checkNext(element.next(), element.css('float')); } eval(''); }); })();
Bookmarklet
PLAIN TEXT JAVASCRIPT: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,{}))