Acessar elemento dentro de uma div com seletores jquery

jcvilanova · 5 de junho de 2016

Bom dia! pessoal,

estou tentando aprender HTML, CSS E JQuery pra criar minha pagina na internet. Na minha primeira página (Index) optei por dividir em quatro DIVs, sendo o #cabeçalho, Div #lateraldireita, Div #principal (fica ao centro mas ao lado da lateral) e a Div #rodapé. Bem, com exceção do cabeçalho, coloquei outras Divs dentro de todas as demais pra que nelas eu possa colocar slides de textos e imagens, botões etc. Tenho os seguintes documentos: Index.html, Estilos.css e 05.js. O arquivo 05 faz parte do mini curso de JQuery que peguei na internet.

Acontece que nenhum dos exemplos de seleteres que tentei usar funcionaram. Por exemplo, eu criei um link (tag a) com ID= Sloganroda, onde ao clicar um H3 que está dentro da Div #rodapé deveria mudar de cor. Mas ao clicar no link, nada acontece. Alias, percebi que o proprio link muda de cor e volta a sua cor normal rapidamente. Gostaria da ajuda de vocês pra entender porque nao esta dando certo.

Ai estão as estruturas dos meus arquivos .css, .js e .html.

Index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Estilo.css" media="screen"/>
<script type="text/javascript" src="domine/jquery-1.12.4.js"</script>
<script type="text/javascript" src="domine/05.js"></script>

<title>Css</title>

</head>

<body>
<div id="conteudo">
<div id="header">
    <ul> 
     <li><a href="Home.html">Home</a></li>
        <li><a href="Quemsomos.html">Quem Somos</a></li>
        <li><a href="Parceiros.html">Parceiros</a></li>
        <li><a href="Portifólio.html">Portifólio</a></li>
        <li><a href="Contato.html">Contato</a></li>
        <hr size=2 width=662 >
        </ul>
    <h1> MEU HEADER</h1>
    <p id="slogandoheader"> Meu Slogan Aqui</p>
    </div>
<div id="barralateral">
     <div id="barlateralcentro">
        <h2> Barra Lateral</h2>
<p> Esta é a div da lateral esquerda do site </p>
        
        </div>

</div>

<div id="principal">
     <div id="barprincipalcentro">
<h2> Principal</h2>
<p>  teste da minha primeira div</p>
        </div>
</div>
     <div id="rodape">
        <h3> Aqui Fica o Meu Rodapé </h3>
<a id="teste" href="#">... Mudar ... </a>
     
     </div>   
    </div>    
</body>
</html>

Estilos.css

@charset "utf-8";
/* CSS Document */


#conteudo {
    border: 1px solid red;
height:900;
margin:0 auto;
background:url(Plano-de-Fundo.png)
}

h2 { margin:0 auto;
}
h1 { margin:0 auto;
}
#header {
margin: 20px 0px 0 15px;
padding: 11px;
height: 120px;
background-image: url(Logo_pre.png), -webkit-gradient(linear, 100.00% 50.87%, 0.00% 49.13%, color-stop( 0% , rgba(39,122,191,1.00)),color-stop( 100% , rgba(255,0,0,0.09)));
background-image: url(Logo_pre.png), -webkit-linear-gradient(179deg,rgba(39,122,191,1.00) 0%,rgba(255,0,0,0.09) 100%);
background-image: url(Logo_pre.png), linear-gradient(271deg,rgba(39,122,191,1.00) 0%,rgba(255,0,0,0.09) 100%);
background-repeat: no-repeat;
}

#slogandoheader {
margin:200px 100;

}
#barralateral {
   background-color: #FFFBF0;
    width: 250px;
height:380px;
    padding:11px;
float:left;


}

#barlateralcentro {
background-color: #F00;
position:relative;
float: left;
margin: 50 10 50 10;
    width: 230px;
height:360px;
    padding:11px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;}

#principal {
    background-color: #FF5;
position:relative;
padding-left:11px;
width: 1035px;
height:402px;
float:left;
margin-right:0;

   }
   
   #barprincipalcentro {
background-color: #F00;
position:relative;
margin: 11px 0px 0 0;
        width: 1000px;
height:360px;
    padding-top:20px;
padding-left:11px;
padding-right:15px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;}
#rodape { 
  background-color:black;
  color:white;
  clear:both;
  padding:11px;
}
ul {
position:absolute;
top: 100px;
float:right; 
left:600px;; }
ul li {
list-style-type: none;
display: inline;
padding: 5px 40px 5px 40px;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, Sans Serif;
font-size: 12px;
color: #3FC;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-image: -webkit-gradient(linear, 100.00% 50.87%, 0.00% 49.13%, color-stop( 0% , rgba(255,255,255,0.02)),color-stop( 55.96% , rgba(16,103,159,0.54)),color-stop( 95.34% , rgba(243,244,245,0.44)));
background-image: -webkit-linear-gradient(179deg,rgba(255,255,255,0.02) 0%,rgba(16,103,159,0.54) 55.96%,rgba(243,244,245,0.44) 95.34%);
background-image: linear-gradient(271deg,rgba(255,255,255,0.02) 0%,rgba(16,103,159,0.54) 55.96%,rgba(243,244,245,0.44) 95.34%);
}
ul li a {
list-style-type: none;
text-decoration: none;
color:#000;

}
hr {
color:#999;
}

