Ir para conteúdo
Fórum Script Brasil
  • 0

ao clikar, a mensagem e extender/se fexar

GOD Viollator

Perguntado por GOD Viollator,

 Share

Pergunta

GOD Viollator

GOD Viollator

Postado
Postado

Falae pessoal, aqui é o menu 1º tópico, e estu com 1 dúvida sobre isto...

Tipo.. aparece o nome da mensagem, e quando eu cliko nela, ela se extende mestrando a mensagem...

bom, pra quem num intendeu, aqui vai um site quem tem isso em 2 lugares...

http://www.tibia.com/news/?subtopic=latestnews

Se vocês repararem n News Ticker, ele aparece o inicio da ensagem, e ao clikar, ela se extende dizendo a mensagem toda, e ao clikar dinovo ela se fexa... E no menu a mesma coisa...

eu gostaria de sabe qual o código pra fazer algo assim... Se alguém souber, pode me falar ? ;D (não é necessário o script das noticias, só o de abre e fexa...) bom, valeus aí pessal agradeço des de já :lol:

Link para o comentário
Compartilhar em outros sites

24 respostass a esta questão

Posts Recomendados

  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Você pode utilizar a propriedade CSS visibility e height (para não ficar um espaço em branco)

O HTML fica assim:

<div class="msg_principal">Clique aqui para mostrar o resto da mensagem</div>
<div class="msg_secundaria">O resto do texto fica aqui</div>

<div class="msg_principal">Clique aqui para mostrar a outra mensagem mensagem</div>
<div class="msg_secundaria">Outra mensagem...</div>
E o JS fica assim: 
window.onload=function(){
all_msg1=document.getElementsByClassName("msg_principal")
for (i=0;i<all_msg1.length){
all_msg1[i].style.visibility="hidden"
all_msg1[i].style.height=0
all_msg1[i].setAttribute("onclick","EscondeMostra("+i+")")
}
}
function EscondeMostra(i){
all_msg2=document.getElementsByClassName("msg_secundaria")
if (all_msg2[i].style.visibility=="hidden"){
all_msg2[i].style.visibility="visible"
all_msg2[i].style.height="inherit"
}else{
all_msg2[i].style.visibility="hidden"
all_msg2[i].style.height=0
}
}

Qualquer dúvida posta aí !

Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Cometi alguns erros bem simples (falta de atenção mesmo :closedeyes: )

Deixe seu código assim:

window.onload=function(){
    all_msg1=document.getElementsByClassName("msg_principal")
    all_msg2=document.getElementsByClassName("msg_secundaria")
    for (i=0;i<all_msg1.length;i++){
        all_msg2[i].style.visibility="hidden"
        all_msg2[i].style.height=0
        all_msg1[i].setAttribute("onclick","EscondeMostra("+i+")")
    }
}
function EscondeMostra(i){
    all_msg2=document.getElementsByClassName("msg_secundaria")
    if (all_msg2[i].style.visibility=="hidden"){
        all_msg2[i].style.visibility="visible"
        all_msg2[i].style.height="inherit"
    }else{
        all_msg2[i].style.visibility="hidden"
        all_msg2[i].style.height=0
    }
}

O HTM pode ficar como está !

Link para o comentário
Compartilhar em outros sites
  • 0
GOD Viollator

GOD Viollator

Postado
  • Autor
Postado (editado)

agora sumiu tudo... (num aparece neim o texto do título e neim o texto completo...)

