ArthurTrabalho

Boa tarde galera, beleza pura? Então, to com um problema aqui no javascript para aumentar e diminuir letra do site. Inicialmente ele está funcionando perfeitamente, entretanto para acessibilidade e usabilidade do site, ele está com uns problemas que estou com dificuldade para resolver. Eis o código //INICIA O AUMENTO DAS LETRAS var tagAlvo = new Array('ul', 'p', 'h2', 'dd', 'dt'); //pega todas as tags p// // Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small... var tamanhos = new Array( '0.3em','0.6em','0.7em','0.8em','0.9em','1.0em'); var tamanhoInicial = 3; function mudaTamanho( idAlvo,acao ){ if (!document.getElementById) return var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo; tamanho += acao; if ( tamanho < 0 ) tamanho = 0; if ( tamanho > 5 ) tamanho = 5; tamanhoInicial = tamanho; if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ]; selecionados.style.fontSize = tamanhos[ tamanho ]; for ( i = 0; i < tagAlvo.length; i++ ){ tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] ); for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ]; } } // ACABA O AUMENTA DAS LETRAS Então o seguinte problema é: No site possuo vários estilos, vários tamanhos de letras, menores e maiores. Quando eu coloco para aumentar uma letra, por exemplo uma tag <p></p> que está com o tamanho 8, ele aumenta perfeitamente para 9,10,11,12. Entretanto outra tag <p></p> possui o tamanho 12, e quando clico para aumentar a letra do site, ele parte do 9,10,11,12 igual que está no código. Isso é um problema chato pois todas as letras acabam tendo o mesmo tamanho definido no javascript. Mesmo eu diminuindo/aumentando para a letra que estava antes, as outras acabam perdendo a formatação. Meu pensamento para esse problema seria trabalhar com CSS ao invés de tamanho de letras. O código seria mais ou menos assim. var tagAlvo = new Array('ul', 'p', 'h2', 'dd', 'dt'); //pega todas as tags p// var cssVet = new Array("css1","css2","css3","css4","css5","css6", "css7", "css8", "css9", "css10"); var cssInicial = 4; function setTamanho(idAlvo, acao ) { if (!document.getElementById) return var selecionados = null, tamanho = cssInicial, i, j, tagsAlvo; if (tamanho < 1 && acao == -1 ) return; if (tamanho > 8 && acao == 1) return; tamanho += acao; cssInicial = tamanho; if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ]; for ( i = 0; i < tagAlvo.length; i++ ) { tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] ); for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].className = cssVet[ tamanho ]; } } Enfim, não resolveu nada pois ainda ta dando problema que eu citei de tamanhos diferente e etc e tals. Alguém poderia me da uma luz? Agradeceria, obrigado :D

É.. esse do background não funcionou Mas a ideia é essa Fernando A seta está assim ==> Quando clicar no link e abrir o div com as informações abaixo a Seta vai mudar para || || \/ Só que não sei como realizar isso.

Boa tarde amigos, Estou com uma dificuldade imensa numa página aqui no Trabalho. Desenvolvemos uma nova página pra sessão Download, usando nas Divs o display none. Então, quando você clicasse em um dos Links de sua escolha, abria uma div abaixo do link com as informações para Download, se clicasse novamente, fechava essa Div. Nesse menu que "(ul, li)", definimos no CSS uma Seta azul pra ele. Entretanto gostariamos de mudar a seta para algo que mostrasse que iria expandir, que mudasse essa figura. Aplicamos no CSS o a:visited Entretando ela não retorna a Seta azul (inicial) quando clica novamente. Pensamos em fazer via javascript, talvez aproveitar a função que já criamos para abrir os Divs, só que não estamos conseguindo. O problema é que o site tem que ser acessível, não podemos colocar .jpg no código fonte, somente via CSS, pois caso contrário teremos que definir as imagens e monte de coisa .... Passarei o código aqui, pois não tem como da upload (estou no trabalho) Inicio da parte em que eu falei Código Fonte <ul id="ListaDropDown"> <li><a href="java script:mostraDetalhes('abraModulo');" ><strong>Módulo de Segurança Banestes</strong></a></li> </ul> <div id="abraModulo" style="display:none"> <p>Dispositivo de proteção que, durante a realização de suas transações eletrônicas no <span lang="en" xml:lang="en">Internet Banking</span>, atua como uma "blindagem" em seu computador, protegendo-o contra ataques de programas maliciosos.</p> <ul id="ListaDropDown_sub"> <li><a href="http://www.banestes.com.br/seguranca/index_modulo.htm">Saiba mais sobre o módulo.</a></li> </ul> <div id="NotasExplicativas" class="margem20"> <p><strong>Módulo de Segurança Banestes </strong></p> <p><strong>Tipo de Arquivo:</strong> Executável (.exe)</p> <p><strong>Tamanho:</strong> 5,93 MB</p> <p> <input name="download" type="button" id="download" onclick="displayWindow('https://seg.banestes.com.br/plugin/modulobanestes.exe','download','600','450','scrollbars=no,toolbar=no,status=yes,resizable=no')" onkeypress="displayWindow('https://seg.banestes.com.br/plugin/modulobanestes.exe','download','600','450','scrollbars=no,toolbar=no,status=yes,resizable=no')" value="Download do Módulo" /> </p> </div> </div> <!-- fecha div abraModulo --> CSS #ListaDropDown{ display:block; clear:both; margin:5px 0px; list-style-type:none; } #ListaDropDown_sub{ display:block; clear:both; margin:5px 0px 0px 20px; list-style-type:none; } .margem20 p{ margin-left:30px; } #ListaDropDown_sub ListaNumerada p{ margin:5px 0px 0px 20px; } #ListaDropDown_sub li { font-size:0.83em; display:block; margin:0.2em 5px; list-style-type:none; } #ListaDropDown_sub li a { display:block; background:url('img/seta_up.png') no-repeat; margin:0px; padding:4px 0px 5px 25px; *padding:2px 0px 5px 25px; color:#666; } #ListaDropDown li { font-size:0.83em; display:block; margin:0.2em 5px; list-style-type:none; } #ListaDropDown li a { display:block; background:url('http://www.banestes.com.br/img/seta.png') no-repeat; margin:0px; padding:4px 0px 5px 25px; *padding:2px 0px 5px 25px; } #ListaDropDown li a:hover { display:block; background: url('http://www.banestes.com.br/img/seta_on.png') no-repeat; margin:0px; padding:4px 0px 5px 25px; *padding:2px 0px 5px 25px; } Javascript que abre e fecha as Divs function mostraDetalhes(c){ if (document.getElementById(c).style.display == 'none'){ document.getElementById(c).style.display = ''; } else { document.getElementById(c).style.display = 'none'; } } A seta http://www.banestes.com.br/img/seta.png

