jQuery animate() complete callback not calling - javascript

I have got the following code:
if ($newCardLoader != null) {
$cardsContainer.animate({
maxHeight: futureHeight + "px"
}, 500, "ease", function() {
$cardsContainer.classList.remove("clamp-height-large");
$cardsContainer.classList.add("clamp-height-fit");
console.log("done");
});
}
The log and the style changes just don't happen.
I have seen several posts on this topic and followed all of them.
To me, it seems correct. Hope somebody can help be out!

Consider the following.
if ($newCardLoader != null) {
$cardsContainer.animate({
maxHeight: futureHeight + "px"
}, 500, "ease", function() {
$cardsContainer.toggleClass("clamp-height-large clamp-height-fit");
console.log("done");
});
}
See more: https://api.jquery.com/toggleclass/

#imvain2 and #Rory McCrossan suggestions are correct.
$cardsContainer needs to be a jQuery object i.e.
$("#some-id")
Mine was wrongfully vanilla e.g.
$("#some-id")[0]
This mistake does not throw errors and the animation works anyway.
Only the callback does not work. This makes it hard to spot to thank you!

Related

Firefox/IE jQuery is(":hover") not working

http://jsfiddle.net/h8rxa3pj/2/
$("#open_link").hover(function() {
$("#menu").removeClass("hidden");
},function() {
if ($("#menu").is(":hover")) {
$("#menu").mouseleave(function() {
$("#menu").addClass("hidden");
});
}
else {
$("#menu").addClass("hidden");
};
});
I have looked at the other questions on this and tried pretty much every solution except the ones I couldn't understand.
How do I check if the mouse is over an element in jQuery?
I feel like Arthur's answer could help but I'm really new to jQuery/JS and I don't know how to apply it here. Help appreciated
$("#open_link, #menu").hover(function() {
$("#menu").removeClass("hidden");
});
$("#open_link, #menu").mouseleave(function() {
$("#menu").addClass("hidden");
});

How do I turn this JavaScript into a plugin?

I have looked through the old answers, and found one that seems to be what I want to do HERE. Although I don't fully understand and not sure what is wrong and what I should be doing in the next step. FIDDLE
Thanks in advance
//Put inside HTML
$(function () {
$('#s_table').setups({
//please name table ID as "s_table"
"scrollY_h":"200px",
"s_empty":"search not found",
});
});
//xxx.js
(function (a) {
a.fn.s_table= function (setups) {
var scrollY = "",
s_empty = "";}
{
my function here?
}
})(JQuery);
Here is a good tutorial on how to create a JQuery plugin:
http://learn.jquery.com/plugins/basic-plugin-creation/

How to toggle function with jquery waypoint

I want to toggle functions using the jQuery waypoint function, how can I combine these pieces of code to make that happen? (I would be happy with alternative solutions too).
I want to combine this.....
$('#pageborder').waypoint(function(direction) {
//do something here
}, { offset: 'bottom-in-view' });
With this......
.toggle(function(){
$('.play', this).removeClass('pausing');
$('.play', this).addClass('playing');
}, function(){
$('.play', this).addClass('pausing');
$('.play', this).removeClass('playing');
});
The end result should be functions getting toggled when the way point is reached.
More info on the JQuery Waypoint plugin here: http://imakewebthings.com/jquery-waypoints/#doc-waypoint
Here is an example of using the waypoint plugin to do something when the waypoint is reached. In my example I am showing and hiding something based on if the user is scrolling up or down:
Demo: http://jsfiddle.net/lucuma/pTjta/
$(document).ready(function () {
$('.container div:eq(1)').waypoint(function (direction) {
if (direction == 'down') $('.toggleme').show();
else {
$('.toggleme').hide();
}
}, {
offset: $.waypoints('viewportHeight') / 2
});
});
E.B.D., I see you have something working.
If you wanted a slightly more concise toggle action, then you might consider the following :
var $next_btn_containers = $('.next_btn_container, .next_btn_container_static');
$('#pageborder').waypoint(function(dir) {
$next_btn_containers
.toggleClass('next_btn_container_static', dir == 'down')
.toggleClass('next_btn_container', dir == 'up');
}, { offset: 'bottom-in-view' });
By pre-selecting and remembering all members of both classes, execution will be faster - particularly in a large DOM.
The original selector may well simplify, depending on how the elements are initialized.
With a little more thought (and appropriate adjustment of style-sheet directives), then you may be able to simplify things even further by toggling a single "static" class :
var $next_btn_containers = $('.next_btn_container');
$('#pageborder').waypoint(function(dir) {
$next_btn_containers.toggleClass('static', dir == 'down')
}, { offset: 'bottom-in-view' });
.next_btn_container would thus remain a reliable selector (for other purposes), regardless of the statc/non-static state of the element(s).
Note: Unlike the first version (and your own code), this will not handle two sets of elements toggling in anti-phase, if that's what you have.
I used this code to make it work, thanks to lucuma for pointing me in the right direction!
$('#pageborder').waypoint(function(direction) {
if (direction == 'down') $('.next_btn_container').removeClass('next_btn_container').addClass('next_btn_container_static');
else {
$('.next_btn_container_static').removeClass('next_btn_container_static').addClass('next_btn_container');
}
}, { offset: 'bottom-in-view' });