05.js

$(document).ready(function() {
$("sloganroda").css("color", "yellow");


});

DiF · 5 de junho de 2016

@jcvilanova Falta fechar o <script type="text/javascript" src="domine/jquery-1.12.4.js"></script>

No jQuery você não espeficou o que fazer.

$("sloganroda").css("color", "yellow");

Esta linha de fato muda a cor, mas você não informou como ele vai trocar. ou seja, dizer se é clicando, passando por cima.. e etc.

Mas tem tem um erro nela, faltou o seletor id(#) ou class(.)

Você não precisa de link para fazer isso. pode ser direto. então corrigindo fica:

$(document).ready(function() {
	$("#teste").click(function(){
    	$("#sloganroda").css("color", "yellow");
    });		
});

Então o código está dizendo o seguinte:

Quando o DOM estiver pronto, ao clicar no elemento com ID = teste, o elemento #sloganroda irá mudar a cor do texto para amarelo.

Cuide que você não tem um elemento com esse ID.. então adicione ali como ID de H3 do rodapé

Veja um exemplo funcionando: https://jsfiddle.net/feqaL2ar/

jcvilanova · 5 de junho de 2016

@dif acabei de testar e nao funcionou. Meus arquivos estão todos dentro da pasta Domine. Nao sei se é o caminho que estou apontando para os arquivos .js e .css. O fato é que nao mudou nada

@dif fechei o script e continua sem modificar

@jcvilanova tem a ver com o fato de que a pasta se chama Domine e nao domine ?

jcvilanova · 5 de junho de 2016

mudei a pasta para o drive C e continua do mesmo jeito.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Estilo.css" media="screen"/>
<script type="text/javascript" src="c:/domine/jquery-1.12.4.js"></script>
<script type="text/javascript" src="c:/domine/05.js"></script>

@dif @jcvilanova caro amigo, ja tentei de tudo e nao muda.

DiF · 5 de junho de 2016

@jcvilanova Sim. tá errado o jeito como você está chamando o arquivo. Ele precisa estar na raiz do seu projeto.

Este é um dos principais erros, dos mais comuns, ou seja, colocar o caminho do arquivo em modo absoluto.

Ou rodar o site sem usar um "servidor"

1) Instale o EasyPHP., e ligue o servidor apache.

2) na pasta eds-www é onde você vai colocar a pasta do seu projeto. por exemplo "domine" e é nesta pasta que precisa colocar os arquivos.

Veja como será a estrutura:

Raiz(eds-www)
   |
   |-domine
       |
       |-js
       | |-05.js
       | 
       |-Css
       |  |-estilo.css
       |
       |-index.html

Veja que a raiz que é a pasta principal do projeto(do easyphp)

a pasta domine está na raiz. dentro da pasta domine estão as pastas para js e css. o arquivo index.html

Esta é a estrutura que você precisa usar.

então seguindo esta estrutura chamar o jquery ficaria assim:

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>

Repare que não foi especificado alguma pasta antes da pasta js.

Porque o easyPHP age como um servidor local. Quem faz isso é o servidor Apache.

Logo quando entrar no endereço localhost/domine no navegador

Então ele entende que o caminho antes disso de js/jquery-1.12.4.js é raiz/domine/

Depois vou elaborar um tópico de explicação de como baixar, instalar e rodar o easyphp

jcvilanova · 6 de junho de 2016

@dif Meu irmão...agora deu certo. obrigado.

gostaria de te fazer uma pergunta. Quero colocar tres botões css na div principal, CADASTRO DE CLIENTE, ALUNO E PARCEIROS. porém, quero que ao clicar em um, que se abra um formulario de cadastro e os outros dois fiquem desabilitados, numa cor transparente pra indicar que nada acontece se clicar neles. Um vez preenchido o cadastro de clientes e depois de salvo num banco, o formulario se fecha e os botões voltam a estarem ativos.

É possivel fazer isso ?

voce poderia me ajudar ?

DiF · 6 de junho de 2016

@jcvilanova Sim é possível fazer.

Podes usar o jquery para desabilitar os campos dos formulários.

Vamos supor que tens a seguinte estrutura:

<div><a href="#" class="x">Cadastrar X</a>
	<div class="formX"></div>
</div>  
<div><a href="#" class="y">Cadastrar X</a>
	<div class="formY"></div>
</div>
<div><a href="#" class="z">Cadastrar X</a>
	<div class="formZ"></div>
</div>

