I don't quite understand why this isn't working. I'm trying to make it so .on() click will removeClass() .active-title from a list-item; Then addClass() .active-title to the next() list-item.
$(".next").on({
click: function(){
$('.active-title').removeClass(function(){
$(this).next().addClass('active-title');
}
});
});
Demo:
Link to JSFiddles Demo
Final Solution Demo in JSFIDDLES
You have some errors in your code
}
});
});
supposed to be
}); <--- closing of removeClass
} <-- closing for click function
});
Try this
$(".next").on({
click: function () {
// Find the actuve element
var $active = $('.active-title', 'ul');
// If the next element exists the get the element
// otherwise get the first li from the ul
var $nextElem = $active.next('li').length ? $active.next('li')
: $('ul').find('li:first');
// Add and remove class
$active.removeClass('active-title');
$nextElem.addClass('active-title');
}
});
Check Fiddle
Related
I have this script that shows/hides a div. Could anyone please explain how I can get it to show only one div at a time?
<script>
function Show_Div(Div_id) {
if (false == $(Div_id).is(':visible')) {
$(Div_id).show();
}
else {
$(Div_id).hide();
}
}
</script>
and the link...
onClick="Show_Div(Div_1)
Thanks!
Try using this
$(document).ready(function(){
$('.parent div').hide(); // hide div's on load using parent class as a starting point
$('#nav a').click(function() { // on the anchor clicks that are inside div with id=nav
var $div = $('.parent div').eq($(this).index('#nav a')); // get the relevant div
$div.show(); // show the relevant div
$('.parent div').not($div).hide(); // hide all but the relevant div
});
}):
if i understand your question correctly , maybe you can try this way:
<script>
function Show_Div(Div_id) {
if (false == $(Div_id).is(':visible')) {
$(this).show();
}
else {
$(this).hide();
}
}
</script>
if your use this in
$(this).show();
the only one will toggle which your click~
but in this way :
$(Div_id).show();
you will get a array of target , because the selector of Jquery will select a array of target .
hope it will help you~
I'm having a bit of trouble with a dropdown menu that triggers fadeOut as soon as the mouse leaves the grandparent div, I've searched this problem to death and have yet to find an elegant solution. Here is my code : link
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function(){
$('ul li ul').fadeOut('400');
});
}
$(document).ready(main);
DEMO: MY FIDDLE
You need to specify what element(s) you are trying to attach the event to. By adding '>' youre forcing to only attach the event to that element's children. Try this:
var main = function() {
$('nav').mouseenter(function() {
$(this).find('ul').fadeIn('400');
});
$('nav>ul>li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
FIDDLE
$(this).find('ul').fadeOut('400');
is correct as $('ul>li>ul').fadeOut('400'); Could not target specific (current) li.
Use following hierarchical flow of TAGS
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
This should be easy but I checked on google and did not find any info on this.
I am doing:
$notification.slideDown(1000, function(){
$('#notifications').append($notification);
});
However it is not sliding down. It is getting displayed without any animation. No error either.
.slideUp() is working properly.
What am I doing wrong here?
jsFiddle
Change
$notification.slideDown(1000, function () {
$('#notifications').append($notification);
});
to
$('#notifications').append($notification.hide());
$notification.slideDown(1000);
The reason why slideDown doesn't work is because the element is visible when you are appending it
DEMO
Also note that when you slideUp the notification you should remove it because otherwise you'll have multiple notifications just taking up place
$closeButton.click(function () {
$(this).parent().slideUp(function () {
$(this).remove();
});
});
You had two minor issues, first your .notification element needs to be hidden to be able to slideDown().
.notification{
display: none;
}
Secondly, you were trying to animate in an element that doesn't exist until the animation is complete :)
$notification.slideDown(1000, function(){
$('#notifications').append($notification);
});
Updated script below. PS: Don't forget to add the CSS snipplet.
$(document).ready(function(){
CKEDITOR.replace( 'description' );
$('#title').focus();
$('form').submit(function(event){
event.preventDefault();
var html=CKEDITOR.instances.description.getSnapshot();
var $closeButton = $('<img class="closeButton" src="http://www.tunesdiary.com/static/images/icon_grey_cross.gif">');
var $title = $('<span></span>').addClass('title').text($('#title').val());
var $description = $('<span></span>').addClass('description').html(html);
var $notification = $('<div></div>').append($closeButton).append($title).append($description).addClass('notification');
$('#notifications').append($notification);
$notification.slideDown(1000);
$closeButton.click(function(){
$(this).parent().slideUp();
});
});
});
slideDown documentation says:
$notification.slideDown(1000, function(){});
here function executes on sliding complete. So you need to append hidden element then slidDown to show.
$('#notifications').append($notification.hide());
$notification.slideDown(1000);
Here is demo
I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:
<script type="text/javascript">
$(function() {
$("#form1 :checkbox#checkbox1").click(function() {
var d = document.createElement('div');
if ($(this).is(":checked")) {
$(d).addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
//$(".newdiv").fadeOut(1000);
$(d).fadeOut(1000);
}
});
});
</script>
The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.
There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
$('#mydiv .newdiv').fadeOut(function(){
$(this).remove()
})
}
});
});
Demo: Fiddle
Another solution is to have a static div which will be shown and hidden
$(function() {
var div = $('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide();
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
div.fadeIn(1000);
} else {
div.fadeOut(1000)
}
});
});
Demo: Fiddle
jsFiddle Demo
Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.
A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.
To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.
Finally, use jQuery to create the element:
$(function () {
var $d = $('<div>', {
"class": "hidden",
text: "This is a new div"
}).appendTo("#mydiv");
$("#checkbox1").change(function () {
$d.clearQueue()
.stop()
.fadeToggle(1000);
});
});
You better make d a jQuery object.
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
var d = $('<div class="newdiv"></div>');
if ($(this).is(":checked")) {
d.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
d.fadeOut(1000);
}
});
});
</script>
i am using jquery for set background color to the table data and its working fine but i need when user again click the td the color should be deselect. its my script for add color.
java script:
jQuery('td').click(function () { $(this).addClass('active'); });
my css class:
.active{background-color:red;}
when user again click the td the class should remove. How to achieve this.
jQuery('td').click(function () { $(this).toggleClass('active'); });
toggleClass adds if it doesn't exist or removes if it does exist.
You can use
$(this).removeClass('active');
although you would need to do a check to see if it is already active, which would make your code look like this:
jQuery('td').click(function () {
if($(this).hasClass('active') {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
EDIT:
#Justice is more correct:
jQuery('td').click(function () { $(this).toggleClass('active'); });