We Keep Coding

jQuery fix click memorising

$(".fsb").on("click", function () {
if ($('.fsb').hasClass('fsbc')) {
$('#sfo p').fadeIn(500);
setTimeout(function () {
$('#sfo p').fadeOut(500);
}, 500);
} else {
$('#sfof p').fadeIn(500);
setTimeout(function () {
$('#sfof p').fadeOut(500);
}, 500);
}
});
After clicking many times on the button(fast), it will repeat hiding and unhiding that much times. I want to disable that but have no ideas.(sorry, I'm new to this).

jQuery allows to use .fadeIn() and .fadeOut() in chain without setTimeout().
To remove all queued animation place .stop(true) before them.
Inside the event handler, you can use $(this) to work on the clicked element.
$(document).ready(function() {
$(".fsb").on("click", function() {
if ($(this).hasClass('fsbc')) {
$('#sfo p').stop(true).fadeIn(500).fadeOut(500);
} else {
$('#sfof p').stop(true).fadeIn(500).fadeOut(500);
}
});
});
.hide-p p {
display: none;
}
<button class="fsb fsbc">Click SFO</button>
<button class="fsb">Click SFOF</button>
<div id="sfo" class="hide-p">
<p>SFO</p>
</div>
<div id="sfof" class="hide-p">
<p>SFOF</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Click not recognized on element with dynamically added class

I have the following javascript object:
TeamExpand = {
trigger: '.team-info h2.initial',
container: '.team-info',
closeTrigger: '.team-info h2.expanded',
init: function() {
jQuery(this.trigger).click(this.expandInfo.bind(this));
jQuery(this.closeTrigger).click(this.closeInfo.bind(this));
},
expandInfo: function(e) {
jQuery(e.currentTarget).closest('.team-info').css("height", "100%");
jQuery(e.currentTarget).removeClass("initial");
jQuery(e.currentTarget).addClass("expanded");
jQuery(this.socialSVG).attr("fill", "#ffc40c");
},
closeInfo: function(e) {
jQuery(e.currentTarget).closest('.team-info').css("height", "64px");
jQuery(e.currentTarget).removeClass("expanded");
jQuery(e.currentTarget).addClass("initial");
jQuery(this.socialSVG).attr("fill", "white");
}
}
My html is as follow:
<div class="team-info">
<h2 class="initial">Header</h2>
<h3>Job Title</h3>
<p>Bio</p>
</div><!--end team-info-->
The 'expandInfo' function is running just fine and changed the 'container' height to 100%; The 'initial' class is removed from the h2 and the 'expanded' class is added to the h2. But the click event on the 'closeTrigger' variable (the h2.expanded) element is not registering. What am I doing wrong?

I'd rewrite this a bit to make the event handlers simpler. Use one handler for all the h2 and just check the class. This way you avoid attaching detaching handlers.
TeamExpand = {
trigger: '.team-info h2',
container: '.team-info',
init: function() {
jQuery(this.trigger).click(this.doTriger.bind(this));
},
doTriger: function(e) {
var element = jQuery(e.currentTarget);
if (element.hasClass('initial')) {
this.expandInfo(element);
} else {
this.closeInfo(element);
}
},
expandInfo: function(element) {
element.closest('.team-info').css("height", "100%");
element.removeClass("initial");
element.addClass("expanded");
jQuery(this.socialSVG).attr("fill", "#ffc40c");
},
closeInfo: function(element) {
element.closest('.team-info').css("height", "64px");
element.removeClass("expanded");
element.addClass("initial");
jQuery(this.socialSVG).attr("fill", "white");
}
}

I think it's because you're applying the click event function to an element that doesn't actually exist (the h2 element doesn't yet have the .expanded class).
Try moving this line of code..
jQuery(this.closeTrigger).click(this.closeInfo.bind(this));
..to the end of your expandInfo function, and add this..
jQuery(this.closeTrigger).unbind('click');
..to your closeInfo function before this line..
jQuery(e.currentTarget).removeClass("expanded");
Hope this helps!
Full code..
TeamExpand = {
trigger: '.team-info h2.initial',
container: '.team-info',
closeTrigger: '.team-info h2.expanded',
init: function() {
jQuery(this.trigger).click(this.expandInfo.bind(this));
},
expandInfo: function(e) {
jQuery(e.currentTarget).closest('.team-info').css("height", "100%");
jQuery(e.currentTarget).removeClass("initial");
jQuery(this.trigger).unbind('click');
jQuery(e.currentTarget).addClass("expanded");
jQuery(this.socialSVG).attr("fill", "#ffc40c");
jQuery(this.closeTrigger).click(this.closeInfo.bind(this));
},
closeInfo: function(e) {
jQuery(e.currentTarget).closest('.team-info').css("height", "64px");
jQuery(this.closeTrigger).unbind('click');
jQuery(e.currentTarget).removeClass("expanded");
jQuery(e.currentTarget).addClass("initial");
jQuery(this.socialSVG).attr("fill", "white");
this.init();
}
}

jQuery mouseover functionality not working properly

On hover functionality is not moving perfect. This is my code and when a mouse is placed over Details* text then whole div color changed to black. But the functionality is not working fine. I want whenever mouse is placed over details text then it should call the hover function but right now its not working fine. Any recommendations?
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);

Try this :
script :
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hover');
}, function () {
$('#wrapper').removeClass('hover');
}
);
style :
.hover {
display : block;
background-color : black;
}
/* new css */
.hover #Image_Car { display: none; }
.hover #ctaBtn { display: none; }
.hover #Image_logo { display: none; }
.hover #headlineText { display: none; }
Fiddle : http://jsfiddle.net/U4EF8/7/