Assuma que dentro de class = formX, class = formY e class formZ . consta os elementos <form>

No Jquery você manipula da seguinte forma:

$(document).ready(function(){
	$('.x').on('click', function(){
    	//faz algo se clicar no class X 
         $('.formY, .formZ').hide(); 
    });
  
    $('.y').on('click', function(){
    	//faz algo se clicar no class y 
       $('.formX, .formZ').hide(); 
    });
  
  $('.z').on('click', function(){
    	//faz algo se clicar no class z 
    	$('.formX, .formY').hide(); 
    });
    
});

Esse exemplo faria com que se clicasse no X, esconderia o Y e Z, se clicar no Y, esconde o X e Z, e se clicar no Z esconde o X e o Y.

+- por aí. você pode usar sua criatividade para adicionar efeitos como por exemplo colocar um DIV e alterar a propriedade z-index para que ela fique em cima do formulário, combinando com o atributo rgba() para dar um pouco de transparência e um "tom" de desabilitar... ou só simplesmente setar o disable nos imputs...

jcvilanova · 9 de junho de 2016

@dif meu irmão, preciso de outra ajuda. Gostaria de saber como eu posso enviar o layout que crie pra que voce analise. Fiz um layout no photoshop. Fiz primeiramente os botões com Divs, mas depois resolvi fazer com botões. porém, nenhum nem o outro ficam na posição que planejei. Sera se voce poderia dar uma olhada pra ver o que esta errado ?

jcvilanova · 13 de junho de 2016

@dif amigo, boa noite! como faço pra fazer uma transição de imagens dentro da div barraprincipalcentro ? as imagens eu fiz no photoshop so pra testar. gostaria que ficassem alternando como nesses banners que a gente ve nas paginas.

DiF · 13 de junho de 2016

@jcvilanova Você pode usar o CSS3 e fazer as animações de rotatividade com keyframes ou podes usar o jQuery. Existem bons plugins de slider.

jcvilanova · 13 de junho de 2016

@dif pois é...seu amigo aqui é lento...Ontem me surgiu uma duvida crue. Eu tenho uma pagina chamada Index que vai chamar outras paginas. A pergunta é: eu tenho que ter um arquivo CSS para configurar cada uma das novas paginas ?

E quanto ao slide, como faço essa animação de rotatividade no css3 ? devo criar um novo arquivo css, é isso ? E com ele chamo a minha DivPrincipalcentro ?

DiF · 13 de junho de 2016

@jcvilanova Sem problemas, rsrs estamos aqui para ajudar!

Não precisa criar um arquivo css para cada página. Podes colocar tudo em um arquivo só! será até melhor para carregar 1 do que que vários.

A animação de rotatividade no css3 é ainda meio "complicada" de entender , a não ser que você pare para estudar os keyframes e animations. O que posso recomendar você é usar plugin jQuery para sliders. Tem um em particular que eu uso bastante que é o jquery cycle http://jquery.malsup.com/cycle/

Com apenas algumas linhas você insere o efeito que desejar em quantas fotos desejar.

Não tem muito mistério, se você já tiver algum conhecimento mínimo em javascript(jquery)

Assumindo que o ID ou class do seu elemento DIV seja DivPrincipalcentro

ficaria algo assim :

$(document).ready(function(){
    $('#DivPrincipalcentro').cycle();
});

Claro que dentro da função cycle() você pode usar argumentos e mudar os efeitos, tempo dos efeitos e etc.

PS: se usar o plugin cycle ele já possui um css próprio.. aí só cabe você a edita-lo e mudar o que quer, e se precisar.

jcvilanova · 13 de junho de 2016

@dif @dif Hei...baixei esse negocio ai de cycle e testei aqui e deu certo. Caramba, interessante. Mas ainda restam muitas duvidas.

veja bem, meu site vai versar sobre pesquisas. Quero que esses slides sejam como aqueles profissionais, onde entra uma imagem e um texto que desliza da direita pra esquerda, tipo no power point, por exemplo. Ai vem a pergunta, aquilo é um video ou uma imagem? Cheguei a imaginar que eram produzidos em programas como o Adobe Premiere ou After effects e depois eram colocados no documento html.

Como sao feitos esses banneres? o que eu to me espelhando é esse do http://g1.globo.com/, fica logo no topo da pagina. La tem uma imagem e as letras vão surgindo de cima pra baixo de baixo pra cima, da direita pra esquerda. Enfim...

DiF · 14 de junho de 2016

@jcvilanova Aquele banner é feito com css3. usa animations. aquilo não é um vídeo.

Mas sim é Html puro, imagens e textos, além de efeitos de animação css3

Veja este exemplo: https://jsfiddle.net/fr8uh7ps/2/

O artigo na qual eu tire o exemplo é: http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/

jcvilanova · 14 de junho de 2016

@dif Nao quero exagerar, mas seria possivel voce me mandar um exemplo de uma imagem com um texto nesses padroes que te falei ? Quero dar uma olhada em algo mais simples pra que eu possa compreender.

