doing simple things without a code library
So I just was reading this article written by David Talbot on Devx.com about Yahoo's UI libraries aiming to make crossbrowser development a bit easier for some folks.
The only notable feature that I could seem to find, was the simplification of setting the opacity of a DOM element in an elegant way. An entire library for that? I got a little curious and took a further look.
Here's an exerpt from the artile:
The DOM and Event Libraries
YUI's capabilities in regard to core DOM and event handling are incredibly rock-solid, perform as expected, and cover a broad range of capabilities. Most surprisingly, this API gives you simple cross-browser transparency control. Most developers aren't even aware that magic tricks even exist (via DirectX calls) to make semi-transparency work in IE, much less the Mozilla-based equivalents, but YUI enables access to most, if not all, of the CSS properties you'd ever want. Here's an example:YAHOO.util.Dom.setStyle('MyDivID', 'opacity', .5);
Suprizingly? Are you kidding me? Maybe I just don't get what the big deal is. I've been developing crossbrowser DHTML in one way or another since the beginnings of the last browser wars. And back in 99-2000 when everyone was bitching about the diversity in W3C support between the version 4 browsers, I was just doing what needed to be done to make everything work the way it needed to.
So despite Mr. Talbot's enthusiasm for what I considered to be not much of a big deal at all I headed over to Yahoo's Developer Center poked around their lousy documentation and downloaded the most recent build here on Sourceforge. I took a peek at the source, and it turns out that Yahoo and I have almost the same exact approach, thing is, running their entire library is pretty needless.
Here's what I came up with to put together a fade in effect for the items being loaded into my portfolio via xmlHttpRequest.
here's the very simple browser check:
-
var ua = navigator.userAgent.toLowerCase();
-
var isOpera = (ua.indexOf('opera') != -1);
-
var isIE = (ua.indexOf('msie') != -1 && !isOpera);
and here's an exerpt from my getPortfolioDetail function:
-
xhrPortfolioDetail.onreadystatechange = function() {
-
if (xhrPortfolioDetail.readyState == 4 && xhrPortfolioDetail.status == 200) {
-
portfolioDetail.innerHTML = xhrPortfolioDetail.responseText;
-
var fader;
-
for(count = 1;count <= 10; count++){
-
fader = setTimeout(function(){
-
val = count*0.1;
-
if (isIE && typeof portfolioDetail.style.filter == 'string'){
-
portfolioDetail.style.filter = 'alpha(opacity=' + val * 100 + ')';
-
if (!portfolioDetail.currentStyle || !portfolioDetail.currentStyle.hasLayout) {
-
portfolioDetail.style.zoom = 'normal'; // if you use '1' it distorts things
-
}
-
} else {
-
portfolioDetail.style.opacity = val;
-
portfolioDetail.style['-moz-opacity'] = val;
-
portfolioDetail.style['-khtml-opacity'] = val;
-
}
-
},100*count);
-
}
-
xhrPortfolioDetail = null;
-
}
Pretty simple eh? One thing that you can't see is where I use the same approach to lower the opacity to 0.1 while loading, so there isn't any flashing of the loaded content before it fades in.
I know that there are tons of AJAX Frameworks out there that provide fade in type effects, but I'm not quite there on implementing one. Noteables include Dojo, MochiKit, and of course the ever popular script.aculo.us.
I'm still working on making it work a little more smoothly and efficient as the delay in setting the opacity while i'm doing the xmlHttpRequest is inconsistant at best.
Feed
LinkedIn
Facebook
del.icio.us
