JavaScript FX

A lot of peeps are talking about Ajax this and Ajax that. Since JavaScript is the J in Ajax, what a lot of people have set out to do is create JavaScript effects libraries. There are several libraries available such as dojo toolkit, prototype framework, script.aculo.us, and others. I wanted to us some effects on several projects, including this site, and decided to try out moofx but because a restriction in use I opted to write some JavaScript code of my own. The issue with moofx was that you could not apply padding or borders to your element if you wanted to use the Height and/or Width effect. Since I wanted to minimize the height of an element and those elements had borders and padding I could not use moofx. So instead I just developed a bit of JavaScript code to change the element’s CSS. Here is the code:

function fxToggle(id) {
    var element = document.getElementById(id);
    if(element && element.style) {
        var isBlank = true;
        if(element.style.display != 'none') {
            element.style.display = 'none';
        }else {
            element.style.display = 'block';
        }
    }
    return false;
}

This code will toggle an element’s display from none to block. When the display is set to none the element is not visible or takes up any real estate. I use a link to toggle an element’s display like this:

<A href="#" onclick="return fxToggle('elemId');">
  Meta
</A>

Related posts:

1. Style And Class
2. Dynamically Create HTML Elements with JavaScript
3. jQuery Library
4. Unobtrusive JavaScript with Prototype and Behavior
5. Twelve Elements of JavaScript Style