We Keep Coding

jQuery/Javascript add/remove this.class on click

<script>
$(".image-popup").on('click', function() {
$(this).find(".myModal").addClass("modal-active");
$(".modal-active").css("display", "block");
});
$(".close").on('click', function() {
$(".modal-active").css("display", "none");
var myVar = $(this).closest(".image-popup");
myVar.find(".myModal").removeClass("modal-active");
$(".modal-active").css("display","none");
});
</script>
I am attempting to have a modal appear and then disappear when I click the close button. The problem is that the removeClass() will not work and the "display", "none" will not override the first click function. Any Help?

My guess from your question and your comment above is that the event from your second handler is bubbling up to your first handler:
$(".image-popup").on('click', function() {
$(this).find(".myModal")
.addClass("modal-active")
.show();
});
$(".close").on('click', function(evt) {
evt.preventDefault();
$(this).closest(".image-popup")
.find(".myModal")
.removeClass("modal-active");
.hide();
});
Try to prevent the event from bubbling out of the .close handler by using evt.preventDefault();

You can fix it with this simple solution:
HTML
<div class="image-popup">
<div class="show-modal btn btn-success">Show Modal</div>
<div class="myModal">
<div class="close btn btn-success">Close</div>
<p>My Modal is active</p>
</div>
</div>
CSS
.modal-active .myModal{
display: block;
}
.myModal{
display:none;
}
.close{
color:red;
display:block;
}
JS
$(function(){
$('.show-modal').click(function(){
$(this).parent().addClass('modal-active');
});
$('.close').click(function(){
$(this).closest('.image-popup').removeClass('modal-active');
});
});
See this fiddle for more details https://jsfiddle.net/a3yze54w/1/

How to addClass() and removeClass() on button:focus by jquery

I have a problem with my code.
I would like to build a button menu where it will be focused when it clicks firstly and it will not when it is clicked the second time.
This is my code :
<style>
.mybutton:focus{
background-color:red;
}
</style>
<script>
$(document).ready(function() {
$("#menu-button").click(function(){
if($(this).is(":focus")){
$(this).removeClass("focus");
}
else
$(this).addclass("focus");
});
});
</script>
It doesn't work.
Thanks.

Instead of your if statement, use .toggleClass("focus")
$(document).ready(function() {
$("#menu-button").click(function(){
$(this).toggleClass("focus");
});
});

ul li selector doesn't work

I have an issue using jquery. I have a content that have to become visible when I click on ul li in navigation.
But I'm missing something, when I click, nothing happens. I am not sure why this happens. Please take a look at the provided fiddle near the bottom
Here is the code:
$(document).ready(function(){
$("ul.topnav > li.one").click(function() {
$('.content').hide(500).fadeOut(400);
if ($(this).next().is(':hidden') == true) {
$(this).next().show(400).fadeIn(500);
}
});
$('.content').hide();
});
<ul class="topnav">
<li class="one">test</li>
<li>second</li>
</ul>
<div class="content">Some content here</div>
Here is a fiddle http://jsfiddle.net/2pBge/

Here you go
http://jsfiddle.net/Mc92M/1/
$(document).ready(function(){
$("li.one").on("click", function() {
$('.content').fadeOut(400);
if ($('.content').is(':hidden')) {
$('.content').fadeIn(500);
}
});
$('.content').hide();
});
When you used .next() it is targeting the second li, not content div so nothing shows or hides. I also removed the .hide and .show as you already have fade in/out
If you really want to use the .next() then you would have to do
$(document).ready(function(){
$(".topnav").on("click", function(e) {
if( $(e.target).parent().is('li.one') ) {
$(this).next().toggle();
}
});
$('.content').hide();
});

First of all, your event isn't firing. Just set up a click listener for ul.topnav and delegate the event:
$("ul.topnav").on("click", "li.one", function() { ... });
Then, delete the rest of that nonsense and just use .toggle():
$('.content').toggle();
Working DEMO
$(document).ready(function(){
$("ul.topnav").on("click", "li.one", function() {
console.log('clicked!');
$('.content').toggle();
});
$('.content').hide();
});

How do I properly use the jQuery off() method to remove the mouseenter and mouseleave events off an element

