Month: December 2008

IE7 CSS Pseudo Selector Slowdown?

Have you ever experienced major slowdown using IE7? It may NOT be memory related. I came across this issue while working on a bug for GameSpot. Users were complaining that the user experience was lagging. It\’s more noticeable with the forums, where the users would drag the scroll bar in long threads, but the page wouldn\’t scroll for a few seconds. RockMFR had the solution, which I shall share with you. Continue reading IE7 CSS Pseudo Selector Slowdown?

Aaron Newton\’s Event Delegation for MooTools

I just learned of Aaron Newton\’s Event.Delegate.js and think it is amazing. Why is it amazing?

Event delegation is a common practice where by you attach an event listener to a parent object to monitor its children rather than attach events to all the children. It’s far more efficient when you have numerous items on a page that you want to interact with.

The examples below should give you a better idea how awesome it is.
Continue reading Aaron Newton\’s Event Delegation for MooTools

CSS Best Practice #3: Clear Floated Containers (with Height||Width and Overflow)

I know you\’ve done it before. I think we\’ve all done it. You have a container with a floated element inside. The container doesn\’t wrap around everything, thus causing the element to break outside of the container. To fix this, we\’d usually add a clear element at the bottom of the container so it would wrap everything within. But there is a better solution, which uses two CSS properties. For this example, I\’ll place the styles inline.. please don\’t hate me. Continue reading CSS Best Practice #3: Clear Floated Containers (with Height||Width and Overflow)

CSS Best Practice #2: Shorthand Properties

Write your CSS rules with shorthand properties. It keeps things simple and clean.

.example {
    /* long */
    padding-top:1px;
    padding-right:2px;
    padding-bottom:3px;
    padding-left:4px;

    /* short */
    padding:1px 2px 3px 4px;
}

To help you with the shorthand, Dustin Diaz took the time to put together a CSS shorthand guide. Way to go Dustin! Check the guide for in-depth descriptions, examples, and Dustins \”quirky facts\” (such as shorthand defaults).

SitePoint CSS Reference is another source for shorthand properties, or any property in general, you should/could/would use.

Implement Other Selector Engines (e.g. Sizzle or Peppy) into MooTools?

Not too long ago announcements of two new selector engines came on the scene, Peppy by James Donaghue and Sizzle by John Resig. At the time I had a fleeting thought of how cool it would be if MooTools was as fast or faster than Peppy and Sizzle.

Yesterday, Ajaxian tells us that the Dojo Community will vote on whether they implement the Sizzle selector engine instead of using their own.

Just after reading that I thought whether MooTools would benefit from implementing a selector engine instead of using their own. Apparently I was not alone in this thought as Aaron Newton has posted his thoughts and pros/cons. Here\’s my two cents. Continue reading Implement Other Selector Engines (e.g. Sizzle or Peppy) into MooTools?

Solution to Flash and Select Drop-downs Covering HTML Elements

I\’ve positioned elements absolutely and had to deal with a bug where the element appears below a flash object or select drop-downs, which usually occurs in IE. I\’ve seen a few solutions, which work great, and I have one more to add. Continue reading Solution to Flash and Select Drop-downs Covering HTML Elements