$("#searchput").hover(function() {
$('#wrapper').addClass("hover");
}, function() {
$('#wrapper').removeClass("hover");
});

Here is the Code :
$(document).ready(function(){
$( "#disclaimer" )
.mouseover(function() {
$('#wrapper').addClass('hovered');
})
.mouseout(function() {
$('#wrapper').removeClass('hovered');
});
});
and my html is :
<div id="wrapper"></div>
<div id="disclaimer" style="border:1px solid black;">
hello
</div>
Here is the working example : http://jsbin.com/heduqesu/2/edit , you can check in console that class is added and removed on mouse enter and mouse leave event . Hope this helps . Cheers!

did you already try this ?
$('#disclaimer').mouseenter(
function () {
$('#wrapper').addClass('hovered');
}
);
$('#disclaimer').mouseleave(
function () {
$('#wrapper').removeClass('hovered');
}
);
or with pure css
#disclaimer:hover {
//put any attribute on "hovered" class here
}
or maybe i don't understand your question enough.

How to 'toggle' click multiple elements on page in JQuery?

Lets say I have 10 with red color on my page, and they have same class which is called 'myspan'.
Here is what I want:
Click an element, and then the clicked one change its color to green.
what I did:
<script>
$(document).ready(function(){
$('.myspan').click(function(){
aaa = !aaa;
if(aaa){
$(this).css('color','green');
} else {
$(this).css('color','red');
}
});
})
</script>
This works! It almost achieve what I want. When I click one element, it changes to green successfully. But I have to click twice for another red element to make it green. I hope you guys know what I mean if you watch the code. Does anyone have any idea about how to solve the problem?

You can use .toggleClass() instead.Try this:
$(".myspan").click(function () {
$(this).toggleClass("red");
});
CSS:
.myspan{ color: green; }
.myspan.red{ color: red; }
Working Demo

You need to have a state for each span separately so instead of using a common variable you can use the .data() api like
$(document).ready(function () {
$('.myspan').click(function () {
var $this = $(this),
aaa = $this.data('aaa');
aaa = !aaa;
$this.css('color', function () {
return aaa ? 'green' : 'red';
})
$this.data('aaa', aaa);
});
})
Demo: Fiddle

I would not use any variable, as long as your script's function is going to say that simple. Better try it like this:
Javascript:
$(document).ready(function () {
$('.myspan').click(function () {
if ($(this).hasClass('color-red')) {
$(this).removeClass('color-red').addClass('color-green');
} else {
$(this).removeClass('color-green').addClass('color-red');
}
});
})
CSS:
.myspan {
}
.color-red {
color:red;
}
.color-green {
color:green;
}
Working Fiddle: http://jsfiddle.net/2729p/
This saves the need to use a state saving variable and makes it more modular.

Try below code
<script>
$(document).ready(function(){
$('.myspan').click(function(){
var colorVal = $(this).css('color');
if(colorVal === 'red'){
$(this).css('color','green');
} else {
$(this).css('color','red');
}
});
})
</script>

You would be better off using toggleClass
<span class="myspan">Test</span>
JQuery:
$('.myspan').click(function () {
$(this).toggleClass("green");
});
CSS:
.myspan{
color: red;
}
.green {
color: green
}
Example

changing class of li dynamically after hovering

Hi I was wondering if there was anyway to dynamically change the class of a list when you hover over it. Here is my code and fiddle. When I hover over the li I want it to change the class. and on mouseout I want it to change back to original.
$('.navi > li').on("mouseover", function () {
($(this)).removeClass('.navi').addClass('.navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});
http://jsfiddle.net/Samfr/8/

I think hover might be a little better for what you are doing.
http://api.jquery.com/hover/
Also, I'm not too clear on what you are asking but one of the examples on the above hover documentation page seems to describe something similar.
$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);

You had an extra period when adding and removing the class. Those should only be used to select the elements not change the class name.
$('.navi > li').on("mouseover", function () {
($(this)).removeClass('navi').addClass('navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});

try this:
define a new class, for example dinamic-li
$('.dinamic-li').on("mouseenter", function () {
$(this).addclass('navi');
$(this).removeclass('navi2');
});
$('.dinamic-li').on("mouseleave", function () {
$(this).addclass('navi2');
$(this).removeclass('navi');
});

Will this work?
JSFiddle
Jquery:
$('.navi > li').on("mouseover", function () {
$('.hover-name', this).show();
$(this).attr('class', 'red');
}).on("mouseout", function() {
$('.hover-name').hide();
$(this).attr('class', '');
});

there is my solution:
$('.navi > li').on("mouseover", function () {
$(this).addClass('active').siblings().removeClass(active);
$('.hover-name', this).show();
}).on("mouseout", function() {
if( $(this).hasClass('active'))
$(this).removeClass('active');
$('.hover-name').hide();
});
Working fiddle

Why not use a CSS solution, it's much easier:
.hover-name { display: none; }
.navi li:hover .hover-name { display: block; }
Check your updated Fiddle

http://jsfiddle.net/Samfr/14/
This is that what u mean...
$('.navi > li').on("mouseover", function () {
$(this).removeClass('navi').addClass('navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
$(this).removeClass('navi2').addClass('navi');
});
When you hover a link the color will be red and when you mouseout the color will reset.
That way you can see how the script works!