I seem to be having some trouble removing some events from an element using the jQuery off() method. I want to remove the mouseenter and mouseleave events when I match a certain criteria.
Heres what I got.
jsfiddle: http://jsfiddle.net/GE7Wg/
On the above fiddle, Article 2 should NOT have a mouseenter/mouseleave event associated with it.
Thanks!
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="hidden" id="HiddenMediaID" value="450">
<article class="Article">
Article 1
<input type="hidden" class="LatestMediaID" value="200" />
</article>
<article class="Article">
Article 2
<input type="hidden" class="LatestMediaID" value="450" />
</article>
<article class="Article">
Article 3
<input type="hidden" class="LatestMediaID" value="700" />
</article>
</body>
</html>
jQuery
//Page loaded - jQuery Ready
$(document).ready(function () {
//User hovering over article. Change BG.
$(document).on('mouseenter', '.Article', function () {
$(this).css('background', '#F0F8FF');
}).on('mouseleave', '.Article', function () {
$(this).css('background', '#FFFFFF');
});
//Set active BG color if condition is met.
$('.LatestMediaID').each(function () {
var LatestMediaID = $(this).val();
//Disable mouseenter and mouseleave events on the matched Article.
if (LatestMediaID == $('#HiddenMediaID').val()) {
//Disable events.
$(document).off('mouseenter', $(this).parent());
$(document).off('mouseleave', $(this).parent());
//Change BG color to light blue.
$(this).parent().css('background', '#F0F8FF');
}
});
});
CSS
.Article {
width: 150px;
height: 35px;
line-height: 35px;
margin: 10px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
text-align: center;
}
​

Lets do some DOM manipulations and throw some conditions
//Page loaded - jQuery Ready
$(document).ready(function () {
//User hovering over article. Change BG.
$(document).on('mouseenter', '.Article', function () {
if( !( $(this).hasClass('donotSelect') ) )
$(this).css('background', '#F0F8FF');
else
$(document).off('mouseleave', $(this));
}).on('mouseleave', '.Article', function () {
if( !( $(this).hasClass('donotSelect') ) )
$(this).css('background', '#FFFFFF');
else
$(document).off('mouseenter', $(this));
});
//Set active BG color if condition is met.
$('.LatestMediaID').each(function () {
var LatestMediaID = $(this).val();
//Disable mouseenter and mouseleave events on the matched Article.
if (LatestMediaID == $('#HiddenMediaID').val()) {
$(this).parent().addClass("donotSelect");
//Change BG color to light blue.
$(this).parent().css('background', '#F0F8FF');
}
});
});
http://jsfiddle.net/GE7Wg/5/

Not sure what his causing the problem, but you could avoid adding the events in the first place by checking the value up front.
Maybe use something like:
$(function() {
var hidID = $("#HiddenMediaID").val();
$(".Article").each(function(){
var article = $(this);
if(article.find(".LatestMediaID").val() !== hidID)
{
article.on("mouseenter", function(){ article.css("background", "#F0F8FF") });
article.on("mouseleave", function(){ article.css("background", "#FFFFFF") });
}
});
});
​

There is a way to do it the way you want by adding another event on the selected article level http://api.jquery.com/event.stopPropagation/ from there, but thas is really ugly. Much cleaner to handle this via CSS http://jsfiddle.net/liho1eye/GE7Wg/4/
.selected, .hover { background-color:#F0F8FF;}​
Script:
$(document).on('mouseenter mouseleave', '.Article', function(e) {
$(this).toggleClass("hover", e.type == "mouseenter");
});

How do i fade one div out and fade one in with a click of one element? HTML

I want a paragraph of text to fade out, and another one to take its place when I click on an href in my code.
HTML
Espanol
<p class="english">This is an english paragraph</p>
<p class="spanish">Se es la espanol pargrafio</p>
CSS
.spanish {
display: none;
}
.english {
display: block;
}
Jquery
$("#switch").click(function(){
$("p.spanish").show();
$("p.english").hide();
})
Now all I want is one to disappear and another to appear in its place with one click, but this code is not working, please help!

You can use a callback within the hide() or, as in the example fadeOut() function:
$('#switch').click(
function(e){
e.preventDefault();
$('p.english').fadeOut(
function(){
$('p.spanish').fadeIn();
});
});
JS Fiddle demo.
Edited with a slightly improved version of the above:
$('#switch').click(
function(e){
e.preventDefault();
$('p.english, p.spanish').fadeToggle(400);
$(this).text(
function(){
if ($(this).text() == 'English'){
$(this).text('Espanol');
}
else if ($(this).text() == 'Espanol'){
$(this).text('English');
}
});
});
JS Fiddle demo.
References:
click().
fadeOut().
fadeIn().
fadeToggle().

HTML
Español
<a class="english">This is an english paragraph</p>
<p class="spanish hide">Se es la español pargrafio</p>
CSS
.hide {
display: none;
}
jQuery
$("#switch").click(function(){
$("p.spanish, p.english").toggleClass("hide");
$(this).text( $("p.spanish").is(":visible") ? "English" : "Español" );
});

Remove the extra quote on your markup after <a href="#" id="switch" and use something like this:
$("#switch").click(function() {
var toHide = $("p." + ($('p.english').css('display') == 'none' ? 'spanish' : 'english'));
$(toHide).fadeOut();
toHide.next().css("margin-top", -1 * toHide.height());
toHide.next().fadeIn(function() {
toHide.next().css("margin-top", "auto");
toHide.insertAfter(toHide.next());
});
return false;
});
See this demo.

I don't think it fixes the problem, but replace id="switch"" with id="switch"