Dúvida Javascript + CSS (Aumentar e diminuir fonte)

[evertonmanager]

Bom galera... Tenho uma dúvida com relação à utilização de JavaScript e "fusão" com CSS...

Ocorre o seguinte... Tenho uma página na qual inseri aquele recurso de acessibilidade de aumentar e diminuir a fonte.

Pois bem, utilizei DIV's no layout da página e dei a eles diferentes ID's.

Em seguida, utilizei o código JavaScript da seguinte forma:

Adicionei um "document.getElementById(elemento)" onde o "elemento" se torna mais para frente a ID da DIV, ou seja...

elemento("conteudo" , valor);

Resumindo... Identifiquei a DIV a ter a fonte modificada através de sua ID e apontei a ID no JavaScript usando o getElementByID.

Porém, para que isso viesse a funcionar, fui obrigado a desabilitar meu estilo CSS na DIV, por algum motivo que desconheço, pois pelo que pude constatar em testes, o navegador simplesmente "ignora" o comando JavaScript que aumenta e diminui a fonte quando a mesma está formatada por CSS.

Sendo assim, gostaria de saber se existe a possibilidade de utilizar um "getElementByClass" e apontar o nome do estilo CSS ao invés de apontar a ID da DIV.

Alguém sabe fazer isso ou sabe se isso é possível com JavaScript e CSS???

Valeu!!

Editado Janeiro 22, 2008 por evertonmanager

[evertonmanager]

Aeee...

Numa última tentativa desesperada consegui fazer funcionar!!!

Simplesmente tirei do CSS o "font size" e o comando JavaScript para aumentar e diminuir a fonte passou a ser aceito normalmente, mesmo com a implementação do CSS!!!

HuaHAAHhahauHA

Como não pensei nisso antes!??

Bom, obrigado a todos ae pela ajuda mesmo assim! Aprendi muito aqui no fórum!!!

[KaKarotto]

É alguma coisa você fez de errado amigo. O javascript pode transcrever o Css sem problemas. Aliás, se pensarmos um pouco, a página deveria vir sem Css para utilizarmos o javascript para vários elementos não é? Não faz sentido algum.

Se utilizasse:

<style>
#caixa{
font-size:8pt
}
</style>

<div id="caixa">
Texto Texto Texto Texto Texto Texto
</div>

<script>
document.getElementById('texto').style.fontSize="25pt"
</script>

Funcionaria do mesmo jeito....

[evertonmanager]

É alguma coisa você fez de errado amigo. O javascript pode transcrever o Css sem problemas. Aliás, se pensarmos um pouco, a página deveria vir sem Css para utilizarmos o javascript para vários elementos não é? Não faz sentido algum.

Se utilizasse:

<style>
#caixa{
font-size:8pt
}
</style>

<div id="caixa">
Texto Texto Texto Texto Texto Texto
</div>

&lt;script>
document.getElementById('texto').style.fontSize="25pt"
</script>

Funcionaria do mesmo jeito....

Ah sim... Compreendi agora o que você quis dizer KaKarotto.

