Develop Reference

Making a span unclickable temporarily

In a simon game, when the series is being shown to the user, I want the span(colored quadrants) to be unclickable. Currently I am employing this function which adds the pointer-events:none to the span when it is being animated.
function toggleUnclickable(){
//unclickable class has the css property pointer-events:none
$("#1").toggleClass("unclickable");
$("#2").toggleClass("unclickable");
$("#3").toggleClass("unclickable");
$("#4").toggleClass("unclickable");
}
I am calling this function before the animation starts and after the animation ends.
function animateGeneratedPattern() {
toggleUnclickable();
function animateNextPattern(lightup) {
.... // code for animation
}
animateNextPattern(true);
toggleUnclickable();
}
But I am still able to click when the spans are being animated?? Is there something wrong that I am doing ??

Try to use this in your elements to enable and disable the click:
$( "#myElement").unbind( "click" ); //disable click
$( "#myElement").bind( "click" ); //enable

onclick=animateNextPattern('your patameter', this) // pass the this keyword here
function animateNextPattern(lightup,ele) {
if(!$(ele).hasClass('unclickable'))
{
Please write your code here ----
}
}

you can probably use .off() and .on() methods provided by jQuery. whenever you want to unbind the event you can use .off() and then attach it via on()
$( "body" ).on( "click", "#theone", function(){} ) //To attach
$( "body" ).off("click","#theone",function(){}) //To remove
More reference can be read over here http://api.jquery.com/off/

You can return true & false to enable/disable click
function toggleclick(bol){
//unclickable class has the css property pointer-events:none
$("#1 ,#2,#3,#4").click(function(event) {
return bol;
});
}
function animateGeneratedPattern() {
toggleUnclickable(false);
function animateNextPattern(lightup) {
.... // code for animation
}
animateNextPattern(true);
toggleUnclickable(true);
}

jQuery Simple text change on image hover

I'm trying to create a script for changing text on image hover. This is the HTML in simple version:
<section id="#first">
<div class="img-1"></div>
<div class="img-2"></div>
</section>
<section id="#second">
<div class="text-1"></div>
<div class="text-2"></div>
</section>
Javascript
jQuery(document).ready(function($){
$('.img-1').hover(
function(){ $('.text-1').addClass('text-1-active') },
function(){ $('.img-1').addClass('img-1-active') },
function(){ $('.text-2').removeClass('text-2-active') },
function(){ $('.img-2').removeClass('img-2-active') }
)
$('.img-2').hover(
function(){ $('.text-2').addClass('text-2-active') },
function(){ $('.img-2').addClass('img-2-active') },
function(){ $('.img-1').removeClass('img-1-active') },
function(){ $('.text-1').removeClass('text-1-active') }
)
});
Can't change the HTML structure. The classes do get added but don't get removed.
FIDDLE

:) actually this is all you need: DEMO
$("#first [class^=img-]").hover(function() {
$('#second .text-'+ this.className.replace(/\D/g,'')).toggle();
});
If you want to toggle classes? Nothing simpler: DEMO
$("#first [class^=img-]").hover(function() {
$(this).toggleClass("wow");
$('#second .text-'+ this.className.replace(/\D/g,'')).toggleClass("wow");
});
To explain the above, you just need to find out the number of the hovered element and reference-by number the needed .text-N element.
Also this <section id="#first">, that #first is not the way to set an ID to an HTML element.
Use simply <section id="first">

You are attempting to pass four separate callback functions, rather than a single callback that executes all the necessary code.
Here is what you want:
jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active');
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
}
)
$('.img-2').hover(
function(){
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active');
$('.img-1').removeClass('img-1-active');
$('.text-1').removeClass('text-1-active');
}
)
});
http://jsfiddle.net/w4mLtec8/5/

first, you use the .hover function wrongly, it should only accept 2 arguments which is for mouseenter and mouseleave. You should be using it like this
$("selector").hover(
function(){
// mouseenter function
},
function(){
// mouseleave function
}
});
and second you don't need to use too long class name to to decide it's active or not, hence you can use it to diferentiate it like this text-1 active and text-2 active, so you can write it like this in jQuery
jQuery(document).ready(function($){
$('.img-1').hover(
function(){ $('.text-1').addClass('active') },
function(){ $('.text-1, .text-2').removeClass('active') }
)
$('.img-2').hover(
function(){ $('.text-2').addClass('active') },
function(){ $('.text-1, .text-2').removeClass('active') }
)
});
and CSS
.text-1,
.text-2{
display:none;
}
.text-1.active,
.text-2.active{
display:block;
}
here's the Updated Fiddle with the optimized way to use it.