DiF · 16 de junho de 2016

@jcvilanova De qual exemplo você está falando? De animações ou de imagens com aquela tarja mais escura transparente com algum texto por cima dela.. um caption.

Se for de animação tem essa aqui: https://jsfiddle.net/z55z4xL6/

Se for o tipo de caption dentro da imagem para explicar algo veja este exemplo: https://jsfiddle.net/fkL8ehy3/2/

jcvilanova · 27 de junho de 2016

@dif Bom dia! irmão, veja, mexi muito aqui e fiz alguma coisa, porém, mas uma vez cheguei num certo limite. Preciso de ajuda. Veja bem, consegui colocar os botões na posição que queria e consegui fazer com que ao clicar no Botao Cliente, o formulario aparecesse ao lado e desabilitasse os outros botões (participe e anuncie). porém, nao consegui fazer o mesmo com ous outros dois botões.

Este é meu CSS

@charset "utf-8";
/* CSS Document */
    
#conteudo {
        border: 1px solid red;
    height:1200;
    margin:0 auto;
    background:url(Plano-de-Fundo.png)
}
h2 { margin:0 auto;
}
h1 { margin:0 auto;
}
#header {
    margin: 0px 0px 0 0px;
    padding: 11px;
    height: 90px;
    background-image: url(Logo_pre.png), -webkit-gradient(linear, 100.00% 50.87%, 0.00% 49.13%, color-stop( 0% , rgba(39,122,191,1.00)),color-stop( 100% , rgba(255,0,0,0.09)));
    background-image: url(Logo_pre.png), -webkit-linear-gradient(179deg,rgba(39,122,191,1.00) 0%,rgba(255,0,0,0.09) 100%);
    background-image: url(Logo_pre.png), linear-gradient(271deg,rgba(39,122,191,1.00) 0%,rgba(255,0,0,0.09) 100%);
    background-repeat: no-repeat;
    }
    
#slogandoheader {
    margin:200px 100;
    
    }
#barralateral {
   background-color: #FFFBF0;
    width: 200px;
    height:380px;
    padding:11px;
    float:left;
    
        
}
#barlateralcentro {
    background-color: #F00;
    position:relative;
    float: left;
    margin: 0px 0px 0 0;
        width: 180px;
    height:360px;
        padding:11px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#principal {
    background-color: #FF5;
    position:relative;
    padding-left:11px;
     width: 1098px;
     height:402px;
    float:left;
    margin-right:0;
    
   }

   
   #barprincipalcentro {
    background-color: #f41b08;
    position:relative;
    margin: 60px 150px 0 190px;
        width: 650px;
    height:250px;
        padding-top:20px;
    padding-left:11px;
    padding-right:15px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    z-index:1;
}
 .btn {
    background-color: #458ead;
    position: relative;
    bottom: -225px;
    border:0;
    color: black;
    height:50px;
    font-family:Arial;
    font-size:12px;
    padding-top:30px;
    padding-left:25px;
    padding-right:15px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    z-index:2;
}
.btn:hover {
background-color: red;
}
.btn:focus{
    background-color: green;
    outline: 0;
}
.btn[disabled]{
    background-color: gray;
    cursor: no-drop;
}
#formulariocliente {
    width: 210px;
    height: 200px;
    background-color: white;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
#formulariocliente.visivel{
    display: initial!important;
}
#formularioparticipe{
    width: 210px;
    height: 200px;
    background-color: white;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
#formularioparticipe.visivel{
    display: initial!important;
}
#formularioanuncie{
    width: 210px;
    height: 200px;
    background-color: white;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
#formularioanuncie.visivel{
    display: initial!important;
}
#rodape { 
  background-color:black;
  color: white;
  clear:both;
  padding:3px;
  
    }
ul {
    position:relative;
    top: 50px;
    float:right; 
    left:0px;    }
ul li {
    list-style-type: none;
    display: inline;
    padding: 5px 20px 5px 20px;
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, Helvetica, Sans Serif;
    font-size: 12px;
    color: #3FC;
    border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid black;
    -webkit-border-radius: 3px;
    background-image: -webkit-gradient(linear, 100.00% 50.87%, 0.00% 49.13%, color-stop( 0% , rgba(255,255,255,0.02)),color-stop( 55.96% , rgba(16,103,159,0.54)),color-stop( 95.34% , rgba(243,244,245,0.44)));
    background-image: -webkit-linear-gradient(179deg,rgba(255,255,255,0.02) 0%,rgba(16,103,159,0.54) 55.96%,rgba(243,244,245,0.44) 95.34%);
    background-image: linear-gradient(271deg,rgba(255,255,255,0.02) 0%,rgba(16,103,159,0.54) 55.96%,rgba(243,244,245,0.44) 95.34%);
}
    ul li a {
        list-style-type: none;
        text-decoration: none;
        color:#000;
        
    
    }
    hr {
        color:#999;
        }

