Sep/092
IE8, another screwed up version.
I was really hoping that Internet Explorer version 8 (IE8) would finally be the version of IE where Microsoft stepped up to the plate and produced a fast browser, with few bugs, less Microsoft-only features, and a good and modern UI.
I’m the kind of guy that holds judgment for a very long time, sometimes too long. So it comes with great sadness that I announce that IE8 is not the browser I was hoping for. It is riddled with bugs, the rendering engine crashes on many web sites, and it is SLOW. Its the slowest browser of them all as far as I can tell. It renders many web-2.0′ish sites with teeth-gritting sluggishness. Once rendered, javascript animations tend to be jumpy as well. I’ve found several cases where the event engine is even more screwed up than it was in IE7.
If you’re a web developer and IE8 is causing the same pain for you as it has for me, consider adding this to your HTML*:
* This should be the very first tag after the opening <head> tag.
This will force IE8 to run in IE7 compatibility mode. When in IE7 compatibility mode IE8 will not crash nearly as often and will render your HTML/CSS/JS much more predictably and act more similar to how Chrome and FireFox behave.
I don’t understand why Microsoft keeps doing this. They have all the power in the world to WIN the browser war, but they are just going to keep failing with crap software like this and loose one more market to Google.
Jul/090
$(document).ready() Shortcut
When writing jquery you almost always put your code within a ready block:
// Code...
});
And I always forget the exact syntax. I just found that jQuery has a shortcut:
// Code...
});
Much better!
Jun/092
Flash Bleeding Through
If you use mint.com you’ll notice that whenever a modal dialog is displayed they hide the flash content. This is because the flash normally bleeds through any HTML. Even if the flash has a z-index of -1000 and a div has a z-index of 1000, the flash will still appear on top of the div. There is an easy workaround for this with the WMODE parameter:
“The WMODE parameter can be ‘window’ (default), ‘opaque’, or ‘transparent’. Using a WMODE value of ‘opaque’ or ‘transparent’ will prevent a Flash movie from playing in the topmost layer and allow you to adjust the layering of the movie within other layers of the HTML document.” – Adobe Technote
In my testing this works great in Firefox 3 and IE 7.
Since we use FusionCharts at $work I had to figure out how to make the fusioncharts javascript set WMODE. This is very easy by calling a method on the chart object. Make sure you do this before you render the graph.
chart.setTransparent();
// sets WMODE to "transparent".
chart.setTransparent(1);
A thread on the fusion charts forums goes in to more detail about this.
Edit: Turns out that if you set a fusionchart to use wmode transparent or opaque, all of the mouseover events don’t work, such as displaying the exact value of a point in the chart when the mouse goes over it. Boo!
May/091
CSS Element Sizing
While working on our new UI at $work we ran in to issues using the YUI layout manager as its very quirky and hard to customize. So, I ended up writing an entirely new layout manager. As part of this I found that the way I thought elements resized was nothing like reality. I’m a big jQuery fan so this diagram below refers to jQuery methods, but the concept applies to CSS in general.
As you can see the height of an element represent only the internal height of the element, not taking in to account the margin, border, or padding. This I already knew, but I didn’t know how the corresponding jQuery methods fit in here. jQuery.height() has the same value as the CSS height attribute. jQuery.innerHeight is the CSS height plus the CSS top and bottom padding. jQuery.outerHeight() includes the CSS height, the top and bottom padding, and the top and bottom border. And, finally, jQuery.outerHeight(true) works the same as jQuery.outerHeight(), but also includes the top and bottom margin.
May/091
Setting an Element’s Outer Size
When setting an element’s width or height you are setting the inner-most width and height, without taking in to account the padding, border, or margin. When writing application-like web sites this is not the behavior you want – usually you want exact control of the entire width and height of the element. Here’s a very simple jQuery plugin that I wrote to make this very easy to do.
var difference = this.outerWidth(true) - this.width();
return this.width( newWidth - difference );
};
jQuery.fn.setOuterHeight = function( newHeight ) {
var difference = this.outerHeight(true) - this.height();
return this.height( newHeight - difference );
};
Then all you have to do is use obj.setOuterWidth(…) instead of obj.width(…) to resize the entire element.
Iron Man
Planet Perl Iron Man Posts
- 学生諸君、Perlを勉強したまえ（ただし書き付き）
- Perl, PHP, corporate – continued.
- Doxygen を github-pages にあげるのをお気楽にやる方法
- The consequences of inclimate weather –or– Take an interest
- Pod パーザいろいろ
- Task::Kensho - Die besten CPAN-Module ausgewählt von der Enlightened Perl Organization
- on testing
- Heavy Boots of Lead
- Advanced Benchmark Analysis II: Probing strengths and weaknesses
- Ironboy is coming soon