I'm making an assumption of what you're looking for...but try this jQuery code:
jQuery(document).ready(function ($) {
$('.img-1').mouseover(function () {
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active')
}).mouseout(function () {
$('.text-1').removeClass('text-1-active');
$('.img-1').removeClass('img-1-active');
});
$('.img-2').mouseover(function () {
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active')
}).mouseout(function () {
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
});
});

You are handing the hover event a list of functions. Just send it one that does eveything.
I.E.
jQuery(document).ready(function($) {
$('.img-1').hover(
function() {
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active');
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
}
);
$('.img-2').hover(
function() {
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active');
$('.img-1').removeClass('img-1-active');
$('.text-1').removeClass('text-1-active');
}
);
});

Try this
jQuery(document).ready(function($){
$('.img-1').hover(function(){
$('.text-1').toggleClass('text-1-active');
$('.img-1').toggleClass('img-1-active');
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
});
$('.img-2').hover(function(){
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
$('.img-1').toggleClass('img-1-active');
$('.text-1').toggleClass('text-1-active');
});
});

jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').toggleClass('text-1-active');
$('.img-1').toggleClass('img-1-active');
}
)
$('.img-2').hover(
function(){
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
}
)
});
http://jsfiddle.net/w4mLtec8/10/

If I understand what's to be done, the approach itself used to solve the problem could be better. Basically, use CSS to your advantage. Here, I've reduced the number of times we call JQuery by taking a little time to set up the HTML and CSS.
Tag the corresponding text div with a number
Put the same number in a data attribute so the item to hover knows which text it's associated with
I believe the intent is to have one text hover active at a time, so we can simple remove all 'active'. Naturally, we'd one to restrict the selector here to only pull text hovers, but you get the idea.
//Javascript Code
$('.img').hover( function() {
var name = $(this).attr('data-name');
$('.text').removeClass('active');
$('.text[data-name="'+name+'"]').addClass('active');
});
http://jsfiddle.net/LkL9uo0k/1/

As far as I understand, you don't need classes to show and hide the text, use .show() and .hide() to take care of it, in the original js you're passing 4 functions to the hover event whereas only 2 are needed, one executes when the element is hovered and the second one when mouse exits the element causing hover event to stop.
Here's the modified js, take a look at the fiddle too -
jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').show();
$('.text-2').hide();
},
function(){
$('.text-1, .text-2').hide();
}
);
$('.img-2').hover(
function(){
$('.text-2').show();
$('.text-1').hide();
},
function(){
$('.text-1, .text-2').hide();
}
);
});
FIDDLE
I'm basically hiding both texts on exit, if you want one text block to always stay visible you can hide the other one in hover 'exit' function. Here's the fiddle for that -
http://jsfiddle.net/w4mLtec8/9/

click event not working when changing id or class

I'm starting with jquery, and have an issue here:
http://jsfiddle.net/8guzD/
$('#test.off').click(function(){
$(this).removeClass('off').addClass('on');
});
$('#test.on').click(function(){
$(this).removeClass('on').addClass('off');
alert('ok');
});
the first part of the code goes well, the class is apply, but when I attach an event in this element with its new class it won't work.
Can someone explain me what is the problem exactly?
I tried with javascript,
http://jsfiddle.net/R5NRz/
var element = document.getElementById('test');
element.addEventListener('click', function() {
this.id ='test2';
alert("ok");
}, false);
var element2 = document.getElementById('test2');
element2.addEventListener('click', function() {
alert("ok2");
}, false);
and it didn't really help me, having the same issue

try
$(document).on("click",'#test.on',function(){
$(this).removeClass('off').addClass('on');
alert('ok');
});
$(document).on("click",'#test.off',function(){
$(this).removeClass('off').addClass('on');
alert('ok passs');
});
Demo

