toggleClass() from jquery not working for a valid selection - javascript

My hide class does not accept the toggleClass:
function overFx (element, classN) {
if (!element.hasClass('ligado')){
if (!$.browser.webkit && !$.browser.opera){
//TR
element.toggleClass(classN);
} else {
//TD
element.children("td:not(.media)").toggleClass(classN);
}
}
}
//EFEITOS PARA DESTACAR LINHAS:
//MOUSE OVER:
$("tr.destacar:not(.hide)").mouseover(function (){
overFx($(this), "mouseoverTr");
}
);
$(".hide").mouseover(function (){
overFx($(this), "mouseoverTrHide");
}
);
//MOUSE OUT:
$("tr.destacar:not(.hide)").mouseout(function (){
overFx($(this), "mouseoverTr");
}
);
$(".hide").mouseover(function (){
overFx($(this), "mouseoverTrHide");
}
);
I'll post the Jsfiddle later.
The $("tr.destacar:not(.hide)") par is working perfectly, but the $(".hide") isn't , and it should be! they are there , I console.logged it , the $(this) returns exactly what I wanted.

You have a typo in your $(".hide").mouseout(...) method, you have .mouseover(...) instead.
To re-iterate, you have $(".hide").mouseover twice, where the second one should be a .mouseout instead.
Demo: http://jsfiddle.net/ducYE/

Related

Toggle inline CSS in jQuery

I want to toggle some inline CSS with a jQuery script, but I can't do it with a class, because I get the value of the padding-top dynamically, here is the function :
$('.button').click(function(){
$(this).toggleClass('active');
});
var tagsHeight = $('span').outerHeight();
$(".button").click(function (){
if ($(this).is('active')) {
$(".change").css('padding-top', '0');
}
else if ($(this).not('active')) {
$(".change").css('padding-top', tagsHeight);
}
});
An a example here : https://jsfiddle.net/o1pbwfuo/
I really don't get why this is not working correctly ...
Thanks !
The issue with your code is due to the incorrect selector in not(). That being said, you can improve your logic by combining the click() event handlers, then using a single ternary expression to set the padding-top on the required element based on the related class. Try this:
var tagsHeight = $('span').outerHeight();
$('.button').click(function() {
var active = $(this).toggleClass('active').hasClass('active');
$(".change").css('padding-top', !active ? '0' : tagsHeight);
});
Working example
You made a mistake while using .is and .not.
You need to address the class itself inclusive the dot at beginning.
$('.button').click(function(){
$(this).toggleClass('active');
});
var tagsHeight = $('span').outerHeight();
$(".button").click(function (){
if ($(this).is('.active')) {
$(".change").css('padding-top', '0');
}
else if ($(this).not('.active')) {
$(".change").css('padding-top', tagsHeight);
}
});
https://jsfiddle.net/06ek4fej/
By the way, the else-if request is nonsense.
If = true or if = false. Else If results the same as else.
$(".button").click(function (){
if ($(this).is('.active')) {
$(".change").css('padding-top', '0');
}
else {
$(".change").css('padding-top', tagsHeight);
}
});
On click you can check whether element has active class or not and there is no need to add two click methods on '.button'.
var tagsHeight = $('span').outerHeight();
$(".button").click(function (){
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$(".change").css('padding-top', '0');
}
else{
$(".change").css('padding-top', tagsHeight);
}
});
You can use Has class method for the check is active class exist or not.
$(".button").click(function (){
if ($(this).hasClass('active')) {
$(".change").css('padding-top', '0');
}
else{
$(".change").css('padding-top', tagsHeight);
}
});

Jquery .focus()-loop?

