Question

I’m attempting to work with Javascript through a cross browser platform that is required to support IE6, 8, and Firefox. I’ve quickly discovered that none of these browsers contain a matching Javascript library.

The goal is to have items that dynamically hide or show depending on the selection of other items. Normally I would just toggle between display:none and display:block but for the work of another developer, I can use the display:none to hide the field, but switching to display:block screws up the layout. The solution is to simply rip out either the display setting in the style, or tear out the style altogether. Unfortunately, I ran into the library problem

Firefox supports everything I’ve tried so far
IE8 & 6 didn’t support getElementById().style.removeProperty(‘display’)
IE6 doesn’t support getElementById().removeAttribute(‘style’)

Below is my code as it currently is, working in IE8 and FF…but it is required to also get it working in IE6.

function displayPrevLPQ(bShow) {
    if (bShow) {
        document.getElementById('prevLPQ').removeAttribute('style');
    } else {
        document.getElementById('prevLPQ').style.display = 'none';
    }
}

function displayBusUnitSub() {
    var buVal = document.getElementById('BusinessUnitID').value;
    document.getElementById("BusinessCycle").selectedIndex = document.getElementById("BusinessCycle").getAttribute("default");
    document.getElementById("Ibap").selectedIndex = document.getElementById("Ibap").getAttribute("default");
    document.getElementById("Bca").selectedIndex = document.getElementById("Bca").getAttribute("default");

    switch (buVal) {
        case '11':
            document.getElementById('buSub0').style.display = 'none';
            document.getElementById('buSub1').removeAttribute('style');
            document.getElementById('buSub2').style.display = 'none';
            break;
        case '1':
            document.getElementById('buSub0').style.display = 'none';
            document.getElementById('buSub1').style.display = 'none';
            document.getElementById('buSub2').removeAttribute('style');
            break;
        default:
            document.getElementById('buSub0').removeAttribute('style');
            document.getElementById('buSub1').style.display = 'none';
            document.getElementById('buSub2').style.display = 'none';
            break;
    }
}

So, the question is…how can I tear out the Style or display properties in a way that will work across all three browsers?

Thanks in Advance.

Answer 1

Use a javascript library like jQuery that already has all the browser compatibility issues sorted and abstracted away.

From the docs it appears to support everything you need:

jQuery supports these browsers:

* Firefox 2.0+
* Internet Explorer 6+
* Safari 3+
* Opera 9+
* Chrome 1+ 

As for the specific jQuery function to to this – look at .toggle().