In your jQuery example you are binding to DOM elements that exist at that time. That is why you see the first fire but not the second. It is not a match for your '#test.on' selector when the code is run. What you want to do instead is use delegation:
$('#test').on('click',function() {
var ele = $(this);
if (ele.hasClass('on')) {
ele.removeClass('on').addClass('off');
} else {
ele.removeClass('off').addClass('on');
}
});
This assumes that you are doing more than just toggling classes. If you want simply toggle classes then an easier solution is to pick one as the default and use the other as a flag. For example, .on is on but without .on it's off. Then you can just use toggle:
$('#test').on('click', function() {
$(this).toggleClass('on');
});

$("#test.on")
Doesn't bind to anything. Try this:
$('#test').click(function() {
if($(this)).hasClass('off') $(this).removeClass('off').addClass('on');
else $(this).removeClass('on').addClass('off');
});
You might consider using an 'active' class instead and just toggling that, instead of have two separate on/off classes. Then you can write:
$("#test").click(function() {
$(this).toggleClass('active');
});

Prevent element from animating based on previous class

$('.example').hover(
function () {
$(this).css('background','red');
},
function () {
$(this).css('background','yellow');
}
);
$('.test').click(function(){
$(this).css('marginTop','+=20px').removeClass('example');
}
);
<div class="text example"></div>
Although the class example was seemingly removed, the hover actions for it are still being applied to the element that once had that class. How can I prevent this?
http://jsfiddle.net/gSfc3/
Here it is in jsFiddle. As you can see, after executing the click function to remove the class, the background still changes on hover.

Event handlers are bound to a Node, so it doesn't matter if that Node doesn't own a specific className anymore. You would need to .unbind() those events manually, or better, use jQuerys .off() method.
So, if you can be sure that there aren't any other event handlers bound to that node, just call
$(this).css('marginTop','+=20px').removeClass('example').off();
This will remove any event handler from that Node. If you need to be specific, you can use jQuerys Event namespacing, like so
$('.example').on( 'mouseenter.myNamespace'
function () {
$(this).css('background','red');
}
).on('mouseleave.myNamespace'
function() {
$(this).css('background','yellow');
}
);
and use this call to only unbind any event that is within the namespace .myNamespace
$(this).css('marginTop','+=20px').removeClass('example').off('.myNamespace');

$('.example').unbind('mouseenter').unbind('mouseleave')
In your code, $('.example').hover attaches a mouseenter and mouseleave directly to each element.
-or-
A better solution might be to use delegation with on
$(document.body).on('mouseenter', '.example', function() { ... });
$(document.body).on('mouseleave', '.example', function() { ... });
Using that code, removing the example class will work as expected, because the handlers are based on css selector, while .hover attaches directly to the elements.

$('.example').live({
mouseenter:function () {
$(this).css('background','red');
},
mouseleave:function () {
$(this).css('background','yellow');
}
});
demo: http://jsfiddle.net/gSfc3/1/

Try this:
$('.test').hover(
function () {
$('.example').css('background','red');
},
function () {
$('.example').css('background','yellow');
}
);

how to capture change event in input with jquery?

$('input').change(function(){
alert($(this).val());
});
$('input').val(1);
This dont work. I need capture the change input with JavaScript :-s
Thanks.

Programmatic changes to <input> elements don't cause events. Only user interaction does.
You can do this however:
$('input').val(1).trigger('change');

You have to put those functions inside the "Ready" function. see the fiddle: http://jsfiddle.net/SfjJQ/1/
$(function() {
$('input').change(function() {
alert($(this).val());
});
$('input').val(1);
$('input').trigger('change');
});​
keep in mind that your:
$('input').val(1);
initializes the input to have a value of 1.
Of course you could also do this:
$(function() {
$('input')
.change(function() {
alert($(this).val());
})
.val(1)
.trigger('change');
});​

As others have mentioned, .val() does not trigger any events; however, you could add a wrapper function to jQuery that will change the value and trigger the event if wanted:
$( function () {
//-- new jQuery function
$.fn.changeVal = function () {
$.fn.val.apply( this, arguments );
$( this ).trigger( 'change' );
};
//-- your updated code
$('input').change(function(){
alert($(this).val());
});
$('input').changeVal(1);
} );​
http://jsfiddle.net/bA3V2/