Artigos HTML e CSS Splitter em Javascript
Vamos começar criando o HTML. 

<html>
<head>
    <title>Splitter</title>
</head>
<body>

Agora vamos colocar a tag style aqui estamos configurando a página para não ter margem e bloqueando a barra de scroll;

Agora vamos criar a tag table, essa tag fica dentro da tag body e /body.
Aqui vamos colocar os códigos javascript e o conteúdo da página. 




        

            
                

                     Conteúdo do painel esquerdo. 
                

            		
            
            
            
                

                    

                        
                            

                                 Conteúdo do painel direito/topo. 
                            

                        		
                    

                    

                        
                    

                    

                        
                            

                                 Conteúdo do painel direito/fundo.

As tag div e /div é onde podemos colocar as imagens, textos e etc.
O evento onmousedow é quando clicamos e seguramos o botão do mouse. As funções setResizePanelVTrue() e setResizePanelHTrue() vou explicar depois.

Agora vamos criar a tag script, pode ser colocado dentro das tags head e /head: 

  <script language="javascript" type="text/javascript">
  </script>
As funções que criaremos agora, vão ser colocadas dentro da tag script.
A função disableEnabledSelection() vai desabilitar a seleção de texto quando o evento onmousedow for disparado. 

function disableEnabledSelection(target, isEnabled) {
    if (typeof target.onselectstart != "undefined") //IE route
    {
        if (isEnabled == false) {
            target.onselectstart = function () { return false }
            target.style.cursor = "default";
        }
        else {
            target.onselectstart = null;
            target.style.cursor = null;
        }
    }
    else if (typeof target.style.MozUserSelect != "undefined") //Firefox route
    {
        if (isEnabled == false) {
            target.style.MozUserSelect = "none"
            target.style.cursor = "default";
        }
        else {
            target.style.MozUserSelect = null;
            target.style.cursor = null;
        }
    }
    else { //All other route (ie: Opera)
        if (isEnabled == false) {
            target.onmousedown = function () { return false }
            target.style.cursor = "default";
        }
        else {
            target.onmousedown = null;
            target.style.cursor = null;
        }
    }
}

A função getWidthScreen() vai obter a largura da tela do cliente. 

function getWidthScreen() {
    var myWidth = 0;

    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        myWidth = document.documentElement.clientWidth;
    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
    }

    return myWidth;
}

A função getWidthScreen() vai obter a altura da tela do cliente. 

function getHeightScreen() {
    var myHeight = 0;

    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        myHeight = window.innerHeight;
    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myHeight = document.documentElement.clientHeight;
    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        myHeight = document.body.clientHeight;
    }

    return myHeight;
}

A função setSize() é onde vamos redimensionar as tags tr, td, div de acordo com a posição do mouse e o tamanho da tela do cliente. 


function setSize() {
    var objMainTR = document.getElementById('mainTR');
    var objPanelLeftTD = document.getElementById('panelLeftTD');
    var objPanelRightTD = document.getElementById('panelRightTD');
    var objPanelTopRightTR = document.getElementById('panelTopRightTR');
    var objPanelBottomRightTR = document.getElementById('panelBottomRightTR');

    var objContentLefDiv = document.getElementById('contentLefDiv');
    var objContentTopRightDiv = document.getElementById('contentTopRightDiv');
    var objContentBottomRightDiv = document.getElementById('contentBottomRightDiv');

             
    var myWidth = getWidthScreen();
    var myHeight = getHeightScreen();

    if (myHeight > 0) {
        objMainTR.style.height = myHeight + 'px';

        objPanelRightTD.style.width = (myWidth - parseInt(objPanelLeftTD.style.width) - 2) + 'px';

        objPanelBottomRightTR.style.height = (myHeight - parseInt(objPanelTopRightTR.style.height) - 2) + 'px';

        objContentLefDiv.style.height = myHeight + 'px';
        objContentTopRightDiv.style.height = parseInt(objPanelTopRightTR.style.height) + 'px';
        objContentBottomRightDiv.style.height = parseInt(objPanelBottomRightTR.style.height) + 'px';
    }
}