I am trying to apply a new Style to my Submit-Button if its focused.So if its focused, the Style changes, but i cant get rid of it.Means that i cant lose focus on my Button.The other Problem is, that when focused the button moves like 2-3pixel down.
$(document).ready(function(){
$(".login").hover(function() {
$(this).toggleClass("hoverbutton");
});
$(".login").focus(function(){
$(this).toggleClass("focusbutton");
return false;
});
});
Hope someone can help me out with this :)
try this
$(document).ready(function () {
$(".login").hover(function () {
$(this).toggleClass("hoverbutton");
}, function () {
$(this).toggleClass("Normalbutton");
});
});
OR
$(document).ready(function () {
$(".login").hover(function () {
$(this)
.removeClass("normalbtn")
.addClass("hover_btn");
}, function() {
$(this)
.removeClass("hover_btn")
.addClass("normalbtn");
});
});
Refer Here
According to the jQuery API (http://api.jquery.com/hover/), hover accepts two functions:
$( ".login" ).hover(
function() {
// This part is called on Mouse over
$( this ).addClass( "hoverbutton" );
}, function() {
// This part is called on Mouse out
$( this ).removeClass( "hoverbutton" );
}
);
$(".login").blur(function(){
$(this).removeClass("focusbutton");
return false;
});
Added this after .focus() and works fine for me
You are looking for wrong events,
Look at jQuery API: http://api.jquery.com/blur/

Triggering datepicker from function doesnt work

I use a pickadate.js plugin.
What i would like to do is to trigger a date container after checkbox is checked, but it somehow doesn't work. I assume it has to do something with out of the scope variables since it works just fine outside the checkbox event function.
Official documentation:
See here and also here
JS:
var pick = $('#chosen').pickadate({format:'dd.mm.yyyy'});
var picker = pick.pickadate('picker');
//picker.open();
// it works here
$(":checkbox").change(function() {
if(this.checked) {
picker.open();
// it doesnt work here
event.stopPropagation();
console.log('checkbox triggers!');
}
});
JSFIDDLE
Use .on() with click. (like (.on("event", fn)))
$(":checkbox").on('click', function () {
if (this.checked) {
picker.open();
event.stopPropagation();
}
});
Fiddle
I used trigger method and now I think it works as intended:
$( "input[type=checkbox]" ).on( "click", function(){
$(":checkbox").trigger("change");
} );
Fiddle

jquery foreach for checkbox

i have jquery for disable buttons
if check box checked then button enabled
document.getElementById('disabler').onchange = function() {
if ($(disabler).is( ":checked" ) ){
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css( 'cursor', 'pointer' );
} else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css( 'cursor', 'not-allowed' );
}
}
});
there is many checkbox but this code work only for first check box only !
Use this:
$(document).on("change", "<selector for disablers>", function() {
if (this.checked) {
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css('cursor', 'not-allowed');
}
});
<selector for disablers> should probably be a class (.disabler) rather than id, since you said you have many of them.
there is many checkbox but this code work only for first check box only !
IDs must be unique.. You should class instead.
Example of using class selector
$('.disabler').change(function () {
if ($(this).is(":checked")) {
$("#signin_submit").prop('disabled', false).css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true).css('cursor', 'not-allowed');
}
});
Try use only jQuery:
$('#disabler').change(function() {
if ($(this).is(":checked")) {
$("#signin_submit").prop('disabled', false).css('cursor', 'pointer');
} else {
$("#signin_submit").prop('disabled', true).css('cursor', 'not-allowed');
}
});
Try this:
$("#disabler").change(function(){
if ($("#disabler").is( ":checked" ) ){
$("#signin_submit").prop('disabled', false);
$("#signin_submit").css( 'cursor', 'pointer' );
}
else {
$("#signin_submit").prop('disabled', true);
$("#signin_submit").css( 'cursor', 'not-allowed' );
}
});
I agree, you are already using jQuery, so use it.
However, and in addition, you are calling the jQuery object far too many times. If you are parsing through to get the jQuery object more than once, then you should create local variables.
Second, you might consider using the power of closures for things like this:
function wireDisabler() {
// closures
var $cbxDisabler = $('#disabler');
var $btnSubmit = $("#signin_submit");
var fOnChange = function() {
var bChecked = $cbxDisabler.is(':checked');
$btnSubmit.prop('disabled', !bChecked)
.css('cursor', (bChecked ? 'pointer' : 'not-allowed'));
};
// handle event
$cbxDisabler.change(fOnChange);
}
if you have more than one disabler in you page, firstly you should use class attribute instead of ID, then easily do this:
$(document).on("change", ".disabler", function(){
//your stuff
});
ID attribute is used as a unique identifier.
check this working DEMO;

How can I check if the cursor is hovering on an element using JQuery

It possible to check if the cursor is hovering on an element.
Something like
$("#divId").is("hover");
NOTE: I just want to check not set event.
.is(':hover');
or
$('#divId:hover');
Updated answer!
$("#foo").hover(function() {
$(this).data("hovered", true);
}, function() {
$(this).data("hovered", false);
});
Testing if it is hovered...
if ( $("#foo").data("hovered") ) {
// it is hovered
} else {
// it's not hovered
}
You can use jQuery's hover(), mouseenter() or mouseover()
$("#divId").hover(function() { alert("hovering"; });
This will fire on mouseenter and mouseleave. You can add separate event handlers for each.
So if you want to do something like, if hovering over #divId increase x by one, and when you stop hovering decrease y by one:
$("#divId").hover(function() { ++x; },
function() { --y; });
If you really want an if hovering:
var hovering = 0;
$("#divId").hover(function() { hovering = 1; },
function() { hovering = 0; });
...
// Then inside somewhere useful. Maybe in a setInterval, or triggered by
// another action...
if (hovering) { ...
Try it out with this jsFiddle
For example:
$(function() {
var hovering = 0;
$("div").hover(function() { hovering = 1; },
function() { hovering = 0; });
$(document).keyup(function() {
if (hovering) alert("hovering!"); // This is the "if hovering"
else alert("not hovering.");
});
});
You can use .hover(). It's can be used like so:
$("selector").hover(
function (){
//mouse over
},
function (){
//mouse out
}
);
An example of it's use from the documentation is here:
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
Depending on what you are doing either mouseover() (http://api.jquery.com/mouseover/) or hover() (http://api.jquery.com/hover/) can be useful.

Categories

Resources