(Resolvido) IE x FireFox (document.getelementbyid().classname)

Agosto 8, 2008

Pessoal,

a funçao (javascript) abaixo, por acaso não funciona no IE?

Fiz alguns testes e funcionou apenas no Firefox.

Provavelmente o document.getElementById("link" + a).className não funciona no IE.

Posso trocar por outra funcao?

function Cor(menu) {        
    var vItensMenu  = 5;
    for (a = 1; a <= vItensMenu; a++) {
        document.getElementById("link" + a).className = "menuoff";[/b]
    }
    
    if (menu.className == "menuoff") {
        menu.className = "menuon";[/b]
    }
}

Obrigado!

KaKarotto · Agosto 9, 2008

Pode postar seu código html funcionando? É mais fácil de debugar, você postando só um trecho não tem como saber o que fez de errado.

Aquele abraço.

Agosto 9, 2008

Claro!

Apesar da pagina ser em PHP, vou postar um esboço do html e do css, que já conseguiremos simular o problema.

A função que ocorre problema é a Cor() - no ie não funciona e no ff funciona.

Muito obrigado!

index.html:

<html>

<head>

&lt;script>
function Cor(menu) {        
    var vItensMenu  = 5;
    for (a = 1; a <= vItensMenu; a++) {
        document.getElementById("link" + a).className = "menuoff";
    }
    
    if (menu.className == "menuoff") {
        menu.className = "menuon";
    }
}

function ExpandeDiv(id)
{
    var qtd_div = 6;
    var atual;
    var div_sel = document.getElementById(id);
    for (var i = 1; i <= qtd_div; i++)
    {
        atual = document.getElementById("div"+i);
        if (atual.id != id)
            atual.style.display = 'none';
        else
            div_sel.style.display = 'block';
    }
}
</script>
<title> Site </title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="tudo">

    <div id="cabecalho">
       cabeçalho
    </div>

    <div id="menu">
      <ul>
      <li id="link1" class="menuon" onclick="Cor(this)"><a href="#" onclick="ExpandeDiv('div1');">Início</a></li>
      <li id="link2" class="menuoff" onclick="Cor(this)"><a href="#" onclick="ExpandeDiv('div2');">Cadastro</a></li>
      <li id="link3" class="menuoff" onclick="Cor(this)"><a href="#" onclick="ExpandeDiv('div3');">Login</a></li>
      <li id="link4" class="menuoff" onclick="Cor(this)"><a href="#" onclick="ExpandeDiv('div4');">FAQ</a></li>
      <li id="link5" class="menuoff" onclick="Cor(this)"><a href="#" onclick="ExpandeDiv('div5');">Sobre</a></li>
      </ul>
    </div>

    <div id="div1">
       <p> </p><p> </p>
       <h1>Início......</h1>
    </div>

    <div id="div2" style="display:none";>
       <p> </p><p> </p>
       Cadastro......
       <p> </p>
       <div id="divcadastro">

       </div>
    </div>

    <div id="div3" style="display:none";>
       <p> </p><p> </p>
       Login......
        <p> </p>
      
    </div>

    <div id="div4" style="display:none";>
       <p> </p><p> </p>
       FAQ......

    </div>

    <div id="div5" style="display:none";>
       <p> </p><p> </p>
       Sobre...
       <p> </p><p> </p><p> </p><p> </p>
    </div>

    <div id="div6" style="display:none";>
       <p> </p><p> </p>
       Política de Privacidade......
    </div>
    <div id="rodape">
      <a href="#" onclick="ExpandeDiv('div6'); Cor(link1)">Política de privacidade</a>
    </div>
</div>
</body>
</html>

style.css:

.menuon {
    text-align:left;
    border-bottom:1px solid #59619F;
    background-color:#444;
}
.menuoff {
}

body {
    background: #EEE;
    color: #000;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    margin: 0; padding: 0;
    text-align: center;
    }

a, a:visited {    
    color: #FFFFFF;
    background: inherit;
    text-decoration: none;
}
a:hover {
    color: #FFFFFF;
    background: inherit;
    text-decoration: underline;
}

#tudo {
    background: #FFF; 
    border: #000 1px solid;
    width: 800px;
    margin: auto;
    padding: 0px;
    text-align: left;
    }


#cabecalho {
    background: #CCC;
    font-size: 18px;
    text-align: center;
    padding: 30px;
    }


#menu {
    background: #000;
    height: 27px;
    margin: 0; padding: 0;
    }


#menu ul {
    margin: 0; padding: 0;
    margin-left: 6px;
    }


#menu ul li {
    display: inline;
    }


#menu ul li a {
    color: #FFF;
    border: 1px #000 solid;
    border-bottom: 1px #000 solid;
    float: left;
    padding: 5px 7px;
    margin: 2px;
    text-decoration: none;
    }
    
#menu ul li a:hover {
    background: #444;
    color: #FFF;
    border: #000 1px solid;
    border-bottom: none;
    text-decoration: none;
    }


#conteudo {
    clear: both;
    font-size: 12px;
    padding: 5px;
    text-align: center;
    }


#rodape {
    clear: both;
    background: #000;
    color: #FFF;
    padding: 5px;
    text-align: center;
}

KaKarotto · Agosto 9, 2008

Ahhh...perceba, o problema não está no script.

Acontece que esse jeito que montou o menu horizontal não ficou bom no iE.

Coloque um display:block e um float:left no #menu ul li.

display:inline no ie6 é meio esquisito.

Agosto 9, 2008

Cara,

muito obrigado!

Valeu pela ajuda :D

Ahhh...perceba, o problema não está no script.
Acontece que esse jeito que montou o menu horizontal não ficou bom no iE.
Coloque um display:block e um float:left no #menu ul li.
display:inline no ie6 é meio esquisito.

Entrar

(Resolvido) IE x FireFox (document.getelementbyid().classname)

Pergunta

Guest Anderson Buzzi

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

Guest Anderson Buzzi

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Guest Anderson Buzzi

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades