Thursday, January 15, 2009

Firebug Framework: CSS helper functions

In a previous post I started talking about the functionality that is already implemented in Firebug. While I was doing some reworking on FireSymfony I had the chance to use some of the CSS methods that are part of the Firebug lib.js source file:

hasClass = function(node, name)

This function expects a node, that for example can be obtained with Firebug "$()" function, and the CSS class name that we are searching for. Returns boolean as expected.

setClass = function(node, name)

Adds the CSS class provided by name to the node

removeClass = function(node, name)

Removes the class specified by name from node

toggleClass = function(elt, name)

If elt has class name then it will remove it from the element, otherwise it will add the class to the element.

setClassTimed = function(elt, name, context, timeout)

This will add the class name to the element. When the milliseconds timeout has expired, the class will be removed from the element and the timeout will be cleared. The timeout is added to the provided Firebug context

cancelClassTimed = function(elt, name, context) 

This method will remove a class added with the previous method and will clear the timeout.

All this methods can be accessed from inside our Firebug extensions if we declared them as explained here by Jan Odvarko. Another way is calling them like this: FBL.methodName(...)

There are more utilities inside the Firebug libraries that can help us while we develop our custom extensions, so we don't have to reinvent the wheel. I've plans of keep documenting the Firebug code, so stay tuned.

No comments: