JavaScript Events: OnResizeStart, OnResize, and OnResizeComplete

    var _timerID = 0;
    var _prevWidth = 0;
    
    function splitterOnResizeStart(splitterBar)
    {
        // Arguments:
        // splitterBar is a VwdCmsSplitterBar object

        // ** the actual div element that you see on the 
        // screen can be accessed by using splitterBar.splitterBar
        // or by document.getElementById('splitterBarID')
        // where 'splitterBarID' is the ID of the server control
        // in your ASPX code.
        
        // check to see which splitterBar fired this event
        if ( splitterBar  splitterBar.id == "vwdSplitter1" )
        {
            setupTimer("divAlert");
            
            document.getElementById("divDirection").style.display = "block";
        }
    }
    function splitterOnResize(splitterBar, width)
    {
        // Arguments:
        // splitterBar is a VwdCmsSplitterBar object
        // width is a string like "250px
        
        // ** the actual div element that you see on the 
        // screen can be accessed by using splitterBar.splitterBar
        // or by document.getElementById('splitterBarID')
        // where 'splitterBarID' is the ID of the server control
        // in your ASPX code.

        // do any other work that needs to happen when the 
        // splitter resizes. this is a good place to handle 
        // any complex resizing rules, etc.

        // make sure the width is in number format
        if (typeof width == "string")
        {
            width = new Number(width.replace("px",""));
        }
        
        // check to see which splitterBar fired this event
        if ( splitterBar  splitterBar.id == "vwdSplitter1" )
        {
            var div = document.getElementById("divDirection");
            
            if ( _prevWidth != 0 )
            {
                if ( width  _prevWidth )
                {
                    div.innerHTML = ">> MOVING TO THE RIGHT >>";
                }
                else
                {
                    div.innerHTML = "<< MOVING TO THE LEFT <<";
                }
            }
            _prevWidth = width;
        }
    }
    function splitterOnResizeComplete(splitterBar, width)
    {
        // Arguments:
        // splitterBar is a VwdCmsSplitterBar object
        // width is a string like "250px
        
        // ** the actual div element that you see on the 
        // screen can be accessed by using splitterBar.splitterBar
        // or by document.getElementById('splitterBarID')
        // where 'splitterBarID' is the ID of the server control
        // in your ASPX code.
                
        // check to see which splitterBar fired this event
        if ( splitterBar  splitterBar.id == "vwdSplitter1" )
        {
            cancelTimer("divAlert");

            var div = document.getElementById("divDirection");
            div.style.display = "none";
            div.innerHTML = "";
            _prevWidth = 0;
        }
    }    
    function setupTimer(controlId)
    {
        cancelTimer(controlId);
        _timerID = setInterval("showAlert('" + controlId + "');", 300);
    }
    function cancelTimer(controlId)
    {
        if ( _timerID != 0 )
        {
            hideAlert(controlId);
            clearInterval(_timerID);
            _timerID = 0;
        }
    }
    
    function showAlert(controlId) 
    {
        var element = document.getElementById(controlId);

        if ( element  element.style )
        {
            element.style.display = "block";
            
            if (element.style.fontWeight == "bold")
            {
                element.style.fontWeight = "normal";
            }
            else
            {
                element.style.fontWeight = "bold";
            }
        }
    }    
    function hideAlert(controlId) 
    {
        var element = document.getElementById(controlId);

        if ( element  element.style )
        {
            element.style.display = "none";
            element.style.fontWeight = "normal";
        }
    }