Funcionaria mesmo por exemplo, se eu apontasse no JavaScript o getElementByClass('texto") e apontasse na DIV um parâmetro Class="texto"...

Acredito que ela lógica seja essa, pois nunca testei isso...

Seguindo isso, imagino que o FontSize do CSS não iria interferir no ato de aumentar ou diminuir a fonte... Correto?

Vou ver aqui se funciona... Valeu...

[evertonmanager]

Ok...

Agora meu script tá funcionando... mais ou menos, preciso limpar ele um pouco...

Surgiu uma outra questão... Como eu poderia limitar o número de clicks no botão "aumentar" e no botão "diminuir"?

Pois, deve haver um limite para que o layout da página não quebre... Alguém tem alguma idéia de como limitar o número de clicks em um botão???

[fercosmig]

você pode atribuir a quantidade de click's a uma variavel ou a um campo hidden e quando o cara clicar você verifica o número do click e se o mesmo for maior ou igual ao seu limite, não executa nenhuma ação.

[evertonmanager]

Ae fercosmig, gostei da SIGN...

Hehe

Entendi mais ou menos o que você quis dizer... Não sou muito bom de JS....

Em todo caso, você poderia por favor dar um exemplo prático de como atribuir um limite de cliques em uma variável e como checar se o limite foi atingido??

Valeu rapa...

[fercosmig]

um exemplo bem simples usando variável, você pode adaptar ae

<script language="javascript" type="text/javascript">
<!--
contador = 0
function verif(param){
    switch(param){
        case '+':
            contador++;
            break;
        case '-':
            contador--;
            break;
    }
    if(contador < -5 || contador > 5){
        alert('erro')
    }
}
-->
</script>

<input type="button" name="btn1" value="+" onClick="java script:verif('+');" />
<input type="button" name="btn2" value="-" onClick="java script:verif('-');" />

[KaKarotto]

Fazendo uma das opções que o fercosmig propôs:

Antes das tags <head></head>:

<script type="text/javascript">

function zoom(tipo){
 if(tipo=="+" && limite<3){
 suaFuncaoDeaumento()
 limite++
 }

 else if(tipo=="-" && limite>-3){
 suaFuncaoDeDiminuicao()
 limite--
 }
}

window.onload=function(){
 limite=0
 var div=document.getElementById("zoom")
 var alinks=div.getElementsByTagName("a")
 a[0].onclick=function(){zoom("+")}
 a[1].onclick=function(){zoom("-")}
}

</script>

<div id="zoom">
<a href="#">+</a>
<a href="#">-</a>
</div>

Depois da janela loadear ("window.onload") cria uma variável limite valendo 0, pega os dois links da seção zoom ("div") e dá o evento onclick para cada uma delas. Uma com argumento de "+" e outra com "-". Se for clicado o link "+" a pagina é aumentada e a variável limite é incrementada. O mesmo ocorre com o inverso. No if você declara o máximo e o mínimo.

você pode usar a função que fiz "zoom" para já embutir sua função que aumenta as letras da página, vai ficar melhor. Ou usar essa idéia de forma diferente, você quem sabe, há várias formas de fazer isso.

Akeleeabrassssss

Edit: Quando voltei pra postar o fercosmig já tinha postado...o.O. Bom, tem duas opções agora ^^.

[evertonmanager]

Ae... Valeu galera...

Deu uma luz aqui... Fiz assim...

Na verdade, estou usando um cookie pra determinar qual tamanho vai ser utilizado...

Então... Determinei que minha função de zoom só vai ser executada se "if (valorinicial>=0.8 && valorinicial<=1.1)", pois estou utilizando valores decimais para o tamanho da fonte...

Assim funcionou perfeitamente... Exceto por um pequeno bugzinho na hora de diminuir... Parece que o cookie tá armazenando o valor e não tá trocando no primeiro click... Vou ver aqui...

Agradeço ae pela ajuda!

Valeuuu!!!

[evertonmanager]

Bom, sobre o bugzinho...

Descobir o por quê dele ocorrer, mas nem sei como solucionar...

Acontece, que se eu clicar 3 vezes no aumentar (após ele chegar ao tamanho máximo) e em seguida clicar no diminuir, terei que clicar 3 vezes no diminuir para que o comando "entre"...

Tipo, parece que tem um delay no cookie e na leitura dele pelo JS...

Alguém sabe como solucionar?

Abaixo, segue a solução que apliquei para o limite de cliques... onde acontece o BUG agora...

if (valorinicial>=0.8 && valorinicial<=1.1){
mudarTamanho(valorinicial);
set_cookie("mudaL",valorinicial);

[KaKarotto]

Tem como postar o código todo? Fica mais fácil pra debugar...

Outra coisa, usar floats ae na sua condição ... até pode funcionar, mas eu não faria isso. Quando o fercosmig e eu postamos o código com número inteiro no contador, fizemos para o javascript saber que ele vai fazer o aumento apenas 3x e a diminuição em 3x. O valor em si do aumento e da diminuição você poderia fazer usando, sei lá: ( 1 * 0.2, 2* 0.2, 3*0.2 ) . Ou seja, você teria um número inteiro para a quantidade e um número de ponto flutuante para fazer a troca do tamanho feito na sua função.

No exemplo que eu tinha dado:

<script type="text/javascript">

function zoom(tipo){
if(tipo=="+" && limite<3){
suaFuncaoDeaumento()
limite++
}

else if(tipo=="-" && limite>-3){
suaFuncaoDeDiminuicao()
limite--
}

set_cookie("mudaL",limite)
}
</script>

O cookie seria atribuido só depois da função de aumento.

Se você postar o código todo fica melhor...

[evertonmanager]

Bom... ocorre que meu código todo é uma bagunça... Pois peguei ele pronto a partir do site http://www.dutyfreedufry.com.br (muito boa a acessibilidade deles).

A partir disso, apenas fiz modificações no funcionamento da função de zoom...

Em todo caso, segue abaixo o código completo onde as funções que estou usando são a INITZOOM e a ZOOM.

<!--

   function CVabre(v){
       var op = MM_findObj(v+"_open");
       var cl = MM_findObj(v+"_close");
       if (op.style.display=="none"){
            op.style.display="";
            cl.style.display="none";
       }else{
            op.style.display="none";
            cl.style.display="";
       }
   }

/**
* Script que gerencia cookies.
*/

/** Funcao que recupera valores no cookie */
function get_cookie(Name) {
   var search = Name + "=";
   var returnvalue = "";

   if (document.cookie.length > 0) {
       offset = document.cookie.indexOf(search);
       if (offset != -1) {
           offset += search.length
           end = document.cookie.indexOf(";", offset);
           if (end == -1) {
               end = document.cookie.length;
           }
           returnvalue = unescape(document.cookie.substring(offset, end));
      }
   }

   return returnvalue;
}

/** Funcao que armazena valores no cookie */
function set_cookie(nome, valor) {
      var date = new Date();
      date.setTime(date.getTime() + 1172800);
      document.cookie = nome + "=" + valor + ";expires=" + date.toGMTString();
}

function clearDefault(el) {
  if (el.getAttribute("iniVal")==el.value) el.value = ""
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_setTextOfLayer(objName,x,newText) { //v4.01
  if ((obj=MM_findObj(objName))!=null) with (obj)
    if (document.layers) {document.write(unescape(newText)); document.close();}
    else innerHTML = unescape(newText);
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


var DOM2=document.getElementById
var valorinicial;

function zoom(Marcos){
    //alert("zoom");
    if (Marcos.indexOf('mais')==0) valorinicial=valorinicial+0.1;
    if (Marcos.indexOf('menos')==0) valorinicial=valorinicial-0.1;
    if (Marcos.indexOf('padrão')==0){
        //verificar se o zoom já está como 1
        if (valorinicial==0.8){
            //já está com 1, ver o estilo de cor
            var title=get_cookie("style");
            if (title!="normal"){
                //mudar os estilos para o normal
                setActiveStyleSheet("normal");
            }
        }else{
            //mudar primeiro o zoom
            valorinicial=0.8;
        }
    }
    if (DOM2){
        if (valorinicial>=0.8 && valorinicial<=1.1){
            mudarTamanho(valorinicial);
            set_cookie("mudaL",valorinicial);
        }
    }
}
function initzoom(valor){
    //alert("valor");
    var v=get_cookie("mudaL");
    if (v!="" && v!="NaN" && v!=null && v!=undefined){
        valor=0.8;
    }
    mudarTamanho(valor);
    valorinicial = valor;
    if(css_btn!="")MM_swapImage(css_btn,'','http://www.dutyfreedufry.com.br/dutyfree/extras/Ocor.gif',1);
    trocalogo();
    MarcaLink();
    MediaPB();
    MM_preloadImages('http://www.dutyfreedufry.com.br/dutyfree/extras/Ocor.gif');
    try{
        img_da_pagina_pg(css_title);
    }catch(e){
    }
}

function MediaPB(){
    //Troca a imagem para PB
    //Desabilitado temporariamente por falta da GD 2.0
    //*
    var imgkey="download.php?id=";
    var pbkey="&pb=s";
    var arr=document.getElementsByTagName("img");
    var i;
    if(css_title!="normal"){
        for(i=0;i<arr.length;i++){
            var pth=arr[i].src;
            if (pth.indexOf(imgkey)!=-1 && pth.indexOf(pbkey)==-1){
                arr[i].src=pth+pbkey;
            }
        }
    }else{
        for(i=0;i<arr.length;i++){
            var pth=arr[i].src;
            if (pth.indexOf(imgkey)!=-1 && pth.indexOf(pbkey)!=-1){
                var arq=pth.split(pbkey);
                arr[i].src=arq[0];
            }
        }
    }
    //*/
}

function MarcaLink(){
    //passar por todos os links
    // *
    var stl="underline";
    if (css_title!="normal"){
        stl="underline";
    }
    var lnk=document.location.href;
    var arr=document.getElementsByTagName("a");
    var i;
    for(i=0;i<arr.length;i++){
        if (lnk==arr[i].href){
            arr[i].style.textDecoration=stl;
            parent.lastlink=arr[i].href;
            return true;
        }
    }
    if (lnk.indexOf("&query=")!=-1 || lnk.indexOf("archivelist=")!=-1 ){
        parent.lastlink="";
        return true;
    }
    //não achou então procurar no último
    /*/alert(parent.lastlink);
    for(i=0;i<arr.length;i++){
        if (parent.lastlink==arr[i].href){
            arr[i].style.background=cor;
            return true;
        }
    }
    //*/
}

function elemento(elemento , valor){
    if (DOM2){
        //alert("Elemento "+elemento);
        try{
            //alert("Nada");
            document.getElementById(elemento).style.fontSize=valor+"em";
        }catch(e){
        }
    }
}
function FontTag(v,valor){
    var arr=document.getElementsByTagName(v);
            var i;
            for(i=0;i<arr.length;i++){
                arr[i].style.fontSize=valor+"em";
            }
}
function mudarTamanho(valor){
        //alert("mudarTamanho");

        if (DOM2){
            elemento("conteudo" , valor);
            //elemento("arial11bverde" , valor);
            //elemento("arial10branco" , valor);
            //elemento("arial11verde" , valor);
            //elemento("conteudoSAC" , valor);
            //elemento("tit_SAC" , valor+.6);
            //elemento("rodapeHome" , valor);
            //elemento("conteudoHome" , valor);
            //elemento("menuSAC" , valor);
            //elemento("menuPrincipal" , valor);
            //elemento("rodape" , valor);
            //elemento("lbl_busca" , valor);
            //elemento("headerCarrinho", valor);
            //elemento("reservas0800", valor-.1);
            //elemento("headerAtendimentoCliente", valor+.1);
                
     }
}

/**
* Script que troca o estilo do site.
*/

/* Define qual será o estilo ativo */

function setActiveStyleSheet(title) {
    var i, a, main;
    if (title==get_cookie("style")){
        title="normal";
    }
    for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
            a.disabled = true;
            if (a.getAttribute("title") == title) {
                a.disabled = false;
                set_cookie("style", title);
            }
        }
    }

    for (i=0;i<a_css.length;i++){
        if (title==a_css_t[i] && title!="normal" && title!=null){
            MM_swapImage(a_css_b[i],'','http://www.dutyfreedufry.com.br/dutyfree/extras/Ocor.gif',1);
        }else if(a_css_b[i]!=""){
            MM_swapImage(a_css_b[i],'','http://www.dutyfreedufry.com.br/dutyfree/extras/' + a_css_b[i] + '.gif',1);
        }
    }
    css_title=title;
    trocalogo();
    MarcaLink();
    MediaPB();
    try{
        img_da_pagina_pg(title);
    }catch(e){
    }
}

function trocalogo(){
    /*alterar o logo
    if (css_title=="normal"){
        MM_swapImage('img_logo_cli','','images/logo_cli.gif',1);
    }else if (css_title=="branco_e_preto_acessivel"){
        MM_swapImage('img_logo_cli','','images/logo_cli_bp.gif',1);
    }else if (css_title=="preto_e_branco_acessivel"){
        MM_swapImage('img_logo_cli','','images/logo_cli_pb.gif',1);
    }
    */
}

/* Define recupera o estilo ativo */
function getActiveStyleSheet() {
    var i, a;

    for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) {
            return a.getAttribute("title");
        }
     }

  return null;
}