e essse é o meu HTML

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/Estilo.css" media="screen"/>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/mudacor.js"></script>
    <title>Css</title>
    </head>
    <body>
    <div id="conteudo">
        <div id="header">
        <ul> 
            <li><a href="Home.html"> Home </a></li>
            <li><a href="Quemsomos.html"> Quem Somos </a></li>
            <li><a href="Cadastre-se"> Cadastre-se </a></li>
            <li><a href="Parceiros.html"> Parceiros </a></li>
            <li><a href="Portifólio.html"> Portifólio </a></li>
            <li><a href="Contato.html"> Contato </a></li>
            <hr size=2 width=582 >
            </ul>
        <h1> MEU HEADER</h1>
        <p id="slogandoheader"> Meu Slogan Aqui</p>
        </div>
        <div id="barralateral">
            <div id="barlateralcentro">
                    <h2> Barra Lateral</h2>
                    <p> esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta éprimeira div</p>
            </div>
        </div>
        <div id="principal">
            <h2> Principal </h2>
                <div id="barprincipalcentro">
                        <button class="btn" id="clientes"> CLIENTES </button>
                        <button class="btn" id="participe"> PARTICIPE </button>
                        <button class="btn" id="anuncie"> ANUNCIE </button>
                    <div id="formulariocliente">
                        <form onsubmit="return enviar()">
                            <input type="text" name="Nome" placeholder="Preencha seu nome" required focus>
                            <input type="text" name="Sobrenome" placeholder="Preencha seu spbrenome">
                            <input type="text" name="Telefone" placeholder="Preencha seu telefone">
                            <button type="submit" id="botaoenviar">Enviar</button>
                        </form>
                    </div>
                    <div id="formularioparticipe">
                        <form onsubmit="return enviar()">
                            <input type="text" name="Nome" placeholder="Preencha seu nome" required focus>
                            <input type="text" name="Escolaridade" placeholder="Nivel de Escolaridade">
                            <input type="text" name="Idade" placeholder="Preencha com sua idade">
                            <button type="submit" id="botaoenviar2">Enviar</button>
                        </form>
                    </div>
                    <div id="formularioanuncie">
                        <form onsubmit="return enviar()">
                            <input type="text" name="Nome" placeholder="Preencha seu nome" required focus>
                            <input type="text" name="CNPJ" placeholder="Digite o seu CNPJ">
                            <input type="text" name="Email" placeholder="Coloque aqui o seu email">
                            <button type="submit" id="botaoenviar3">Enviar</button>
                        </form>
                    </div>
                </div>
        </div>
    
        <div id="rodape">
            <h3 id="sloganroda"> Aqui Fica o Meu Rodapé </h3>
            <a id="teste" href="#">... Mudar ... </a>
        </div>   
    </div>    
    </body>
        <script type="text/javascript">
            var botaocliente=document.getElementById("clientes");
            var formulariocliente=document.getElementById("formulariocliente");
            var botaoenviar=document.getElementById("botaoenviar");
            var botaoparticipe=document.getElementById("participe");
            var formularioparticipe=document.getElementById("formularioparticipe");
            var botaoenviar2=document.getElementById("botaoenviar2");
            var botaoanuncie=document.getElementById("anuncie");
            var formularioparticipe=document.getElementById("formularioanuncie");
            var botaooenviar3=document.getElementById("botaoenviar3");
            function enviar(e){
                botaoanuncie.disabled=false;
                botaoparticipe.disabled=false;
                formulariocliente.className="";
                
                return false;
                              }
                botaocliente.onclick=function (e){
                botaoanuncie.disabled=true;
                botaoparticipe.disabled=true;
                formulariocliente.className="visivel";
                
                                              }
            function enviar(e){
                botaoanuncie.disabled=false;
                botaocliente.disabled=false;
                formularioparticipe.className="";
                
                return false;
                              }
                botaoparticipe.onclick=function (e){
                botaoanuncie.disabled=true;
                botaocliente.disabled=true;
                formularioparticipe.className="visivel";
                
                                              }
            function enviar(e){
                botaoparticipe.disabled=false;
                botaocliente.disabled=false;
                formularioanuncie.className="";
                
                return false;
                              }
                botaoanuncie.onclick=function (e){
                botaoparticipe.disabled=true;
                botaocliente.disabled=true;
                formularioanuncie.className="visivel";
                
                                              }
        
        
        </script>
    </html>

DiF · 27 de junho de 2016

@jcvilanova Olá,

Não entendi porque você usou o javascript puro, para fazer o lance de esconder os formulários?

Veja meu exemplo no post #07. Usando jQuery você reduz drasticamente seu código, é fácil de fazer manipulações do DOM.

PS: você tem 3 funções iguais com o nome de enviar()

Estude o código do post #07 que vai permitir fazer o que quer.

jcvilanova · 27 de junho de 2016

