2

Sei que a pergunta é confusa, mas é o seguinte, eu fiz um codigo jQuery pelo codeacademy (jQuery Functions and Selectors 11.Click and Pull), e lá ensina a fazer um algoritmo que achei muito legal, mas ele só funciona lá, no meu browser não funciona, seja no firefox ou no Chrome. Ele é assim: Ele inicia assim

E depois quando se clica no Slide Up/Down deveria ficar assim:

inserir a descrição da imagem aqui

Porem, no browser ele quando clico nada acontece. Fica só como esta na primeira imagem.

$(document).ready(function(){
    $('.pull-me').click(function(){
        $('.panel').slideToggle('slow');
        });    
});
body {
    margin:0 auto;
    padding:0;
	width:200px;
    text-align:center;
}
.pull-me{
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}
.panel {
	background: #ffffbd;
    background-size:90% 90%;
    height:300px;
	display:none;
    font-family:garamond,times-new-roman,serif;
}
.panel p{
    text-align:center;
}
.slide {
	margin:0;
	padding:0;
	border-top:solid 2px #cc0000;
}
.pull-me {
	display:block;
    position:relative;
    right:-25px;
    width:150px;
    height:20px;
	font-family:arial,sans-serif;
    font-size:14px;
	color:#ffffff;
    background:#cc0000;
	text-decoration:none;
    -moz-border-bottom-left-radius:5px;
    -moz-border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.pull-me p {
    text-align:center;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Slide Panel</title>
        <script type="text/javascript" src="Slide.js"></script>
        <link rel="stylesheet" type="text/css" href="Slide.css"></link>
    </head>
    <body>
        <div class="panel">
        <br />
        <br />
        <p>Now you see me!</p>
        </div>
        <p class="slide"><div class="pull-me">Slide Up/Down</div></p>
    </body>
</html>

Os três arquivos estão na mesma pasta e estão nomeados como Slide.html, Slide.css e Slide.js; Sendo que tanto o html quanto o css já estavam feitos, eu só fiz o javascript. Não sei se é alguma configuração ou algo que tem que estar instalado, mas não acredito que seja nada disso.

Se puderem me ajudar e explicar o que há de errado eu agradeceria muito.

Obrigado.

2 Respostas 2

4

Alternativa com CSS3

A quem interessar possa, segue uma versão que faz o proposto, mas sem usar Javascript:

#slideout label {
  position: absolute;
  top: 2px;
  left: 75px; 
  width: 150px;
  color: #fff;
  background-color:#c00;
  text-align: center;
  border-radius: 0 0 6px 6px;

  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}
#slide {
  position: absolute;
  background-color:#fe9;
  width: 200px;
  height: 150px;
  top: -150px;
  left: 50px;
  border-bottom: 2px solid #c00;

  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}
#toggle:checked ~ label { top: 150px }
#toggle:checked ~ div { top: 0 }

.hide {display:none}
<div id="slideout">
  <input type="checkbox" class="hide" id="toggle">
  <div id="slide">
    Aqui vai seu texto.
  </div>
  <label for="toggle">abrir/fechar</label>
</div>

Dê um clique no executar, logo acima, para testar em funcionamento.


Breve explicação do que foi feito:

Para termos um estado aberto / fechado, usamos um checkbox escondido. Para acionar este checkbox, o label for nos serve bem, pois um click no label aciona o controle principal.

Uma vez que temos esse toggle funcionando, usamos o pseudo-seletor :checked para diferenciar o CSS do aberto e do fechado, mudando a propriedade top. Para isto, usamos o "seletor de irmão", o ~, que age sobre os controles no mesmo nível do nosso checkbox.

Para animar a descida e a subida, utilizamos o transition-duration, também do próprio CSS. Como a única coisa que muda quando acionamos o checkbox é a propriedade top, o efeito é a rolagem vertical.

De resto, aproveitamos o CSS para estilizar um pouco o slider, basicamente como exemplo.

2
  • 1
    Muito interessante, sempre bom aprender novas formas e idéias. 19/11/2015 às 2:06
  • @AlanRezende eu acho legal complementar com alternativas, assim ficam possibilidades diversas para os futuros visitantes. Assim já temos a sua, que resolve o código do autor, uma alternativa com CSS e quem sabe alguém mais poste alternativas. Esses sliders servem para um monte de coisa.
    – Largato
    19/11/2015 às 2:11
2

Você precisa adicionar o jQuery ao seu código.

utilize o código abaixo antes de seu código javascript.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Ex:

<!DOCTYPE html>
<html>
    <head>
        <title>Slide Panel</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="Slide.js"></script>
        <link rel="stylesheet" type="text/css" href="Slide.css"></link>
    </head>
    <body>
        <div class="panel">
        <br />
        <br />
        <p>Now you see me!</p>
        </div>
        <p class="slide"><div class="pull-me">Slide Up/Down</div></p>
    </body>
</html>

Veja funcionando em http://plnkr.co/edit/pUcRy2L0WpOp3WuGCzcx?p=preview

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .