Explanation in context(WordPress):
I want to check if my li element has a class called "current-menu-item" if it does I want it to stop the animate function. If it does not have that class continue animating. This script is currently not working. Thanks for any help.
$(document).ready(function ()
{
$('.nav li a').hover(function()
{
if ($(this).parentNode.hasClass('current-menu-item'))
{
alert('this item has the class of current-menu-item');
}
else
{
$(this).animate({color:'#3b3b3b'}, 300, 'linear');
}
},
function()
{
if ($(this).parentNode.hasClass('current-menu-item'))
{
// do nothing
}
else
{
$(this).animate({color:'#999'}, 300, 'linear');
}
});
});
if ($(this).parent().hasClass('current-menu-item'))
jQuery objects don't have a parentNode property. DOM elements do, but then the element returned by parentNode doesn't have jQuery methods like .hasClass(). Use jQuery's .parent() method instead.
Related
I've got jquery waypoints working as expected. Basically if a user scrolls up or down I add or remove a class to a certain div depending on where the div is in the viewport. The code looks like this:
$(function() {
$('#names').waypoint('sticky', {
offset: 60,
stuckClass: 'stuck'
});
var bio_container = $('.bio-container');
bio_container.waypoint({
handler: function(direction,event) {
var active_section = $(this);
if (direction === 'down') {
$(this).addClass('active');
}
else {
$(this).removeClass('active');
}
},
offset: 'bottom-in-view'
});
bio_container.waypoint({
handler: function(direction,event) {
var active_section = $(this);
if (direction === 'down') {
$(this).removeClass('active');
}
else {
$(this).addClass('active');
}
},
offset: '300'
});
});
Where things get hairy is based on that 'active' state I'm trying to manipulate a different part of the dom. I'm trying to use a jquery hasClass function to add a new class. Unfortunately it doesn't seem to be picking up on the fact that the waypoints effected div has the 'active' class.
Here's my code for the hasClass:
$(function(){
if ($('.steve > .bio-container').hasClass('active')) {
$('#left-name').addClass('active');
}
});
I don't know if the hasClass function is out of scope or if there's something else going on here. I'm really new to javascript so I'm really at a loss. I appreciate any help I can get!
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 was wondering how could we do this... Got nothing on my mind...
So my question Title might be confusing so here's full question.
How can we run our animation but skip animation of one class that contain .current...
This is menu animation so I don't want to animate current class as there's no point.
I was able to stop it by adding another class in CSS and using !important for height.
This way it looks like there's no animation but if I inspect elements, of course there is...
JS Code:
$("#topMenu li").mouseover(function(){
$(this).find('span').stop().animate({ height:'45px' }, { queue:false, duration:600, easing: 'easeOutBounce' });
});
$("#topMenu li").mouseout(function(){
$(this).find('span').stop().animate({ height:'0px' }, { queue:false, duration:600, easing: 'easeOutBounce' });
});
var currentPage = $('#topMenu span').hasClass('current');
if(currentPage === true) {
$('span.current').css('display', 'block');
}
So I am able to do this to look like there's no animation... But can we do it somehow so there's really no animation for the element that contain .current class in it ?
$(this).find('span:not(.current)').stop().animate...
You could add :not in the selector:
$('#topMenu li:not(.current)').mouseover(...)
If the class is being added dynamically after the event handlers have been added, move the check to be inside the handler:
$('#topMenu li').mouseover(function () {
if ($(this).hasClass('current')) return;
// etc
});
I've been working to find a solution for a jQuery problem.
I have a parent container with 2 divs and a link in each. If a link is clicked in one of the divs, a class is added to the parent container (to change the background). If the other link is clicked, I wanted to check if a class has already been added from the other link's click and be removed.
What's going on: When I click the first link, the class inside-office is added. Then I click the second link and it will add that without removing the first link.
Here's the code I have so far with no success:
$("a.in-office").click(function() {
if($('#fullwrap').hasClass('outside-office')) {
$(this).removeClass('outside-office');
}
$('#top_barwrap').parent().addClass('inside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
$("a.out-office").click(function() {
if($('#fullwrap').hasClass('inside-office')) {
$(this).removeClass('inside-office');
}
$('#top_barwrap').parent().addClass('outside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
Change the $(this) to $('#fullwrap') as you are checking the class on element with id "fullwrap".
This is what you need.
Explanation: Your $(this) is never referring to $('#fullwrap') which it should. Your $(this) is actually referring to either $('a.in-office') or $('a.out-office').
CORRECT CODE:
$("a.in-office").click(function() {
var $this = $('#fullwrap');
if($this.hasClass('outside-office')) {
$this.removeClass('outside-office');
}
$('#top_barwrap').parent().addClass('inside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
$("a.out-office").click(function() {
var $this = $('#fullwrap');
if($this.hasClass('inside-office')) {
$this.removeClass('inside-office');
}
$('#top_barwrap').parent().addClass('outside-office');
$('.blockcase').fadeIn();
$('.lead-title, .subtitle').fadeOut();
$('#top_barwrap').animate( { height:'150px' }, { queue:false, duration: 500 });
});
Use toggleClass. It will remove the class if it exists, else add it.
$(this).toggleClass('outside-office');
If one of the class is already present, you can switch between the two classes using
$(this).toggleClass('outside-office inside-office');
I'm trying to create a grid that uses the following code to randomly apply an active "highlight" class to one of the child li elements
//add class "highlight" to random panel
var elements = $('ul#sliding_panels li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
Basically, the li element with the .highlight class will be 2x the size of the other panels.
The tricky part is that I'm looking to remove this .highlight class and attach it to a new li element when it is highlighted.
I thought this code would do the trick but it's not returning anything when I hover .highlight (or doing anything else for that matter!)
EDIT: I've added the code to jsfiddle.net for people to see it live: http://jsfiddle.net/dxzqv/2/
<script>
//add class "highlight" to random panel
$(document).ready(function(){
var elements = $('ul#sliding_grid li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
$(".highlight").hover(
function(){$(this).animate({width: 400px, height:400px}, 1000);},
function(){$(this).animate({width: 200px, height:200px}, 1000);}
);
});
</script>
http://jsfiddle.net/dxzqv/3/
How's that?
Not sure if that is the effect you were going for, stuff is happening.
Going to fork and tweak some more.
//add class "highlight" to random panel
$(document).ready(function(){
var elements = $('ul#sliding_grid li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
//$(this).removeClass('highlight');
});
$(".highlight").live("hover", function(){
$(this).animate({"width": "400px", "height":"400px"}, 1000);
});
$(".highlight").live("mouseout", function(){
$(this).animate({"width": "200px", "height":"200px"}, 1000, function(){
$(this).removeClass('highlight');
});
});
});