javascript, zooming in and out of a table
<p>Basically what I want to do is when I scroll up, zoom into my table, making it larger and when I scroll down, zoom out of the table, making it smaller.</p>

<p>Here is the js</p>

<pre><code>    var mainGridW = $("#mainGrid").width();
    var mainGridH = $("#mainGrid").height();

    function setupMouseWheel(){
        if (zoomContainer.addEventListener) {
            zoomContainer.addEventListener('DOMMouseScroll', onMouseWheelSpin, false);
            zoomContainer.addEventListener('mousewheel', onMouseWheelSpin, false); // Chrome
        }else{
            zoomContainer.onmousewheel= onMouseWheelSpin;
        }
    }

    function onMouseWheelSpin(event) { 
        var nDelta = 0;
        if (!event) { event = window.event; }
        // cross-bowser handling of eventdata to boil-down delta (+1 or -1)
        if ( event.wheelDelta ) { // IE and Opera
            nDelta= event.wheelDelta;
            if ( window.opera ) {  // Opera has the values reversed
                nDelta= -nDelta;
            }
        }
        else if (event.detail) { // Mozilla FireFox
            nDelta= -event.detail;
        }
        if (nDelta &gt; 0) {
            HandleMouseSpin( 1, event.clientX, event.clientY );
        }
        if (nDelta &lt; 0) {
            HandleMouseSpin( -1, event.clientX, event.clientY );
        }
        if ( event.preventDefault ) {  // Mozilla FireFox
            event.preventDefault();
        }
        event.returnValue = false;  // cancel default action
    }

    function HandleMouseSpin(delta, x, y) {
        if (delta &lt; 0){ 
            mainGridW = mainGridW/1.10;
            mainGridH = mainGridH/1.10;
            $("#mainGrid").width(mainGridW);
            $("#mainGrid").height(mainGridH);
        }
        if(delta &gt; 0){
            mainGridW = mainGridW*1.10;
            mainGridH = mainGridH*1.10;
            $("#mainGrid").width(mainGridW);
            $("#mainGrid").height(mainGridH);
        }
    }
</code></pre>

<p>Here is the html</p>

<pre><code>&lt;body onload="setupMouseWheel();"&gt;

&lt;div id="zoomContainer"&gt;
    &lt;table id="mainGrid" height="100%" width="100%" cellpadding="0" cellspacing="0"&gt;&lt;/table&gt;    
&lt;/div&gt;

&lt;/body&gt;
</code></pre>

<p>This all works, except one problem... In firefox there is a lag before it will work. When I try to scroll it says "not responding" for a few seconds then after it starts to respond again it will work but very slowly. Any ideas? Thanks in advance.</p>