/* Recupera o estilo default */
function getPreferredStyleSheet() {
    var i, a;
    for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("rel").indexOf("style") != -1
            && a.getAttribute("rel").indexOf("alt") == -1
            && a.getAttribute("title")) {

            return a.getAttribute("title");
        }
    }

    return null;
}

function dw(v){
    document.write(v);
}

function trocaFlash(local,arq){
    try{
        var colorido='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="762" height="200">';
        colorido+='<param name="movie" value="http://www.dutyfreedufry.com.br/sysbanners/flashxml/'+arq+'" />';
        colorido+='<param name="quality" value="high" />';
        colorido+='<embed src="http://www.dutyfreedufry.com.br/sysbanners/flashxml/'+arq+'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="762" height="200"></embed>';
        colorido+='</object>';
        var swf = document.getElementById(local);
        swf.innerHTML = colorido;
    }catch(e){
    }
}


var cookie = get_cookie("style");
var css_title = (cookie != "") ? cookie : getPreferredStyleSheet();
var a_css=new Array("normal.css","fundoPreto.css","fundoBranco.css");
var a_css_t=new Array("normal","branco_e_preto_acessivel","preto_e_branco_acessivel");
var a_css_b=new Array("","Obp","Opb");
var css_btn;
var i;
for (i=0;i<a_css.length;i++){
    if (css_title==a_css_t[i] || css_title=="" || css_title==null){
        css_btn=a_css_b[i];
        css_title=a_css_t[i];
        dw('<link rel="stylesheet" type="text/css" href="http://www.dutyfreedufry.com.br/DutyFree/css/'+a_css[i]+'" media="screen" title="'+a_css_t[i]+'" />');
    }else{
        dw('<link rel="alternate stylesheet" type="text/css" href="http://www.dutyfreedufry.com.br/DutyFree/css/'+a_css[i]+'" media="screen, projection" title="'+a_css_t[i]+'" />');
    }
}