jquery problem #.#

$('#save').click(
function(){
alert('run');
update_form('get_form','main_content',true);
}
);
hi,i got a problem in my program..... please help me T.T.
above function is not run. i think the clue should be here.
$.ajax({
......
$('#' + divtoupdate).html("<input type='submit' id='save' name='save' value='Save'/>");
})
all ajax part is ok, i think is because dom problem?,
the click() is created before i run the ajax.(i have the action before i got the input) is this causing click function malfunction. any solution for this problem ^^ thx
You should use jQuery live
Yes..for the click function on 'save' button to work...it should be present when page is loaded...try running click after ajax function..it should work fine then..
Even Live function will work --- It will take care of element even if it is added in future.
$('#Save').live('click',function(){
//ur code here
});
But Live will not work on older browsers.
You need to use $.live to workout event handling on elements added dynamically.
$('#save').live('click', function(){ ... });
I think what you are trying to say is that the first bit of code won't work because the second bit of code hasn't run yet. This second bit of code adds the HTML which the first bit works upon.
In which case, try the live() function instead of click()
You need to add the click handler after the object is created. You could just add your existing handler code to the ajax success, after the line where you create the #save element.
Yeap, try putting your $('#save').click inside your ajax callback function.
$.ajax({
......
$('#' + divtoupdate).html("<input type='submit' id='save' name='save' value='Save'/>");
$('#save').click(
function(){
alert('run');
update_form('get_form','main_content',true);
}
);
})
try out this...add the function after you add the actual element...
$.ajax({
......
$('#' + divtoupdate).html("<input type='submit' id='save' name='save' value='Save'/>");
$('#save').click(
function(){
alert('run');
update_form('get_form','main_content',true);
}
);
})
$(document).ready(function() {
var waterVolume
function initialFill(){
waterVolume = Math.floor(Math.random() * (150000 - 50000 + 1)) + 50000
initialWidth = $('.resizable_tank').width()
initialHeight = $('.resizable_tank').height()
stabilizeWaterPipe(initialWidth,initialHeight)
}
function stabilizeWaterPipe(currentWidth,currentHeight) {
stableHeight = $('.resizable_tank_pipe').offset().top + $('.resizable_tank_pipe').height() + 8
$('.stable_tank_pipe').css({height: (stableHeight-400)+"px", bottom: "-"+(stableHeight-400)+"px"})
stabilizeCalc(currentWidth,currentHeight)
}
function stabilizeCalc(currentWidth,currentHeight) {
stableTankWidth = $('.stable_tank').width()
stableTankHeight = $('.stable_tank').height()
increasedHeight = parseFloat(currentHeight - stableTankHeight)
// im getting problem here with filling and make equal levels of water in both the cylinders would u pls help me with some code .
}
$('.resizable_tank').resizable({
handles: 'e,s,se',
maxWidth: 800,
minWidth: 180,
minHeight: 400,
resize: function(event, ui) {
var currentWidth = ui.size.width;
var currentHeight = ui.size.height;
stabilizeWaterPipe(currentWidth,currentHeight)
}
})
initialFill()
});

jQuery tipsy: manual triggers and delayIn

I'm using the tipsy plugin for jQuery. Whenever I try to call tipsy with both a manual trigger and delayIn, the delayIn doesn't seem to work:
$('.interest').tipsy({trigger:'manual', gravity: 'n', html: true, delayIn: 3000});
Any ideas as to why?
The short answer is that once you turn on trigger:'manual', tipsy doesn't take care of delayIn any more. Your best bet might be to just have your manual trigger (wherever you do ...tipsy('show')) do a delay instead:
setTimeout("\$('#link').tipsy('show');",3000);
You could also look at the tipsy source to see that they have a slightly more elegant version that you could work from:
function enter() {
var tipsy = get(this);
tipsy.hoverState = 'in';
if (options.delayIn == 0) {
tipsy.show();
} else {
setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
}
}

Categories