A função setResizePanelVTrue() coloca para true a variável isResizePanelV, indicando que nesse momento pode ser redimensionado verticalmente. 


var isResizePanelV;

function setResizePanelVTrue() {
    isResizePanelV = true;
}

A função setResizePanelHTrue() coloca para true a variável isResizePanelH, indicando que nesse momento pode ser redimensionado horizontalmente. 


var isResizePanelH;

function setResizePanelHTrue() {
    isResizePanelH = true;
}

A função setResizePanelFlase() coloca para false as variáveis isResizePanelV e isResizePanelH, indicando que nesse momento não pode ser redimensionado verticalmente e horizontalmente. Essa função é chamada quando o evento onmouseup é disparado, esse evento é disparado quando o soltamos o botão do mouse. 


function setResizePanelFalse() {
    isResizePanelV = false;
    isResizePanelH = false;

    disableEnabledSelection(document.body, true);
}

A função rezisePanel() é chamada quando o evento onmousemove é disparado, a função verifica qual redimensionamento está habilitado. 


function resizePanel(evt) {
    if (isResizePanelV) {
        resizePanelV(evt);
    }
    else if (isResizePanelH) {
        resizePanelH(evt);
    }
}

A função resizePanelV() obtém o valores do mouse, redimensiona verticalmente o objeto panelTopRightTR, chama a função setSize() e a função disableEnabledSelection().


function resizePanelV(evt) {
    if (isResizePanelV) {
        var objPanelTopRightTR = document.getElementById('panelTopRightTR');

        var e = null;
        var isMz = false; //Indica que o browser é Mozila
        var valueWidth = 0;

        if (window.event) {
            e = window.event; //Dados do evento.
        }
        else {
            e = evt; //Dados do evento.
            isMz = true;
        }

        disableEnabledSelection(document.body, false); //Desabilita a seleção de texto;

        if (isMz == false && (e.pageX || e.pageY)) {
            valueHeight = e.pageY;
        }
        else if (isMz == false && (e.clientX || e.clientY)) {
            valueHeight = (e.clientY + document.body.scrollTop + document.documentElement.scrollTop);
        }
        else if (isMz) {
            valueHeight = e.pageY;
        }

        var myHeight = getHeightScreen();

        if ((myHeight - 200) > valueHeight) {
            if (valueHeight > 200) {
                objPanelTopRightTR.style.height = valueHeight + 'px';
            }
            else {
                objPanelTopRightTR.style.height = '200px';
            }

            setSize();
        }
    }
}

A função resizePanelH() obtém o valores do mouse, redimensiona horizontalmente o objeto panelLeftTD, chama a função setSize() e a função disableEnabledSelection().


function resizePanelH(evt) {
    if (isResizePanelH) {
        var objPanelLeftTD = document.getElementById('panelLeftTD');

        var e = null;
        var isMz = false;//Indica que o browser é Mozila.
        var valueWidth = 0;

        if (window.event) {
            e = window.event;//Dados do evento.
        }
        else {
            e = evt;//Dados do evento.
            isMz = true;
        }

        disableEnabledSelection(document.body, false);//Desabilita a seleção de texto;

        if (isMz == false && (e.pageX || e.pageY)) {
            valueWidth = e.pageX;
        }
        else if (isMz == false && (e.clientX || e.clientY)) {
            valueWidth = (e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
        }
        else if (isMz) {
            valueWidth = e.pageX;
        }

        var myWidth = getWidthScreen();

        if ((myWidth - 300) > valueWidth) {
            if (valueWidth > 200) {
                objPanelLeftTD.style.width = valueWidth + 'px';
            }
            else {
                objPanelLeftTD.style.width = '200px';
            }

            setSize();
        }
    }
}

Aqui indicamos aos eventos quais funções serão chamadas quando forem disparados os eventos. 

        window.onload = setSize;
        window.onresize = setSize;
        document.body.onmousemove = resizePanel;
        document.body.onmouseup = setResizePanelFalse;

Abaixo mostro como vai ficar a visualização.



Até o próximo artigo.