//-->

Editado Janeiro 24, 2008 por evertonmanager

[Guest --evertonmanager --]

Bom, pra facilitar a leitura, separei aqui o trecho do código relacionado à minha dúvida...

Segue abaixo...

var DOM2=document.getElementById
var valorinicial;

function zoom(Marcos){
    //alert("segundo zoom");
    if (Marcos.indexOf('mais')==0) 
valorinicial=valorinicial+0.1;

    if (Marcos.indexOf('menos')==0) 
valorinicial=valorinicial-0.1;

    if (Marcos.indexOf('padrão')==0){
        //verificar se o zoom já está como 1
        if (valorinicial==0.8){
            //já está com 1, ver o estilo de cor
            var title=get_cookie("style");
            if (title!="normal"){
                //mudar os estilos para o normal
                setActiveStyleSheet("normal");
            }
        }else{
            //mudar primeiro o zoom
            valorinicial=0.8;
        }
    }
    if (DOM2){
        if (valorinicial>=0.8 && valorinicial<=1.1){
            mudarTamanho(valorinicial);
            set_cookie("mudaL",valorinicial);
        }
    }
}
function initzoom(valor){
    //alert("primeiro zoom");
    var v=get_cookie("mudaL");
    if (v!="" && v!="NaN" && v!=null && v!=undefined){
        valor=0.8;
    }
    mudarTamanho(valor);
    valorinicial = 0.8;

Reparem que o início do processo ocorre na função INITZOOM, onde é definido o tamanho inicial da fonte da página, que configurei como 0.8

Após isso, a função ZOOM é iniciada, onde são declaradas as três posições que definem quando o zoom será realizado (ou seja, são os "botões" A+ A- e A).

Acredito que seja nesse ponto que ocorre o problema, pois configurei os botões de A+ e A- para incluirem o valor 0.1 no tamanho atual da fonte, porém, eles só podem ser clicados 3 vezes cada... Ou seja, o valor máximo da fonte seria 1.1 para A+ e 0.5 para A-

Pois bem, se eu continuar clicando no A+ ou A- mesmo após eles atingirem o valor máximo, o código JavaScript continua inserindo o valor 0.1 sobre a fonte e armazenando isso no cookie "mudaL"...

Queria saber se há um jeito de "limitar" o número de cliques nas três posições (botões), pois isso resolveria o pequeno BUG existente no código...

Não entendo muito da organização do JavaScript, mas compreendo a lógica... Então, se puderem postar exemplos agradeço muito!!

Obrigado!!!