@dif voce poderia me mostrar como fazer com jquery? Na verdade nao sei em qual parte do código HTML crio os botões e os formulários, nem mesmo como acessá-los do jquery. Nao fiz Divs ao invés de botões porque achei que botões sao mais faceis de acessar. E porque nao estava conseguindo posicionar as Div onde queria. Mas no arquivo js nao sei como nem onde colocar os comandos para que esses botões executem as chamadas, mostrar form, ocultar forms, desabilitar/habilitar botões etc. Passei a tarde tentando e nao consegui.

DiF · 28 de junho de 2016

@jcvilanova Certo.. mas sem querer ser chato amigo.. Por gentileza, leia com atenção o meu post #07 mais ali em cima.

Eu mostrei o exemplo da estrutura, dentro dos elementos div vai o elemento form.

No mesmo post, mostrei em jQuery como acessa-los.

Até tem uma explicação em texto abaixo do código. Perceba que eu atribui os "form" em uma letra só para você se guiar.

Creio que primeiro, antes de fazer isso com 3 formulários.. Faça com a penas 1. Experimente fazer como no exemplo apenas substituindo os valores de classe.

Vou deixar uma breve explicação do jQuery, mas recomendo que estude ele. tem vários sites inclusive no youtube explicando com mais detalhes.

jQuery

É um framework javascript criado para facilitar o desenvolvimento javascript, onde ele possui uma coleção de bibliotecas. Com ele é possível fazer efeitos, manipular elementos e o DOM(árvore de elementos).

O jQuery para funcionar antes de tudo é preciso ser carregado. Para isso tem várias maneiras, como por exemplo o CDN do google, baixando o arquivo e inserindo no seu código.

Eu costumo usar o CDN porque ele sempre estará atualizado no servidores do google. Para adicionar no seu código basta copiar e colar esta linha:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Normalmente dentro do elemento <head> OU no final da página depois do elemento <body>

Mas é preciso lembrar que ele deve ser o primeiro a ser carregado, ou seja, estar a cima de qualquer outro plugin jQuery.

Agora que já sabe como carregar o jQuery no seu código, para começar a usar o jQuery precisas fazer a seguinte estrutura primeiro:

$(document).ready(function(){


});

Isto significa que, quando o documento estiver pronto vai executar os comandos dentro dele.

Então temos a função ready() que recebe como parâmetro uma função vazia. function().

E é dentro desta função vazia que vamos por os comandos.

Vamos supor que temos esta estrutura HTML:

<div id="quadrado"></div>

CSS:

#quadrado{
 width :50px
 height:50px;
 background:green;
}

Veja que temos um elemento div quadrado de cor verde. Agora queremos acessar este elemento div e alterar a cor para vermelho.

Para isso temos que primeiro prestar a atenção como o elemento está sendo nomeado, no meu exemplo chamados de quadrado. ou seja o ID dele é quadrado, onde o ID é identificado pela tralha "#" e class é identificado por um "ponto".

Então para acessar este elemento div vermelho fazemos assim:

$(document).ready(function(){
	$("#quadrado")
});

Esta é a chamada para o elemento div. Mas ainda ele não fará nada, pois não está chamando nenhuma função ainda.

Continuando, depois de referenciar o elemento, usamos uma função chamada click() que é responsável por efetuar alguma ação no momento que clicar em cima do elemento.

O código fica assim:

$(document).ready(function(){
	$("#quadrado").click();
});

Agora estamos dizendo ao javascript que, quando clicarmos dentro do elemento DIV chamado de quadrado a função click() será chamada.

Ainda não irá acontecer nada, porque não demos o comando ainda.

Dentro desta função click(), irá ter uma outra função vazia, exatamente como a anterior que expliquei.. então o código fica assim:

$(document).ready(function(){
	$("#quadrado").click(function(){
    
    });
});

Pronto. A estrutura básica do comando está feita. Agora falta dar o comando em si.

Para isso chamamos o nosso elemento, seguido da função que queremos que ele execute no caso trocar a cor para verde.

O código fica assim:

$(document).ready(function(){
	$("#quadrado").click(function(){
    	   $("#quadrado").css({"background": "red"});
       });
});

Perceba que a função css() é chamada no momento do click no elemento div.

O jQuery é tão legal, que te permite usar múltiplos elementos em uma chamada só.

Por exemplo:

Temos a seguinte estrutura HTML:

<div id="quadrado"></div>
<div id="circulo"></div>

Quero que quando clicar no quadrado, mude de cor o quadrado, o circulo e aumente o tamanho do circulo.

O código

$(document).ready(function(){
	$("#quadrado").click(function(){
         $("#quadrado, #circulo").css({"width": "150px", "height":"150px", "background":"blue"});
         $("#circulo").css({"border-radius":"90px"});
       });
});

Veja a terceira linha, dentro de $() chamamos o id quadrado e o id circulo. Exemplo prático: https://jsfiddle.net/u6u8vwqb/1/

