[css 2.1] fixed-liquid-fixed

[Abutre]

Aos webdesigners,

pessoal, preciso de uma solução para permitir que as colunas fixed de um layout fixed-liquid-fixed possam ser escondidas (toggled).

Alguém sabe de alguma pronta ou algum controle jquery que faça esse wrap?

hoje, o código está assim:

CSS:


#divPrincipal {
width: 100%;
margin: 0 auto;
}

#divTopo
{
background-image: url('../SiteImages/TopoBackground.jpg');
background-repeat: no-repeat;
background-position: right;
background-color: #f3f2f2;
height: 74px;
}


#divBarraSuperior
{
background-color: #505050;
background-image: url('../SiteImages/BarraBackground.jpg');
background-repeat: repeat-x;
height: 50px;
}


#wrapDivConteudoCentro
{
float: left;
width: 100%;
}
#divConteudoCentro
{
margin-right:175px;
margin-left:175px;
}


#divConteudoEsquerda
{
margin-left: -100%;
width: 175px;
float: left;
background-color: #CCC;
}


#divconteudoDireita
{
float: left;
width: 175px;
margin-left: -175px;
background-color: #CCC;
}


HTML:


<div id="divPrincipal">
<div id="divTopo">
</div>
<div id="divBarraSuperior">
</div>
<div id="wrapDivConteudoCentro">
<div id="divConteudoCentro">
<asp:ContentPlaceHolder runat="server" ID="MainContent">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="divConteudoEsquerda">
a
</div>
<div id="divconteudoDireita">
a
</div>
</div>

 

[TechMaster]

Porque não faz em jScript?

<script language="javascript"> 
function toggle(ChangeID) {
        var c1  = document.getElementById('chart_1');
        var c2  = document.getElementById('chart_2');
        var c3  = document.getElementById('chart_3');
        var c4  = document.getElementById('chart_4');
        var c5  = document.getElementById('chart_5');
        var c6  = document.getElementById('chart_6');
        var c7  = document.getElementById('chart_7');
	var ele = document.getElementById(ChangeID);
	if (ChangeID == 'chart_1'){
    		c2.style.display = "none";
    		c3.style.display = "none";
    		c4.style.display = "none";
    		c5.style.display = "none";
                c6.style.display = "none";
                c7.style.display = "none";        
        }
	if (ChangeID == 'chart_2'){
    		c1.style.display = "none";
    		c3.style.display = "none";
    		c4.style.display = "none";
    		c5.style.display = "none";
                c6.style.display = "none";        
                c7.style.display = "none";
        }
	if (ChangeID == 'chart_3'){
    		c1.style.display = "none";
    		c2.style.display = "none";
    		c4.style.display = "none";
    		c5.style.display = "none";
                c6.style.display = "none";        
                c7.style.display = "none";
        }
	if (ChangeID == 'chart_4'){
    		c1.style.display = "none";
    		c2.style.display = "none";
    		c3.style.display = "none";
    		c5.style.display = "none";
                c6.style.display = "none";        
                c7.style.display = "none";
        }
	if (ChangeID == 'chart_5'){
    		c1.style.display = "none";
    		c2.style.display = "none";
    		c3.style.display = "none";
    		c4.style.display = "none";
                c6.style.display = "none";        
                c7.style.display = "none";
        }
	if (ChangeID == 'chart_6'){
    		c1.style.display = "none";
    		c2.style.display = "none";
    		c3.style.display = "none";
    		c4.style.display = "none";
                c5.style.display = "none";        
                c7.style.display = "none";
        }
	if (ChangeID == 'chart_7'){
    		c1.style.display = "none";
    		c2.style.display = "none";
    		c3.style.display = "none";
    		c4.style.display = "none";
                c5.style.display = "none";        
                c6.style.display = "none";
        }
	if(ele.style.display == "block") {
    		ele.style.display = "none";
  	}
	else {
		ele.style.display = "block";
	}
        
} 
</script>

Você pode ve-lo em ação na parte de dados do Google Analytics do meu site. Vá em 'Uso do site'. Basicamente o que ele faz é esconder/mostrar a Div de acordo com o Id dela quando clica no link da tabela, para mostrar somente o gráfico da linha que vc quer.

 

[LuketaD2]

Uma função de toggle que você pode usar por jQuery

<script>
$("button").click(function () {
$("p").toggle("slow");
});    
</script>

Ai você pode alterar para hover, click, etc..

 

[Abutre]

Galera, valeu pela disposição, mas acabamos de decidir em deixar de lado as "colunas"...

vamos fazer somente seções horizontais pra ganhar espaço horizontal no conteúdo principal, visto que é um sistema com muitos dados.

Qualificações distribuidas do mesmo jeito.