greyHats

I’ve been working with Pngs over the last few weeks because they just look so much dang better. But then I went to setup IE6 support and some of my quick-hacks I used. If you’re not aware, to use transparent pngs in IE6 you need to set them as the background of say a <div> or <span> and then apply a filter to it. If we were to apply it in css it would look like this:

.myPng{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’/images/mysweet.png’);
}

However, to use only css to do this we _need_ to know the height and width of the image, because the filter actually just sets the background image. There’s a few other png hacks out there but none that really worked for me for various reasons. What I needed was something that was fast, lightweight, easy to read, and I could call it if I was building an <img> tag in javascript. So I made this:


Global = {
FixPng: function( img ){
if(document.all){
img.parentNode.style.width = img.offsetWidth;
img.parentNode.style.height = img.offsetHeight;
img.parentNode.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’”+ img.src +”‘)”
} else {
img.style.visibility = “visible”
}
}
}


The only catch is that this relies on three things:

1. The <img> tag must have style=”visibility:hidden”
2. There must be a <div> tag wrapping the <img> tag. (the <div> tag can have styling)
3. The FixPng is called at some point passing the <img> tag object

So a normal fix would look like this:


<div><img src="/images/mysweet.png" style="visibility:hidden;" OnLoad="Global.FixPng( this );" /></div>


That’s about it. I don’t think this is my last iteration of this fix, but it works 100% better for me since I can easily use this in html and in javascript. I hope it helps you.

note: I’ve heard that the <img> OnLoad doesn’t always fire in IE6 because of caching. There’s workarounds, but if you have any insight, please post.

So, I’ve learned a lot over the last year about development in addition to being swept up into this stream of knowledge that’s being passed around (read - web 2.0). Anyway, I wanted to share a little bit about how I’ve been developing.

I think that if I looked back to what and how I wrote my code years ago I’d laugh my sockies off. Now, I know MOST programmers do this. We’re constant learners, always tweaking the way we do things. But with these new methods and ideologies it’s much different to look back on (recent) older code because I wasn’t doing anything SILLY back then, it was just _different_.

The best example I thought I could give you is this. After reviewing all the open source javascript libraries out there, I’ve gleaned a new way of writing javascript for my page. Take this for example:


DiverseSolutions.MyProject.Pages.Login = {
OnLoad: function(){
//do stuff
},
Tab: {
OnClick: function(){
//do stuff
},
OnMouseOver: function(){
//do stuff
}
}
}


So Basically what we have here is a page called “login” where I’ve got some stuff goin on. Generally I’ll have the “OnLoad” function bound to window.load like this:

YAHOO.util.Event.addListener(window, "load", DiverseSolutions.MyProject.Pages.Login.OnLoad, DiverseSolutions.MyProject.Pages.Login);

What we’re doing here is on window “load”, fire “OnLoad” with (the extra DS.MyProject.Pages.Login makes sure that OnLoad fires within the correct scope). What this kind of implementation gains me is the ability to 1. Quickly navigate through a javascript class (a major concern of mine) and 2. Be able to modify/consume my own and coworker’s javascript classes. This particular method is geared towards a specific page. If I was to create a re-usable class I would do something like this:


DiverseSolutions.MyProject.User = { };
DiverseSolutions.MyProject.User.prototype = {
UserID: null,
UserName: null,
Init: function( userid ) {
//do stuff
},
}


This allows me to be able to reuse a class I’ve made without the browser having to rebuild everything every time I initialize a new User. This is because I’ve implemented the object’s “prototype”.

Using javascript in an object oriented way allows me to work with “agility” (therefore the Agile Development). I can’t tell you how much faster javascript programming is now that I’m utilizing these new techniques. Additionally I don’t feel like as much of an r-tard when I look back on my old javascript work :).

note: what I didn’t include was how I setup the DiverseSolutions.MyProject.Pages namespace. I’ve “borrowed” how yahoo does their’s seen here.