Basicamente é isso.

Você acessa os elementos com $(nome do elemento) seguido da função desejada.

Claro que este exemplo é simples, você pode fazer isso com outros elementos sem ser div.

Mas no seu caso, você quer esconder os formulários quando clicar em um deles para preencher.

Então aí você usa o exemplo de multiplos elementos citados ali em cima.. usando a função click()

jcvilanova · 28 de junho de 2016

@dif Meu irmão, depois da sua explicação, pormenorizada demais, é claro, as coisas começaram a andar. Consegui fazer algo e gostaria que desse uma olhada.

<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<title>Css</title>
</head>
<body>
<div id="conteudo">
    <div id="header">
        
    <h1> MEU HEADER</h1>
    <p id="slogandoheader"> Meu Slogan Aqui</p>
    </div>
    
        
    </div>
    <div id="principal">
        <div id="quadrado">
        <h1 id="Container1"> Container Principal </h1>
        <button class="btn" id="clientes"> Cadastro de Clientes </button>
        <button class="btn" id="azul"> Apaga botao verde </button>
        <button class="btn" id="vermelho">Apaga botao Azul </button>
        <div id="formulariocliente">
                        <form>
                            <input type="text" name="Nome" placeholder="Preencha seu nome" required focus>
                            <input type="text" name="Sobrenome" placeholder="Preencha seu spbrenome">
                            <input type="text" name="Telefone" placeholder="Preencha seu telefone">
                            <button type="submit" id="botaosumir">Apagar Formulário</button>
                        </form>
                    </div>
        </div>
        
        
    </div>
     <div id="rodape">
        <h3 id="sloganroda"> Aqui Fica o Meu Rodapé </h3>
    <a id="teste" href="#">... Mudar ... </a>
     
     </div>   
    </div>    
</body>
</html>

o CSS

@charset "utf-8";
/* CSS Document */
#quadrado{
 background-color:green;
    margin: 0px 500px px 0px;
    width:500px;
    height:360px;
    padding:11px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#formulariocliente {
    width: 210px;
    height: 200px;
    background-color: white;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}

O JQuery

$(document).ready(function(){
    $("#clientes").click(function(){
           $("#formulariocliente").css("display", "flex");
       });
    $("#botaosumir").click(function(){
           $("#quadrado").css({"background": "red"});
           $("#formulariocliente").css("display", "none");
       });   
       $("#clientes").click(function(){
           $("#azul").css({"display": "none"});
           $("#vermelho"). css({"active":"false"});
       });   
});

Onde reside o problema? Procurei em tudo que é lugar o evento que habilita e desabilita botões no jquery e nao consegui achar. Por isso nao consegui .

Mas mudar a cor, fazer o formulario aparecer e sumir, tudo isso deu certo.

Avancei, mas nao sei onde fica esse evento do Btn e seu nome.

DiF · 28 de junho de 2016

@jcvilanova

Para desabilitar o botão podes usar o seletor + a função attr().

exemplo:

$(document).ready(function(){
  $("#clientes").click(function(){
       $("#azul, #vermelho").attr("disabled","disabled");
  });
  
});

A explicação é bem simples. Quando clicar no botão cujo o ID é #clientes, o botão com o id #azul e #vermelho serão desabilitados.

Veja funcionando o exemplo: https://jsfiddle.net/j27bk9hu/

Para voltar ao estado original ou seja, habilitado.. basta usar a função removeAttr("disabled")

jcvilanova · 28 de junho de 2016

@dif Ok...primeiramente desculpe, mas ai vai.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/Estilo.css" media="screen"/>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script type="text/javascript" src="js/btns.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>

<title>Css</title>

</head>

<body>
<div id="conteudo">
	<div id="header">
   	 <ul> 
    	   <li><a href="Home.html">Home</a></li>
           <li><a href="Quemsomos.html">Quem Somos</a></li>
           <li><a href="Parceiros.html">Parceiros</a></li>
           <li><a href="Portifólio.html">Portifólio</a></li>
	   <li><a href="Cadastros.html">Cadastre-se</a></li>
           <li><a href="Contato.html">Contato</a></li>
           <hr size=2 width=584 >
          </ul>
    <h1> MEU HEADER</h1>
    <p id="slogandoheader"> Meu Slogan Aqui</p>
    </div>
	<div id="barralateral">
    	<div id="barlateralcentro">
        <h2> Barra Lateral</h2>
		<p> esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta éprimeira div</p>
        
        </div>
		
	</div>

	<div id="principal">
		
    	<div id="barprincipalcentro">
		    <ul id="centro">
			<li><img src="imagens/1.png"/></li>
			<li><img src="imagens/2.png"/></li>
			<li><img src="imagens/3.png"/></li>
			
            </ul>
        </div>
		</div>
     <div id="rodape">
        <h3 id="sloganroda"> Aqui Fica o Meu Rodapé </h3>
	<a id="teste" href="#">... Mudar ... </a>
     
     </div>   
    </div>    
