We Keep Coding

jQuery on() method not working when used to replace ready() method? [duplicate]

This question already has an answer here:
events load and ready not firing
(1 answer)
Closed 6 years ago.
I am attempting to use the on() method inside of a function in order to replace the ready() method so I can use more than one event to trigger a function. Here is the general function I am wanting to use it in:
function tableImgScale() {
$(function () {
var bandTableHeight = $('#banddetails').height() + "px";
$(document).ready(function () {
$('#banddetails td:nth-child(1)').css({"height": bandTableHeight, "overflow": "hidden"});
$('#banddetails td img').css({"display": "block", "width": "100%", "height": "100%", "objectFit": "cover"});
});
});
}
So, in simpler terms, I am trying to replace: $(document).ready(function () {...
with: $(document).on('ready resize', function () {...
But it will not work. However, the function with the instance of the .ready() method works perfectly fine. Any help would be appreciated.

You don't need the call to $(document).ready at all.
Inside your tableImgScale function, you write:
$(function () {
// stuff
});
...which is another way of waiting for the document to be ready before calling a function. Thus, your inner call to $(document).ready is unnecessary. However, if you want your CSS adjustments to happen when the document is ready as well as on resize, I would extract that logic into its own function so that you can call it immediately, as well as setting it as a listener for resize.
function tableImgScale() {
$(function() {
function adjustBandDetails() {
$('#banddetails td:nth-child(1)').css({
"height": bandTableHeight,
"overflow": "hidden"
});
$('#banddetails td img').css({
"display": "block",
"width": "100%",
"height": "100%",
"objectFit": "cover"
});
}
var bandTableHeight = $('#banddetails').height() + "px"
adjustBandDetails()
$(document).on('resize', adjustBandDetails)
});
}

Jquery mouseleave setTimeout don't work [duplicate]

This question already has answers here:
.css() won't get applied after a delay
(5 answers)
Closed 6 years ago.
I have the following code in jQuery:
$( ".name" )
.on( "mouseenter", function() {
$(this).find("ul").css({"font-size": "20px",
'color': "red"});
})
.on( "mouseleave", function() {
setTimeout(function () {
$(this).find("ul").css({"font-size": "12px",
'color': "blue"});
}, 5000);
});
The first part is working, but the second part is broken.
Why is the setTimeout on mouseleave not working?

This is a scoping problem. $(this) inside the setTimeout doesn't refer to $('.name'). You can fix this by setting a variable for this at the correct level and referring to that.
.on("mouseleave", function() {
var self = $(this);
setTimeout(function() {
self.find("ul").css({
"font-size": "12px",
'color': "blue"
});
}, 5000);
});

Instead of $(this), try passing in event as an argument and using $(event.target)

setInterval only executing once inside of the jQuery each function [duplicate]

This question already has answers here:
Why does Jquery only affect the first div element? [duplicate]
(4 answers)
Closed 7 years ago.
I have 3 span elements with the id of "cursor", but the below function executes only for the first element.
$(document).ready(function() {
$("#cursor").each(function(i, current) {
console.log("ran");
var $current = $(current);
setInterval(function() {
cursorAnimation($current)
}, 600);
});
});
function cursorAnimation($obj) {
$obj.animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}

The ID selector will return only 0 or 1 DOM elements according to the JQuery documentation. You should not assign an ID to more than one element. Change the ID to a class and use the class selector $(".class")

What is the most efficient way to do this process in jQuery? [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
This works flawlessly, but somehow I think there are easier and quicker ways to do this. I'm unsure, and I'm looking for suggestions. Here's the code:
/* create a hover event and a click event */
// set the status of whether the box is open or closed
var status = 0;
// remove the css hover state (fall back hover)
$("#testApp").off("hover");
// add a jQuery mouseover and mouseout event
$("#testApp").on("mouseover", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)"
});
});
$("#testApp").on("mouseout", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg.svg)"
});
});
// create a click event
$("#testApp").on("click", function() {
if(status == 0) {
// remove the mouseover and mouseout event when the div opens
$("#testApp").off("mouseover");
$("#testApp").off("mouseout");
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)",
"height":"200px",
"background-color":"#ccc"
});
return status = 1;
}else{
// add the mouseover and mouseout event when the div closes
$("#testApp").on("mouseover", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)"
});
});
$("#testApp").on("mouseout", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg.svg)"
});
});
$("#testApp div").css({
"height":"50px",
"background-color":"transparent"
});
return status = 0;
}
});
So basically it creates a hover state and a click toggle. Is there a more efficient way to do this?