(eu hospedei o site para você ver: http://www.rodrigowb.xpg.com.br/Site%20CRS...ames/vagas.htm Espero nã estar atrapalhando !

Editado por GOD Viollator
O link está errado --> Possui um parênteses a mais (Jonathan)
Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

No seu site você nem implementou a função que lhe mostrei...Tem um erro no javascript em outro ponto do código

A página ficaria assim:

<html>
<head>
    <title>Untitled Page</title>
<script type="text/javascript">
window.onload=function(){
    all_msg1=document.getElementsByClassName("msg_principal")
    all_msg2=document.getElementsByClassName("msg_secundaria")
    for (i=0;i<all_msg1.length;i++){
        all_msg2[i].style.visibility="hidden"
        all_msg2[i].style.height=0
        all_msg1[i].setAttribute("onclick","EscondeMostra("+i+")")
    }
}
function EscondeMostra(i){
    all_msg2=document.getElementsByClassName("msg_secundaria")
    if (all_msg2[i].style.visibility=="hidden"){
        all_msg2[i].style.visibility="visible"
        all_msg2[i].style.height="inherit"
    }else{
        all_msg2[i].style.visibility="hidden"
        all_msg2[i].style.height=0
    }
}
</script>
</head>
<body>
<div class="msg_principal">Clique aqui para mostrar o resto da mensagem</div>
<div class="msg_secundaria">O resto do texto fica aqui</div>

<div class="msg_principal">Clique aqui para mostrar a outra mensagem mensagem</div>
<div class="msg_secundaria">Outra mensagem...</div>
</body>
</html>

Testei aqui e funcionou normalmente !

Link para o comentário
Compartilhar em outros sites
  • 0
GOD Viollator

GOD Viollator

Postado
  • Autor
Postado (editado)

mas eu coloquei igual você falou cara... coloquei o código pra linka o .js, e coloquei o esquema do texto no local que é para ser o texto e tal... você tem MSN ? aí eu poderia te mandar o arqvo pelo MSN, e você arrumar pra mim pode ser ?

(se puder me passe por PM)

Editado por GOD Viollator
Link para o comentário
Compartilhar em outros sites
  • 0
GOD Viollator

GOD Viollator

Postado
  • Autor
Postado

eu coloquei assim olha:

<script type="text/javascript" src="vagas.js"><div class="msg_principal">Clique aqui para mostrar o resto da mensagem</div>
<div class="msg_secundaria">O resto do texto fica aqui</div>

<div class="msg_principal">Clique aqui para mostrar a outra mensagem mensagem</div>
<div class="msg_secundaria">Outra mensagem...</div></td></script>

Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

No IE não dá pra usar document.getElementsByClassName (tinha que ser o IE mesmo...eita navegador ruim...)

Criei minha própria função pra simular o document.getElementsByClassName

Ficou assim:

<script type="text/javascript">
window.onload=function(){
    all_msg1=ElementosPorClasse("msg_principal")
    all_msg2=ElementosPorClasse("msg_secundaria")
    for (i=0;i<all_msg1.length;i++){
        all_msg2[i].style.visibility="hidden"
        all_msg2[i].style.height=0
        all_msg1[i].setAttribute("onclick","EscondeMostra("+i+")")
    }
}
function ElementosPorClasse(nome_classe){
    retorno = new Array()
    z=0
    x=document.getElementsByTagName("*")
    for (i=0;i<x.length;i++){
        if (x[i].className==nome_classe){
            retorno[z]=x[i]
            z++
        }
    }
    return retorno
}
function EscondeMostra(i){
    all_msg2=ElementosPorClasse("msg_secundaria")
    if (all_msg2[i].style.visibility=="hidden"){
        all_msg2[i].style.visibility="visible"
        all_msg2[i].style.height="inherit"
    }else{
        all_msg2[i].style.visibility="hidden"
        all_msg2[i].style.height=0
    }
}
</script>

Link para o comentário
Compartilhar em outros sites
  • 0
GOD Viollator

GOD Viollator

Postado
  • Autor
Postado (editado)

Se eu colocar junto com o outro js, é capaz de dar algum erro não é ? (ou será que esse funciona com os outros navegadores tambem?)

--------Edit----------

acabei de tentar e nã funcionou neim no google chrome, e neim no IE, então vou ficar com o outro mesmo, até axar outro que funcione em todos os navegador...

Valeu aí cara!

Editado por GOD Viollator
Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Melhorei um pouco o código e está funcionamento tanto no ie quanto no Google Chrome

<html>
<head>
    <title>Untitled Page</title>
<script type="text/javascript">
window.onload=function(){
    all_msg1=ElementosPorClasse("msg_principal")
    all_msg2=ElementosPorClasse("msg_secundaria")
    for (i=0;i<all_msg1.length;i++){
        all_msg2[i].style.visibility="hidden"
        all_msg2[i].style.height=0
        all_msg1[i].id="all_msg1-"+i
        v=true
        //Código para IE
        all_msg1[i].setAttribute("onclick",function(){
            x=this.id.replace("all_msg1-","")
            EscondeMostra(x)
            v=false
        })
        //código para outros navegadores
        if (!document.all){
            all_msg1[i].setAttribute("onclick","EscondeMostra("+i+")")
        }
    }
}
function ElementosPorClasse(nome_classe){
    retorno = new Array()
    z=0
    x=document.getElementsByTagName("*")
    for (i=0;i<x.length;i++){
        if (x[i].className==nome_classe){
            retorno[z]=x[i]
            z++
        }
    }
    return retorno
}
function EscondeMostra(i){
    all_msg2=ElementosPorClasse("msg_secundaria")
    if (all_msg2[i].style.visibility=="hidden"){
        all_msg2[i].style.visibility="visible"
        all_msg2[i].style.height="inherit"
    }else{
        all_msg2[i].style.visibility="hidden"
        all_msg2[i].style.height=0
    }
}
</script>
</head>
<body>
<div class="msg_principal">Clique aqui para mostrar o resto da mensagem</div>
<div class="msg_secundaria">O resto do texto fica aqui</div>

<div class="msg_principal">Clique aqui para mostrar a outra mensagem mensagem</div>
<div class="msg_secundaria">Outra mensagem...</div>
</body>
</html>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...