Alteração de CSS via javascript

Front-end
#1

Olá galera tudo bem?

Estou com um problema na “conexão” do meu projeto, que que rola. Tenho uma pagina Web que tem sua folha de estilo (arquivo CSS), através do javaScript era pra eu alterar alguns dados da minha pagina, como width e height, o problema é que estou errando algo nas referências ou nomeclatura de modo que não ocorre essa alteração e como não ocorre nenhum indicativo de erro, estou a dias parado nisso… Segue abaixo trechos de códigos com explicações para ficar mais facil de entender.

Em um determinado ponto da minha página Web, irei clicar em um botão:

Main.xhtml

[code]



    <!-- Javascript de configuracao do grafico         -->
    <script type="text/javascript" src="/Towers/JavaScript/Coordenadas.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="/Towers/JavaScript/Tema1.js"></script>

    <!-- Javascript utilizados pelo DWR             -->
    <script type='text/javascript' src='/Towers/dwr/engine.js'></script>
    <script type='text/javascript' src='/Towers/dwr/interface/Graficos.js'></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


    <!-- Demais javascripts -->
    <script type="text/javascript" src="JavaScript/jquery.form.js"/>
    <script type="text/javascript" src="JavaScript/jquery.tools.min.js"/>
    <script type="text/javascript" src="JavaScript/jquery.scrollTo-1.4.3.1-min.js"/>
    <script type="text/javascript" src="JavaScript/init.js"/>
  <!--  <script type="text/javascript" src="JavaScript/panels.js"/-->
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
            
    <!-- Métodos javascript a serem executados na inicialização da página -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"/>

<h:body>

    <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:1255px;height:900px" />
     
    </div>
    <h:panelGroup layout="block" id="externLayout" styleClass="extern_layout">

	<h:panelGroup layout="block" id="modalPanel" styleClass="panel_modal"/> 
	
	<ui:include src="InfoPanel.xhtml" />
            <ui:include src="menuPanel.xhtml" />
            <ui:include src="panels.xhtml" />
            <ui:include src="paineis/configWindow.xhtml" />
           
	
</h:panelGroup>

</h:body>[/code]

No trecho acima existem alguns termos não apresentados, isto pra focar no problema.

Em determinado ponto do programa em menuPanel.xhtml teremos um evento ao clicar em um botão

[code]

    • [/code] Que chama a managePanel presente em um javaScript

    [code]function managePanels(namePanel, nameIcon, needSystem) {
    alert(namePanel);
    /* Caso seja necess�rio um sistema, e nenhum encontra-se carregado,
    * exibe o painel correspondente para notificar o usu�rio desse fato */
    if(needSystem && !systemLoadedFlag)
    currentOpenedPanel = ‘noSystemLoaded_window’;

/* Salva o nome do painel a ser aberto */
else
	currentOpenedPanel = namePanel;

/* Caso nenhum painel tenha sido aberto antes, centraliza
 * o painel e o exibe na tela */
            
if(typeof lastOpenedPanel == 'undefined') {
        alert(currentOpenedPanel);
	centerPanel(currentOpenedPanel);
           
            $("#config_panel").fadeIn("fast");
	//$('#' + currentOpenedPanel).fadeIn('fast');                
            alert("estou tentando abrir a bendita")
}

/* Caso algum painel j&#65533; tenha sido carregado e o mesmo seja
 * diferente do painel que se deseja abrir, esconde o painel
 * corrente, e abre o novo painel */
else if(lastOpenedPanel != currentOpenedPanel) {
	$('#' + lastOpenedPanel).fadeOut('fast');
	centerPanel(currentOpenedPanel);
	$('#' + currentOpenedPanel).fadeIn('fast');
}
   // alert("estou perto do currentcolored");
currentColoredIcon = nameIcon;

/* Caso nenhum painel tenha sido aberto ainda, colore o &#65533;cone
 * do painel a ser aberto */
if(typeof lastColoredIcon == 'undefined')
	$('#' + currentColoredIcon).stop().animate({'opacity': '1'}, 'fast');

/* Caso algum painel j&#65533; tenha sido aberto, e o mesmo seja
 * diferente do painel que se quer abrir, descolore o &#65533;cone
 * atual e colore o novo &#65533;cone */
else if(lastColoredIcon != currentColoredIcon) {
	$('#' + lastColoredIcon).stop().animate({'opacity': '0'}, 'fast');
	$('#' + currentColoredIcon).stop().animate({'opacity': '1'}, 'fast');
}

/* Atualiza os nomes do painel e do &#65533;cone abertos */
lastOpenedPanel = currentOpenedPanel;
lastColoredIcon = currentColoredIcon;
    alert("estou no fim da primeira func");

}[/code]

Que por fim, chama o trecho abaixo, os alerts estão me indicando o problema, ja que width e heght estão retornando null

[code]function centerPanel(name) {

/* Elemento correspondente ao painel */
var table = $("\""+"."+name+"\"");        
    alert(table+"estou aqui");    

    /* Largura do painel */        
    var width = table.width();
    //var width = table.width();
alert (width);
    alert("Estou em baixo do width");
/* Altura do painel */
var height = table.height();
alert(height);

    /* Retorno da margem esquerda */
var marginLeft = (width/2)*(-1);
alert(marginLeft);

    /* Retorno da margem superior */
var marginTop = (height/2)*(-1);
alert(marginTop);
table.css("margin-top", marginTop+"px");
table.css("margin-left", marginLeft+"px");
    alert("estou dentro do centerPanel!!!!!!!!!!!!!!");

}[/code]

Se puder me ajudar com dicas e sugestões, fico agradecido

abraços

#2