Develop Reference

Why doesn't my click function work in jquery?

I wan to create a simple carousel that holds an image title and text. When I click the "next" span, it should display the next two <li>. But nothing happens when I do so.
<script type="text/javascript">
$(document).ready(function() {
$('#right').click(function() {
$('li').animate({
left: '-600px'
}, 500);
});
});
</script>
Fiddle
See this example.

This is a pure CSS issue. You need only to add position: relative; to your li, so you can effect the left property in your script.
.carousel-inner li {
display: inline;
float: left;
margin: 20px;
border: 1px solid #999;
padding: 25px;
border-radius: 20px;
position: relative; // Add this so setting a left position will work
}
Simply try adding that in Chrome Inspector and you'll see it works. Ciao!

Add position: relative to your .carousel-inner li.

Sliding menu works fine but does double animations

I have just succeeded to make a menu that comes sliding in from the top with the help of Jquery. When I press the tab 'menu' it comes in/down and when I leave the menu, it slides back.
The problem is that when I press the menu tab quickly 2 times, it goes down the double amount of pixels.
Also when I leave the menu it goes up, but when I while the animation is still happening go back in and leave again, it also goes up the double amount of pixels.
This is my code:
CSS
#menu {
position:absolute;
left:0px;
top:-203px;
width: 100%;
z-index:1;
}
#menucontentwrapper {
background-color: #330066;
width: 100%;
height: 200px;
border-left: 3px solid #000000;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
}
#menucontent {
height: 200px;
width: 820px;
margin: 0 auto;
}
#menutabwrapper {
width: 820px;
height: 50px;
margin: 0 auto;
}
#menutab {
background-color: #330066;
height: 30px;
width: 100px;
float: right;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-left: 3px solid #000000;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
text-align: center;
vertical-align: middle;
line-height: 30px;
font-weight: bold;
font-size: 20px;
color: #FFFFFF;
}
The body
<div id="menu">
<div id="menucontentwrapper">
<div id="menucontent"></div>
</div>
<div id="menutabwrapper">
<div id="menutab">MENU</div>
</div>
</div>
<script>
$('#menutab').click(function() {
$('#menu').animate({
top: '+=203',
}, 1000, function() {
// Animation complete.
});
})
$('#menucontentwrapper').mouseleave(function() {
$('#menu').animate({
top: '-=203',
}, 500, function() {
// Animation complete.
});
})
</script>
Do any of you know a solution to this?
Thanks in advance!

You can do this way:
var $menutab = $('#menutab');
var $menu = $('#menu');
$menutab.one('click', slideDown);//Initially register one click event to slideDown
function slideDown()
{
$menu.animate({
top: '+=203',
}, 1000, function () {
$('#menucontentwrapper').one('mouseleave', slideUp);// On completion of animation register one mouseleave event to slideUp
});
}
function slideUp()
{
$menu.animate({
top: '-=203',
}, 1000, function () {
$menutab.one('click', slideDown);// On completion of animation register one click event to slideDown
});
}
Fiddle
The method works because by using one instead of on to attach the event handler, it makes it so neither event is handled while the animation is running. This is because a handler attached by one only executes once and is then removed. After the animation is complete the appropriate handler is attached in the complete callback of the animate function.
See .one()

Check out jQuery stop() method.
Before you call your animate functions, call stop. Using the parameters true, true will cause all of #menu's running animation to jump to the end. On the off chance you'll have multiple animations intentionally running, then you should check out how to use the queue parameter.
$('#menutab').click(function() {
$('#menu').stop(true, true).animate({
top: '0px',
}, 1000, function() {
// Animation complete.
});
})
$('#menucontentwrapper').mouseleave(function() {
$('#menu').stop(true, true).animate({
top: '-203px',
}, 500, function() {
// Animation complete.
});
})

You'll want to run a check to see if the element is in the middle of an animation on your click function:
$('#menutab').click(function() {
if( !$('#menu').is(':animated') ) {
$('#menu').animate({
top: '+=203',
}, 1000, function() {
// Animation complete.
});
}
})

How to slide toggle a pseudo element?

As you can see in this jsfiddle, when you click the menu button, the little triangle that points to the button is only shown after the animation has finished. I'd like the animation to start with the pseudo element and only then proceed to the drop-menu element. How can I accomplish this?
A solution doesn't necessarily have to use javascript, CSS3 will be most welcome, I'm not worried about compatibility issues.

You can try this - DEMO
.drop-menu {
display: none;
position: relative;
height: 60px;
top: -20px;
}
.drop-menu ul::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: -30px;
left: 30px;
border-width: 15px;
border-color: transparent transparent red transparent;
border-style: solid;
}
.drop-menu ul {
background-color: red;
position: relative;
top: 20px;
z-index: 999;
}

See http://jsfiddle.net/SZWmd/23/
The problem is that while sliding, the element must have overflow:hidden, but then the triangle is hidden too.
Then, you have to slide .drop-menu ul instead of .drop-menu. You could easily do
$('.drop-menu-button').click(function() {
$('.drop-menu').toggleClass('visible');
$('.drop-menu ul').slideToggle();
});
and use this selector:
.drop-menu.visible::before
But the problem is that when is sliding up, the triangle is hidden at the beginning.
Then, you need
$('.drop-menu-button').click(function() {
if($('.drop-menu').hasClass('visible')){
$('.drop-menu ul').slideUp('',function(){
$('.drop-menu').removeClass('visible');
});
}else{
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideDown();
}
});
Edit:
You can also use
$('.drop-menu-button').click(function() {
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideToggle('',function(){
if(!$(this).is(':visible')){
$('.drop-menu').removeClass('visible');
}
});
});
See it here: http://jsfiddle.net/SZWmd/31/

Weird jQuery and HTML implementation

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>NIU</li>
</ul>
<ul id="navigation2">
<li>SKETCH/<br>PHOTO<br>BLOG</li>
</ul>
<div class="panel_button" style="display: visible;">ABOUT<br>THE<br>BLOGGER</div>
<ul id="navigation4">
<li>LINKS<br>OUT</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;">Hide </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!

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

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(/* ... */);

div.panel_button is twice as big as the embedded a. This should fix the problem:
$("div.panel_button a").click(function(){

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();
});

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

Change 'Click' function to mouseover/mouseout

I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}

When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}