Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leandro di Assis

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

Por , em Desenvolvimento frontend

Recommended Posts

Leandro di Assis    0

Leandro di Assis
Postado

Olá, eu sou ilustrador e comecei a aprender html/css semana retrasada. 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>
                        
                
            
            </div>
        
            <a href="#" onclick="toggle_visibility('contato');">ESCONDER</a>
            
            </div>
        
        <!-- FIM DO FORMULARIO DE CONTATO  -->

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 >© Criado e Ilustrado por: <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;
    
}

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

pwd    7

pwd
Postado

Hey cara, blzs!

 

É pq seu link está fazendo duas chamadas "#" + função js.

 

Vc pode resolver assim:

<a href="javascript:void(0);" onclick="toggle_visibility('contato');">ESCONDER</a>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro di Assis    0

Leandro di Assis
Postado

Obrigado Pwd, funcionou. Depois disso uma parte do botão não funcionava também, então descobri que o formulário estava por cima atrapalhando. Acho que esse foi o erro que não conseguiria de jeito nenhum resolver sozinho, com certeza porque ainda sei nada sobre Javascript. :D

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito