Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Leandro di assis

Página se mexe quando "esconde/mostra" formulário css/javascript

Recommended Posts

Olá, eu sou ilustrador e comecei a aprender html/css semana passada. Estou fazendo este site: www.globalutopia.co.nf .

Este é o meu primeiro site, por isso tenho certeza que verão muitas gambiarras, mas em breve vou ter conhecimento suficiente para consertar isso.

 

Como podem ver, ao lado da descrição da pagina coloquei a opção de esconder ou revelar o formulario, que em breve sera um botão. Mas quando eu clico a página desce, como se rolasse para baixo. E cada vez que o formulário é revelado ou escondido isso acontece. Tem como deixar a página fixa onde o usuário esta visualizando quando ele clica no botão?

 

JAVASCRIPT

 


    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

 

 

 

HTML do Formulário

 

<!-- FORMULARIO DE CONTATO -->
                
            <div class="contatocontainer">
                 
               
                
            <div id="contato" style="display:none;">
            
                             <h5 align="center">ENVIE SUA MENSAGEM</h5>
                    
                    <form align="center" >
                        
                         
                        
                        <ul>
                            <li>
                               <input  type="text" name="name" id="name" placeholder="Seu Nome"/>
                            </li>
                            <li>
                                <input type="text" name="assunto" id="assunto" placeholder="Assunto"/>
                            </li>
                            <li>
                                <input type="text" name="email" id="email" placeholder="email"
                            </li>
                              
                            <li>
                                <textarea name="mensagem" id="mensagem" placeholder="Mensagem"></textarea>
                            </li>
                            
                                <button  type="enviar" id="enviar" value="Enviar" />ENVIAR</button>
                            
                        </ul>
                                  
                     </form>

 

CSS do Formulario


 

/* Formulario de Contato */

.contatocontainer{
    position:absolute;
    float:right;
    right:0;
    z-index: 103;
    top:120%;
}
#contato{
    float:right;
    background:black;
    
}
#contato form{
    float:right;
    margin-right:7%;
    
}
#contato h5{
    color:white;
    right:0;
}

#contato li{
    padding-bottom:5% ;
    list-style: none;
    width:100%;
    max-width: 100%;
   
}
#contato input{
    background:#ababab;
    border-bottom:#ababab;
    border-left: #ababab;
    border-right: #ababab;
    padding:1%;
    font-family: 'Times new roman';
}

#mensagem{
    width:12em;
    max-width:12em;
    height:5.8em;
    max-height:12em;
    background:#ababab;
    border-bottom:#ababab;
    border-left: #ababab;
    border-right: #ababab;
    padding:1%; 
    min-width: 12em;
}

#enviar {
    width:100%;
    height:2em;
    background:red;
    color: white;
    border-bottom:red;
    border-top:red;
    border-right:red;
    border-left:red;
    font-family: 'Times new roman';
}
::-webkit-input-placeholder {
   color: #606060;
}
:-moz-placeholder { /* Firefox 18- */
   color: #606060;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #606060;  
}
:-ms-input-placeholder {  
   color: #606060;  
}
/* Fim do Formulario */

(Caso necessário) HTML Completo do Site

 

<!DOCTYPE html>
<html lang="en" align="center">
    
    <head>
        
        <link rel="stylesheet" type="text/css" href="main.css"/>
        
        <script type="text/javascript" src="contato.js"></script>
        
        <meta charset="utf-8">
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Global Utopia</title>
        <meta name="description" content="">
        <meta name="author" content="Leandro">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        
         
    
    </head>
                    
    <body align="center">
        
                     
          <!-- FORMULARIO DE CONTATO -->
                
            <div class="contatocontainer">
                 
               
                
            <div id="contato" style="display:none;">
            
                             <h5 align="center">ENVIE SUA MENSAGEM</h5>
                    
                    <form align="center" >
                        
                         
                        
                        <ul>
                            <li>
                               <input  type="text" name="name" id="name" placeholder="Seu Nome"/>
                            </li>
                            <li>
                                <input type="text" name="assunto" id="assunto" placeholder="Assunto"/>
                            </li>
                            <li>
                                <input type="text" name="email" id="email" placeholder="email"
                            </li>
                              
                            <li>
                                <textarea name="mensagem" id="mensagem" placeholder="Mensagem"></textarea>
                            </li>
                            
                                <button  type="enviar" id="enviar" value="Enviar" />ENVIAR</button>
                            
                        </ul>
                                  
                     </form>
                        
                
            
            </div>
        
            <a href="#" onclick="toggle_visibility('contato');">ESCONDER</a>
            
            </div>
        
        <!-- FIM DO FORMULARIO DE CONTATO  -->
              
       <div class="toptudo"  >
         
           <figure id="logo">         
        <img align="left"  src="imagens/logo.png"  />
               </figure>
               
           <figure class="menu"  align="right">
               
         <a><img align="right"  src="imagens/blog.jpg"/> </a>
               
        <a><img  align="right" src="imagens/diversao.jpg"/></a>
                                     
        <a href="index.html" ><img align="right"  src="imagens/inicio.jpg"/></a>
               
        </figure>
                    
        </div>
        
        
        <figure>
                    
            <img  class="banner"  src="imagens/background.jpg" />
            
          
        </figure>
    
        
    
            
               <!-- conteudo -->
                      
        
     
        <div class="website" >         
            
             
          
                        
               <div class="conteudo" align="center">
                    
                   <h1><img class="imgcruz"  src="imagens/cruz.gif"/>CURSO DE CHINÊS GLOBAL UTOPIA</h1>
                   
                              
             <img  class="img1"  src="imagens/rosto.gif"  />
              
                   
                <p  >  Curso fundado por Ding Huaying, Pós Graduada em Psicologia. Já trabalhou como tradutora, e ensina a crianças e adultos desde 2011. 
                    </p>
                        <p >
                    Antes do curso ser aberto, haviam muitos pedidos para aulas particulares, mas era difícil encontrar um lugar adequado. Além de alunos brasileiros, muitos chineses estavam precisando de aulas de Português. Com a criação do local adequado foi possível ensinar em turmas, assim os alunos que não preferissem aula particular poderiam aprender mandarim de forma mais econômica. O método de aula particular foi mantido, visto que alguns alunos ainda preferem um ambiente mais tranquilo e de receber atenção especial.</p>
                        
    
              
        </div>            
        
       
                   
       <div class="info">
                  
          <iframe   class="map"  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3917.7125920875337!2d-37.05362946399698!3d-10.90943339253919!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x71ab36e347adcc3%3A0x907ead4355579907!2sR.+Geru%2C+480+-+Centro%2C+Aracaju+-+SE%2C+49010-460!5e0!3m2!1sen!2sbr!4v1462421880496"  frameborder="0" style="border:0" allowfullscreen ></iframe>
            </div>
  
            
            <footer class="footer" >
                        <span >&copy; Criado e Ilustrado por:&nbsp;<a href="https://www.leandrodiassis.co.nf" target="_blank">Leandro di Assis.</a></span>
                    </footer>
            
    </div>
    
            
         </body>   
    
  
    
   
    
</html>

 

(Caso Necessario) CSS Completo do Site


 


html,body{   
    font-family: Georgia, serif; background:#f6f6f6; 
    height:auto;
    margin:0; 
    padding:0;
    
}
.menu{
   
    height:auto;
    width:100%;
    right: 5%;
    margin-top:3.7%;
}
.menu img{
  height:auto;
  max-width: 100%;
  padding-right:2%;
   position:relative;
    
    
}
    
}
#logo{
    position:relative;
    float:left;
    left:0%;
    height:auto;
    width:100%;
    max-width:100%;
    
    
}
#logo img {
    position:relative;
    height:95%;
    width:7%;
    height:auto;
}
.toptudo{
    position:fixed;
    top:0%;
    right:0%;
    left:0%;
    background:#f6f6f6;
    width:100%;
    z-index:102;
    height:auto;
    
    
}

.website{
    position:relative;
    z-index:101;
     background:#f6f6f6;
    margin-top:50%;
    max-width:auto;
    
     
     
   
        
}
.banner{
    position:fixed;
    width:100%;
    right:0%;
    top:9%;
    margin-bottom: auto;
    margin-top:auto;
    max-width: 100 ;   
    height:auto;
    
    
}
/* Formulario de Contato */

