Weird jQuery and HTML implementation

Question

Okay, so what I'm trying to do is have a user click on a link and have a box slide down ontop.
I have the main things done, but the box seems to be a bit weird. If you click on the specified box (in this case, "About the Blogger"), the box slides down. Then if you click anywhere in the area below the navigation, the box also slides down. How do I stop this?
Relevant coding:

CSS:

.panel_button {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;

}

.panel_button a {
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
transition: all 1s ease;
background: #F5A564;
color: #F5CBAF;
display: block;
position: relative;
top: -160px;
font-size: 255%;
width: 50%;
height: 160px;
text-decoration: none;
}

.panel_button a:hover {
background: #808080;
color: #FFFFFF;
}

#toppanel {
margin-top: 0px;
margin-left: 48%;
position: absolute;
width: 48%;
left: 0px;
z-index: 25;
text-align: center;
}

#panel {
width: 100%;
position: relative;
top: 1px;
height: 0px;
margin-left: auto;
margin-right: auto;
z-index: 10;
overflow: hidden;
text-align: left;
}

#panel_contents {
background: #fff;
height: 700px;
width: 100%;
position: absolute;
z-index: -1;
}

Header.php

<div id="container">

<ul id="navigation1">
<li><a href="http://www.niu-niu.org/">NIU</a></li>
</ul>

<ul id="navigation2">
<li><a href="http://www.spidur.tumblr.com">SKETCH/<br>PHOTO<br>BLOG</a></li>
</ul>

<div class="panel_button" style="display: visible;"><a href="#panel">ABOUT<br>THE<br>BLOGGER</a></div> 

<ul id="navigation4">
<li><a href="http://www.niu-niu.org/about">LINKS<br>OUT</a></li>
</ul>
 </div>

<div id="toppanel"> 
 <div id="panel"> 

  <div id="panel_contents">and jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhere </div> 
  <div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">Hide</a> </div> 
</div></div>

I honestly doubt it's the jQuery issue, but I'm not familiar with jQuery, so why not:

$(document).ready(function() {
    $("div.panel_button").click(function(){
        $("div#panel").animate({
            height: "430px"
        })
        .animate({
            height: "400px"
        }, "fast");


    }); 

   $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"
        }, "fast");


   });  


});

If you want to look at it, my website is at Niu-Niu.org.

Thank you for looking!

Daniel A. White · Accepted Answer · 2011-09-02 12:06:01Z

1

Because its also div.panel_button. You should redefine your selector in the jQuery.

answered Sep 2, 2011 at 12:06

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gion_13 · Accepted Answer · 2011-09-02 12:10:31Z

1

use the actual anchor element to trigger the animation instead of the whole panel :

$('#panel').click

instead of

$("div.panel_button").click

a bit off topic, but you should improve your animation by stoping any previous animations in progress :

$("div#panel").stop().animate(/* ... */);

answered Sep 2, 2011 at 12:10

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

2 Comments

Gergely Fehérvári Over a year ago

did you see why he uses the animation twice? he wanted to use a bouncing effect. so stop animating wont be good.

gion_13 Over a year ago

stop before starting the first animation ;). this would prevent any other queued animation to start or continue and scrue up the bounce effect

sanmai · Accepted Answer · 2011-09-02 12:08:08Z

0

div.panel_button is twice as big as the embedded a. This should fix the problem:

$("div.panel_button a").click(function(){

answered Sep 2, 2011 at 12:08

sanmai

31.2k12 gold badges72 silver badges76 bronze badges

Comments

Jens Roland · Accepted Answer · 2011-09-02 12:05:38Z

0

When you click an element, your click is propagated (bubbled) up the DOM tree, so all parents receive the click event as well, and all their handlers are executed.

This presents a problem when you have a clickable element inside another clickable element, since the inner element will handle the click event but then pass the event on to its parent, which will then also handle it.

The usual way to fix this is to prevent the default behavior whenever you catch a click event, like this:

$("div.panel_button").click(function(ev){
    $("div#panel").animate({
        height: "430px"
    })
    .animate({
        height: "400px"
    }, "fast");
    ev.preventDefault();
}); 

$("div#hide_button").click(function(ev){
    $("div#panel").animate({
        height: "0px"
    }, "fast");
    ev.preventDefault();
});

answered Sep 2, 2011 at 12:05

Jens Roland

27.8k15 gold badges86 silver badges105 bronze badges

1 Comment

Gergely Fehérvári Over a year ago

btw if you click on the link again, it would slow down and up again.. the problem is not only the bubbling.

Gergely Fehérvári · Accepted Answer · 2011-09-02 12:25:24Z

(update) aww. the selector is the main problem. use $("#panel")

the problem is the bouncing effect.

this may solve your problem:

 var show = false;

$("div.panel_button").click(function(e){
   if (show) return;
    $("div#panel").animate({
        height: "430px"
    })
    .animate({
        height: "400px"
    }, "fast");

 show = true;
 e.preventDefault();

});

$("div#hide_button").click(function(e){
   if(!show) return;
    $("div#panel").animate({
        height: "0px"
    }, "fast");

show = false;
    e.preventDefault();
});

If you want to use more creative easing effect you should use the .slideDown() function with easing argument.

Easing The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

For a great easing extension visit this site.

according to other asnwers, you should also use event.preventDefault to stop the event bubbling through the DOM.

Collectives™ on Stack Overflow

Weird jQuery and HTML implementation

5 Answers 5

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related