How to click and scroll a hidden part?

Asked

Viewed 522 times

2

I know the question is confusing, but here’s the thing, I made a jQuery code by codeacademy (jQuery Functions and Selectors 11.Click and Pull), and there it teaches you how to make an algorithm that I thought was really cool, but it only works there, in my browser does not work, either in firefox or in Chrome. He’s like that: Ele inicia assim

And then when you click on Slide Up/Down it should look like this:

inserir a descrição da imagem aqui

However, in the browser it when I click nothing happens. It is just like this in the first image.

$(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>

The three files are in the same folder and are named as Slide.html, Slide.css and Slide.js; Since both html and css were already done, I just did javascript. I don’t know if it’s some configuration or something that has to be installed, but I don’t think it’s anything like that.

If you could help me and explain what’s wrong I’d really appreciate it.

Thank you.

javascript html css

2 answers

4

Alternative with CSS3

To whom interested can, follows a version that makes the proposed, but without using 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>

Click on the above to test in operation.


Brief explanation of what has been done:

To have an open/closed state, we use a checkbox hidden. To trigger this checkbox, the label for serves us well, because a click on label triggers the main control.

Once we have this toggle working, we use the pseudo-selector :checked to differentiate CSS from open and closed, changing the property top. For this, we use the "brother selector", the ~, that acts on the controls on the same level as our checkbox.

To animate the descent and climb, we use the transition-duration, also the CSS itself. As the only thing that changes when we checkbox is the property top, the effect is vertical scrolling.

For the rest, we take advantage of the CSS to style a little the slider, basically as an example.

  • 1

    Very interesting, always good to learn new forms and ideas.

  • @Alanrezende I find it cool to complement with alternatives, so there are various possibilities for future visitors. So we already have yours, which solves the author’s code, an alternative with CSS and perhaps someone else post alternatives. These sliders serve for a lot of things.

2

You need to add jQuery to your code.

use the code below before your javascript code.

<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>

See working in http://plnkr.co/edit/pUcRy2L0WpOp3WuGCzcx?p=preview

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.