.contatocontainer{
    position:absolute;
    float:right;
    right:0;
    z-index: 103;
    top:120%;
}
#contato{
    float:right;
    background:black;
    
}
#contato form{
    float:right;
    margin-right:7%;
    
}
#contato h5{
    color:white;
    right:0;
}

#contato li{
    padding-bottom:5% ;
    list-style: none;
    width:100%;
    max-width: 100%;
   
}
#contato input{
    background:#ababab;
    border-bottom:#ababab;
    border-left: #ababab;
    border-right: #ababab;
    padding:1%;
    font-family: 'Times new roman';
}

#mensagem{
    width:12em;
    max-width:12em;
    height:5.8em;
    max-height:12em;
    background:#ababab;
    border-bottom:#ababab;
    border-left: #ababab;
    border-right: #ababab;
    padding:1%; 
    min-width: 12em;
}

#enviar {
    width:100%;
    height:2em;
    background:red;
    color: white;
    border-bottom:red;
    border-top:red;
    border-right:red;
    border-left:red;
    font-family: 'Times new roman';
}
::-webkit-input-placeholder {
   color: #606060;
}
:-moz-placeholder { /* Firefox 18- */
   color: #606060;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #606060;  
}
:-ms-input-placeholder {  
   color: #606060;  
}
/* Fim do Formulario */
.img1 {
   position:absolute;
    bottom:65%;
    left:1%;
    max-width:20%;
    z-index:103;
    margin-left:auto;
         
   
    
    
}

.imgcruz {
   
      
    margin-right:0.3%;
    
}

  
.info{
    position:relative;
    
    margin-top:5%;
    max-height: 100%;
    max-width: 100%;
    height:100%;
    width:auto;
    z-index: 103;
    
    
}
.endereco{
   position:relative;
    color:white;
    top:50%;
    display:block;
   margin:auto;
}
.map{
   
    width:100%;
    height:auto;
   
}
#facebook{
    
    width:0%;
    margin-right:0%;
    bottom:0%;
}
#blogger{
   
    width:0%;
   bottom:0%;
}

.conteudo{
   
    width:auto;
    height:100%;
    padding-top:2%;
}
.conteudo p{
    width:60%;
    
}
.conteudo h1{
    width:60%;
}
   

/* FORMULARIO */
.formulario {
    margin:auto;
    width:35%;
    height:100%;
    max-height:100%;
    max-width: 35%;
}

.input_text {
       
    font-family: 'times new roman';
    width:100%;
    height:100%;
    max-width:100%;
    max-height: 100%;
       
    
    
}
#form{
    
    display:block;
    width:50%;
    max-width: 50%;
    margin-bottom: 2%;
    
   
}

.labelmessage{
  display:block;
   width:50%;
    max-width: 50%;
    margin-bottom: 2%;
    
}

/* FIM DO FORMULARIO */

.footer{
  text-align: left;
  font-family: times new roman;
  font-size:14px;
  background:#f9f9f9;
  margin-top:1%;
  
}
.footer{
    z-index:103;
}
.footer span{
   
    margin-left:1%;
    
    
    
}
::-webkit-input-placeholder {
    
    font:12px verdana,arial,sans-serif;
 
    
}
:-moz-placeholder {
    
    font:12px verdana,arial,sans-serif;
    
}

}

 

Editado por Leandro di assis
Texto incompleto, pensei que "Salvar" significasse "Salvar par editar depois", não sabia que era para postar.

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • Outra pessoa me ajudou com isso hoje, vou postar aqui como registro de dados.

    Ele me disse que o meu problema é que na tag <a> eu coloquei o link para "#" <a href="#">.

     

    o correto seria eu fazer desse jeito: <a href="javascript:void(0);" onclick="toggle_visibility('contato');">ESCONDER</a>

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @Leandro di assis

    Ou você pode usar o jQuery usar a função toggle()

     

    Veja um exemplo prático: https://jsfiddle.net/ya61fLo9/

    Editado por dif
    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×