We Keep Coding

standard function works fine but if delegated - does not [duplicate]

This question already has an answer here:
How to delegate `hover()` function by using `on()` [duplicate]
(1 answer)
Closed 3 years ago.
this works fine:
$('.rollwrap').hover(function() {
$(this).find('.imgrollb').animate({'bottom' : 0});
}, function() {
$(this).find('.imgrollb').animate({'bottom' : '100%'});
}
);
if rollwrap and its content is added dinamically I need to delegate the function but this doesn't work:
$(document).on('hover', '.rollwrap', function(){
$(this).find('.imgrollb').animate({'bottom': 0});
}, function(){
$(this).find('.imgrollb').animate({'bottom': '100%'});
}
);
How to get the same funcionality with dinamic content?

The two functions passed to .hover are mouseenter and mouseleave handlers, so you can delegate with those events instead:
$(document).on('mouseenter', '.rollwrap', function(){
$(this).find('.imgrollb').animate({'bottom': 0});
});
$(document).on('mouseleave', '.rollwrap', function(){
$(this).find('.imgrollb').animate({'bottom': '100%'});
});

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 toggle alternative way?

Since toggle is deprecated I used this to toogle div:
$("#syndicates_showmore").on("click", function () {
if (!clicked) {
$('#syndicates').fadeTo('slow', 0.3, function () {
$(this).css(
{
'height': 'auto',
'overflow': 'none'
});
}).fadeTo('slow', 1);
setTimeout(function () {
$("#syndicates_showmore").text("Show less");
}, 500);
clicked = true;
}
else {
$('#syndicates').fadeTo('slow', 0.3, function () {
$(this).css(
{
'height': '290px',
'overflow': 'hidden'
});
}).fadeTo('slow', 1);
setTimeout(function () {
$("#syndicates_showmore").text("Show more");
}, 500);
clicked = false;
}
});
Is there any cleaner way to do this?

According to the jQuery 1.9 Upgrade Guide:
.toggle(function, function, ... ) removed
This is the "click an element to run the specified functions" signature of .toggle(). It should not be confused with the "change the visibility of an element" of .toggle() which is not deprecated. The former is being removed to reduce confusion and improve the potential for modularity in the library. The jQuery Migrate plugin can be used to restore the functionality.
In other words, you can still use .toggle like this:
var clicked = false;
$("#syndicates_showmore").on("click", function () {
clicked = !clicked;
var showText = "Show " + (clicked ? "more" : "less");
$('#syndicates').toggle(function () {
$("#syndicates_showmore").text(showText);
});
});

Taken from jQuery API
$("#clickme" ).click(function() {
$( "#book" ).toggle( "slow", function() {
// Animation complete.
});
});

The best alternative is to use .toggleClass():
$("#syndicates_showmore").on("click", function () {
$('#syndicates').toggleClass("newClass, 1000", "easeInOutBounce")
});
jQuery .toggleClass() API Documentation:
Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's
presence or the value of the switch argument.
If using with jQuery UI you can easily animate it with using different easing options.
Easings:
Easing functions specify the speed at which an animation progresses at
different points within the animation. jQuery UI provides several additional
easing functions, ranging from variations on the swing behavior to
customized effects such as bouncing.
Example online

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);
});

How can I add a delay to a change of .css state [duplicate]

This question already has answers here:
delaying jquery css changes
(4 answers)
Closed 8 years ago.
I have the following:
$(document)
.ajaxStart(function () {
$(this).css({ 'cursor': 'progress !important' })
})
.ajaxStop(function () {
$(this).css({ 'cursor': 'default !important' })
});
Is there a way that I can prolong the cursor progress state by 2 seconds. Right now it comes and goes too quick. In other words I would like to have the cursor change to "progress" for at least a couple of seconds.

Edit:
Try use window.setTimeout.
var timer = null;
$(document)
.ajaxStart(function () {
if (timer) {
clearTimeout(timer);
}
$(this).css({ 'cursor': 'progress !important' });
})
.ajaxStop(function () {
timer = setTimeout(function() {
$(this).css({ 'cursor': 'default !important' });
}, 2000);
});

Try like this
$(this).delay('1000').css({ 'cursor': 'progress !important' });

Try this
$.delay(1000, function(){
//Do anything after 1 second
});

You could use setTimeout ( http://www.w3schools.com/js/js_timing.asp );
setTimeout("javascript function",milliseconds);
Do what you want to to in "javascript function" replace milliseconds with how long you want to wait.