1 jQuery Object to rule them all
Since you use $("#testApp"); at the top of the function you could set it as a variable
var testAppEl = $("#testApp")
Then use that instead of creating a new jQuery object everytime
Use hover
You could put this block:
// add a jQuery mouseover and mouseout event
$("#testApp").on("mouseover", function() {
$("#testApp").on("mouseout", function() {
Into a .hover():
testAppEl.hover(function() {
$(this).css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)"
});
}, function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg.svg)"
});
});
Combine off()
These two right here can be mixed
// Old
$("#testApp").off("mouseover");
$("#testApp").off("mouseout");
// New
testAppEl.off("mouseover mouseout");
Use CSS in a better way
As Drew suggested, add classes in a CSS file instead of dynamic, hard to track CSS through jQuery i.e.:
.someCSS {
background-image: url(./images/svg/menucorner-bg-lit.svg);
height: 200px;
background-color:#ccc;
}
Then in your jQuery use
testAppEl.addClass("someCSS");
Strict Type/Value Comparison
Also, for your first if block, you should really be using the strict comparison operator:
if (status === 0) {

You can fusion your two mouseover mouseout handlers into one:
$("#testApp").on("mouseover mouseout", function(e) {
img = e.type == 'mouseover' ? 'menucorner-bg-lit.svg' : 'menucorner-bg.svg';
$('div', this).css({
"background-image":"url(./images/svg/"+img+")"
});
});

And lastly chain and refactor
function addHover(){
// add the mouseover and mouseout event when the div closes
$("#testApp").on("mouseover", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)"
});
})
.on("mouseout", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg.svg)"
});
});
}
/* create a hover event and a click event */
// set the status of whether the box is open or closed
var status = 0;
// remove the css hover state (fall back hover)
$("#testApp").off("hover")
// create a click event
.on("click", function() {
if(status == 0) {
// remove the mouseover and mouseout event when the div opens
$("#testApp").off("mouseover");
$("#testApp").off("mouseout");
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)",
"height":"200px",
"background-color":"#ccc"
});
return status = 1;
}else{
addHover();
$("#testApp div").css({
"height":"50px",
"background-color":"transparent"
});
return status = 0;
}
});

The only thing I can suggest is to declare differenct css classes and instead of changing the CSS by calling $.css() use toggleClass or addClass / removeClass

Instead of adding and removing event handlers, you can attach .data() to the element to enable and disable the hover events.
// add a jQuery mouseover and mouseout event
$("#testApp").on("mouseover", function() {
if (!$(this).data("disabled")) {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)"
});
}
}).on("mouseout", function() {
if (!$(this).data("disabled")) {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg.svg)"
});
}
}).on("click", function() {
if (!$(this).data("disabled")) {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)",
"height":"200px",
"background-color":"#ccc"
});
$(this).data("disabled", true);
} else {
$("#testApp div").css({
"height":"50px",
"background-color":"transparent"
});
$(this).data("disabled", false);
}
});
And as others have said, using .addClass() and .removeClass() instead of .css() will help to keep behaviour and appearance as separate concerns.

JavaScript error in IE8 [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
window.onload() is not firing with IE 8 in first shot
I am getting a error while running the code in JavaScript on line 20. The line 20 code is just here:
window.onload = setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000);

event handler should be a function,
window.onload = function() {setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000);};
as you using jquery, may be better to
$(window).load(
function() {
setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000)
}
);

I believe what you want is this
window.onload = function(){
setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000);
}

Well you are missing the function in the .onload:
window.onload = function(){ //<-------missing this
setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000);
};
Why not use the jquery version of .load():
$(window).load(function(){
setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000);
});