</body>
</html>

Aí defini uma div barprincipalcentro, para alocar as imagens do slide.

No Css fiz o seguinte:

@charset "utf-8";
/* CSS Document */

	
#conteudo {
    	border: 1px solid red;
	height:1200;
	margin:0 auto;
	background:url(Plano-de-Fundo.png)

}

h2 { margin:0 auto;
}
h1 { margin:0 auto;
}
#header {
	margin: 0px 0px 0 0px;
	padding: 11px;
	height: 90px;
	background-image: url(Logo_pre.png), -webkit-gradient(linear, 100.00% 50.87%, 0.00% 49.13%, color-stop( 0% , rgba(39,122,191,1.00)),color-stop( 100% , rgba(255,0,0,0.09)));
	background-image: url(Logo_pre.png), -webkit-linear-gradient(179deg,rgba(39,122,191,1.00) 0%,rgba(255,0,0,0.09) 100%);
	background-image: url(Logo_pre.png), linear-gradient(271deg,rgba(39,122,191,1.00) 0%,rgba(255,0,0,0.09) 100%);
	background-repeat: no-repeat;
	}
	
#slogandoheader {
	margin:200px 100;
	
	}
#barralateral {
   background-color: #FFFBF0;
    width: 200px;
    height:380px;
    padding:11px;
    float:left;
	
		
}

#barlateralcentro {
	background-color: #F00;
	position:relative;
	float: left;
	margin: 0px 0px 0 0;
    	width: 180px;
	height:360px;
    	padding:11px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#principal {
    background-color: #FF5;
	position:relative;
	padding-left:11px;
	 width: 1000px;
	 height:402px;
	float:left;
	margin-right:0;
	
   }


   
   #barprincipalcentro {
	background-color: #f41b08;
	position:relative;
	margin: 60px 150px 0 190px;
    width: 650px;
	height:250px;
    	padding-top:20px;
	padding-left:11px;
	padding-right:15px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	z-index:1;
}

 .btn {
	background-color: #458ead;
    position: relative;
	bottom: -225px;
	border:0;
	color: black;
    height:50px;
	font-family:Arial;
	font-size:12px;
	padding-top:30px;
	padding-left:25px;
	padding-right:15px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	z-index:2;
}


#formulariocliente {
	width: 210px;
	height: 200px;
	background-color: white;
	position: absolute;
	right: 0;
	top: 0;
	display: none;
}
#formulariocliente.visivel{
	display: initial!important;
}

#formularioparticipe{
	width: 210px;
	height: 200px;
	background-color: white;
	position: absolute;
	right: 0;
	top: 0;
	display: none;
}
#formularioparticipe.visivel{
	display: initial!important;
}

#formularioanuncie{
	width: 210px;
	height: 200px;
	background-color: white;
	position: absolute;
	right: 0;
	top: 0;
	display: none;
}
#formularioanuncie.visivel{
	display: initial!important;
}

#rodape { 
  background-color:black;
  color: white;
  clear:both;
  padding:3px;
  
	}

	#centro {
	position:absolute;
	top: 0px;
	left:0px;	}

ul {
	position:relative;
	top: 50px;
	float:right; 
	left:0px;	}

	
ul li {
	list-style-type: none;
	display: inline;
	padding: 5px 20px 5px 20px;
	text-decoration: none;
	font-family: "Trebuchet MS", Arial, Helvetica, Sans Serif;
	font-size: 12px;
	color: #3FC;
	border-radius: 3px;
	-moz-border-radius: 3px;
	border: 1px solid black;
	-webkit-border-radius: 3px;
	background-image: -webkit-gradient(linear, 100.00% 50.87%, 0.00% 49.13%, color-stop( 0% , rgba(255,255,255,0.02)),color-stop( 55.96% , rgba(16,103,159,0.54)),color-stop( 95.34% , rgba(243,244,245,0.44)));
	background-image: -webkit-linear-gradient(179deg,rgba(255,255,255,0.02) 0%,rgba(16,103,159,0.54) 55.96%,rgba(243,244,245,0.44) 95.34%);
	background-image: linear-gradient(271deg,rgba(255,255,255,0.02) 0%,rgba(16,103,159,0.54) 55.96%,rgba(243,244,245,0.44) 95.34%);
}
	ul li a {
		list-style-type: none;
		text-decoration: none;
		color:#000;
		
	
	}
	hr {
		color:#999;
		}

E por último o código JQuery:

$(function (){
	   $("#barprincipalcentro #centro").cycle ({
	   fx: 'fade',
	   speed:2000,
	   timeout: 4000,
				})
		     })

A pergunta é, já que as imagens tem o mesmo tamanho da DIV e estão salvas no modelo para web, porque nao ficam exatamente na DIV ?

Obs: fiz uso correto do botao Code ?

Entrar

Acessar elemento dentro de uma div com seletores jquery

Posts recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais