Topic: Javascript
JS 201: Run a function when a stylesheet finishes loading
This is the first in a series I’m calling, “JS 201.” It’s not introductory material, but is instead that helpful middle ground between the basics and pretty much anything John Resig writes. Short, practical, typically plain-ol’-JavaScript tips is what you’ll get.
I’m in the middle of working out a new feature for a project that requires JavaScript to append some markup, stylesheets, and scripts to a page. The task is fairly straightforward: JavaScript has native capability to do all of that. I’m looking at you, createElement and appendChild.
I did run into a problem, though. A piece of JavaScript required styles be applied to certain elements before it should execute. Unfortunately, the script was executing while the stylesheet was being loaded. Like most reasonable front-end developers, I figured I’d just run a function when the onload event fired on the link element. It works for images, why not for stylesheets, right? Wrong!
Continue reading "JS 201: Run a function when a stylesheet finishes loading"
Styling HTML5 Elements: An Irresponsible Choice…Right Now
As Jeremy Keith pointed out, I never explicitly mentioned that I was specifically talking about styling HTML5 elements (although I thought that was conveyed throughout the post). So I have gone through and updated the post to reflect that.
Ok, before we get too far into this, I want to say this: I fully support web standards and progressive enhancement.
Now go back and read that again before you read any further.
The following discussion all stemmed from a tweet by Kyle Cotter. Specifically, he was asking about using HTML5 elements. My response was:
“No, unless you 100% know that your users are not using older browsers, specifically IE 6-8.”
My main reasoning was because if you are styling HTML5 elements, then you are requiring those users to have JavaScript enabled or the site is completely broken. This is because people are using the HTML5 shiv to “trick” IE6-8 into thinking those elements exist. If you don’t have JavaScript enabled, the HTML5 elements don’t degrade gracefully like a CSS3 box shadows or border radius; the browser doesn’t know the elements even exist.
Continue reading "Styling HTML5 Elements: An Irresponsible Choice…Right Now"
Internet Explorer, Transparent PNGs, and jQuery Animation: The Black Background Issue Solved
This is an issue I ran into a few months ago. I couldn't find much documentation around this on the interwebs, so I thought I'd post my findings here. Hope this helps a few people out.
I was working on a project where I was animating the opacity and position of transparent 24-bit PNGs with jQuery. Everything was going great until I fired up IE (big surprise). I hadn't thought it would be a problem, since both IE 7 and IE 8 both support PNGs with alpha, but as it turns out, like most things in IE, it's a little buggy.
Everything displayed properly at first, but the second I animated the opacity, this nasty black background/border/fringe junk showed up.
After much googling, one semi-solution I found was to give the image the same background color as your page with CSS. That's all well and good if your image is on a solid background. If you give the image a background color or image, the PNG displays properly on top of it, BUT that background is still opaque, and that pretty much defeats the purpose.
THEN I remembered a RGBa to IE filter converter I had come across (thanks, Michael Bester). So I wondered what would happen if I gave my problem PNGs a transparent background using an -ms-filter background converted from rgba(255,255,255,0). Fully expecting it not to work, I used the converter and tried this:
.item img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE 6 & 7 */
zoom: 1;
}
Kazaam!! Goodbye black, and hello working, animatable transparent PNGs in IE 7 and 8.
You can now use jQuery's fadeIn(), fadeOut(), and animate() on your transparent PNGs in IE 7 and 8 to your heart's content. Hope this saves you some time and frustration down the road.
A Quick Pair of Random JavaScript Tips
I recently came across Jed Schmidt’s 140bytes project on GitHub. Jed describes the project as, “a tweet-sized, fork-to-play, community-curated collection of JavaScript.” There’s a ton of interesting (and interestingly coded) script examples from a variety of people, but my favorite part of the project so far has been the Byte-saving Techniques page on the wiki.
Here are two quick tips gleaned from the wiki.
jQuery or Native Method? (Everyday Techniques No. 3)
Like some of you, I learned jQuery long before I really learned JavaScript. While that sounds nonsensical, consider how much new users can do with jQuery before really knowing what a DOM node is, or an anonymous function, or why "this" needs to be like "$(this)". A lot of us took the fastest path to what we needed to do (make stuff blink!) and are now filling in the gap of knowledge around it.
So to me it felt especially weird when, on a recent project, I realized I could use element.style instead of .css() to set a simple CSS property. Any JS veteran would know this, but it’s surprisingly hard knowledge to come by nowadays, when the answer to so many DOM scripting questions is simply "use jQuery/Dojo/Prototype!"
Methods like jQuery’s css() are elegant and packed with utility, but there are times you can cut around them for performance boosts. These methods have lots of overhead that includes checking for multiple DOM elements and different argument types, so if you know your element and exactly what you want to do, sometimes you might be better off trying a native method instead. I’m not saying you should always replace css() with .style — css() is readable, idiomatic to jQuery, and has clever hooks for cases like opacity — but if you’re calling it 300 times a second you might want to look at more direct alternatives.
These speed improvements won’t really make a difference if you’re calling them ten or twenty times; they only offer a real boost on really long loops, big lists, or rapidly-repeating calls.
The following are a bunch of native methods and properties (presented CAGE-MATCH STYLE) that should work cross-browser and, as some jsPerf tests indicate, can out-perform than their jQuery equivalents if used correctly.
Continue reading "jQuery or Native Method? (Everyday Techniques No. 3)"
Building an ExpressionEngine Mini Calendar Scroller
I recently decided I wanted to add a calendar of blog entries on my personal site. Luckily, ExpressionEngine has a tag for that, the Calendar Tag. The functionality that I wanted was a little bit different from the two examples in the EE user guide. I wanted to show a calendar by month, and link the days that had an entry to that specific entry.
Continue reading "Building an ExpressionEngine Mini Calendar Scroller"
A Few jQuery Plugin Patterns
One of jQuery’s great strengths is its simple and powerful plugin architecture. The extensible .fn method has been one key to jQuery’s success, it lets developers of any experience level quickly produce and distribute their work, and a lot of devs who work with jQuery use plugins and their patterns every day.
Plugins don’t have many hard rules, so it shouldn’t surprise anyone to find out that there’s a huge diversity in implementation styles. Still, if you look at enough plugins, a few patterns useful patterns emerge.
Here are five patterns, each with their own pros and cons, applied to a simple gallery behavior. If you’re already using some of these (or prefer even better ones), let me know in the comments. A few points about all five patterns: I’m wrapping the plugin code in an immediate (or ‘self-executing’) function to create a closure and assign the $ to jQuery. I’m also setting options the standard way, combining a passed-in object with a set of defaults. You play around with the gallery I’m trying to make here.
2011