Boa tarde amigos, Estou com uma dificuldade imensa numa página aqui no Trabalho. Desenvolvemos uma nova página pra sessão Download, usando nas Divs o display none. Então, quando você clicasse em um dos Links de sua escolha, abria uma div abaixo do link com as informações para Download, se clicasse novamente, fechava essa Div. Nesse menu que "(ul, li)", definimos no CSS uma Seta azul pra ele. Entretanto gostariamos de mudar a seta para algo que mostrasse que iria expandir, que mudasse essa figura. Aplicamos no CSS o a:visited Entretando ela não retorna a Seta azul (inicial) quando clica novamente. Pensamos em fazer via javascript, talvez aproveitar a função que já criamos para abrir os Divs, só que não estamos conseguindo. O problema é que o site tem que ser acessível, não podemos colocar .jpg no código fonte, somente via CSS, pois caso contrário teremos que definir as imagens e monte de coisa .... Passarei o código aqui, pois não tem como da upload (estou no trabalho) Inicio da parte em que eu falei Código Fonte <ul id="ListaDropDown"> <li><a href="java script:mostraDetalhes('abraModulo');" ><strong>Módulo de Segurança Banestes</strong></a></li> </ul> <div id="abraModulo" style="display:none"> <p>Dispositivo de proteção que, durante a realização de suas transações eletrônicas no <span lang="en" xml:lang="en">Internet Banking</span>, atua como uma "blindagem" em seu computador, protegendo-o contra ataques de programas maliciosos.</p> <ul id="ListaDropDown_sub"> <li><a href="http://www.banestes.com.br/seguranca/index_modulo.htm">Saiba mais sobre o módulo.</a></li> </ul> <div id="NotasExplicativas" class="margem20"> <p><strong>Módulo de Segurança Banestes </strong></p> <p><strong>Tipo de Arquivo:</strong> Executável (.exe)</p> <p><strong>Tamanho:</strong> 5,93 MB</p> <p> <input name="download" type="button" id="download" onclick="displayWindow('https://seg.banestes.com.br/plugin/modulobanestes.exe','download','600','450','scrollbars=no,toolbar=no,status=yes,resizable=no')" onkeypress="displayWindow('https://seg.banestes.com.br/plugin/modulobanestes.exe','download','600','450','scrollbars=no,toolbar=no,status=yes,resizable=no')" value="Download do Módulo" /> </p> </div> </div> <!-- fecha div abraModulo --> CSS #ListaDropDown{ display:block; clear:both; margin:5px 0px; list-style-type:none; } #ListaDropDown_sub{ display:block; clear:both; margin:5px 0px 0px 20px; list-style-type:none; } .margem20 p{ margin-left:30px; } #ListaDropDown_sub ListaNumerada p{ margin:5px 0px 0px 20px; } #ListaDropDown_sub li { font-size:0.83em; display:block; margin:0.2em 5px; list-style-type:none; } #ListaDropDown_sub li a { display:block; background:url('img/seta_up.png') no-repeat; margin:0px; padding:4px 0px 5px 25px; *padding:2px 0px 5px 25px; color:#666; } #ListaDropDown li { font-size:0.83em; display:block; margin:0.2em 5px; list-style-type:none; } #ListaDropDown li a { display:block; background:url('http://www.banestes.com.br/img/seta.png') no-repeat; margin:0px; padding:4px 0px 5px 25px; *padding:2px 0px 5px 25px; } #ListaDropDown li a:hover { display:block; background: url('http://www.banestes.com.br/img/seta_on.png') no-repeat; margin:0px; padding:4px 0px 5px 25px; *padding:2px 0px 5px 25px; } Javascript que abre e fecha as Divs function mostraDetalhes(c){ if (document.getElementById(c).style.display == 'none'){ document.getElementById(c).style.display = ''; } else { document.getElementById(c).style.display = 'none'; } } A seta http://www.banestes.com.br/img/seta.png OBS:: Desculpe, postei nessa sessão e não tinha lido que não valia para Javascript