jQuery animate doesn't complete (slideUp/slideDown) - javascript

I have a web interface to a system which has a left navigation. On the navigation, I can expand/collapse some menus. I use jQuery slideUp/slideDown to animate them like this:
if (enable)
{
navbar_slide_down = true;
$j(l1_folder).slideDown("normal", function() {
navbar_slide_down = false;
on_navbar_animation_complete();
});
}
else
{
navbar_slide_up = true;
$j(l1_folder).slideUp("normal", function() {
navbar_slide_up = false;
on_navbar_animation_complete();
});
}
Both animations run simultaneously to provide an accordion-like effect. This works in nearly all cases.
The problem I'm encountering now is that after performing some actions in a content frame (not the same frame as the navigation), the slideDown and slideUp functions no longer work. The animations start, but stop nearly immediately, and the callback is never fired. This causes the menu to lockup. I can only reproduce this issue in FireFox 3.5.7 (other versions seem OK). If I turn on Firebug, the problem doesn't occur.
I've tried upgrading from jQuery 1.3.2 to 1.4.1, no luck.
Is there any reason the animations would fail and not call the callback? How can I debug this with an unminified jQuery?

The problem was sequence dependent (ie: click on this, and then that, and the hang will occur). I found the problem in the first page:
addEvent(window, 'unload', end_page);
And changed it to:
addEvent(window, 'onbeforeunload', end_page);
I'm still not sure why this would effect the outer frame (and cause jQuery animations to break), but my best guess is that code in the unload handler was running on the second page and conflicting somewhere.

Related

Scroll event won't fire what so ever

I have a (fairly simple) issue and I'm breaking my head over it.
The issue is pretty simple - scroll event won't fire (ever).
I'm writing this angular project, so I've tried the following:
angular.element($window).bind('scroll', ()=> {
console.log('scroll!');
if (!scope.scrollPosition) {
scope.scrollPosition = 0;
}
// Alerting for test cause wtf is going on
scope.boolChangeClass = this.pageYOffset > 600 ? alert(true) : alert(false);
scope.scrollPosition = this.pageYOffset;
scope.$apply();
}
);
but nothing happened. (assume $window is intact and that i'm using webpack etc.)
This example works great if I change the scroll to click. weird.
So I've tried vanilla~~!
window.addEventListener('scroll',function(){
console.log('test')
})
This attempt works on every other website except mine (gotta admit it's classic).
So - has anyone ever dealt with this and knows what's going on?
I assume that some other element is consuming this event at early stage thus not letting it bubble up. Yet this is just an assumption.'
Would love to understand this :)
=== EDIT ===
I've tried to see all the fired events using monitorEvents(window) (using Chrome) and I see every event that's being fire except the scroll..
Looks like it's the body element that is scrolling. Try adding the following code in the console.
document.body.addEventListener('scroll', function() {
console.log('test');
});

dont know why touch events triggered twice

I'm using Jquery Mobile, and my touch events are being triggered twice. At first I thought it might be an overlap between mouse events and touch events, but I tried to unbind mouse events on tablets/smartphones and the events are still being triggered twice.
Here is my code
//Tablet Features
var eventType = {
swipeleft: '-=100',
swiperight: '+=100'
}
$('#navMenu').bind('swipeleft swiperight',
function(e) {
$('#prbBtnHolder').animate({left:eventType[e.type]});
//alert(e.type);
}
);
//Device Detection
(function () {
var agent = navigator.userAgent.toLowerCase();
var isDevice = agent.match(/android/i);
if (isDevice == 'android') {
//alert(isDevice);
$('*').unbind('mousedown').unbind('mouseout').unbind('mousemove').unbind('mouseup');
}
})();
I've been trying to figure this out for a while, please help if you have any ideas.
UPDATE
I managed to solve the problem locally by placing the touch handlers outside the .ready() method. However, when i run the page on the server, the double trigger happens again. Now I'm completely stumped. Why are two identical pages (literally identical) behaving differently locally and on the server?
I had the same problem and fixed it with a little tweak around... I don't recommend this for the exact solution but my take you out of the problem fast.
I define a global Flag
var bDidPan=true;
and inside the trigger wrote the following:
if (bDidPan) {
bDidPan = false; // IT'S IMPORTANT TO PUT THIS FIRST
//code to execute when triggers
}
else
{
bDidPan = true;
}
and that did the trick. You can do the trick with numbers (It worked better with numbers for me!)
Hope it helps!
This sounds like you're putting your scripts into the <body> tag. If you do that, they'll get run twice. I've had this very same thing happen and went a little balder for the trouble and frustration. Make sure all your scripts are inside the <head> tag.

How can I scroll to a page element in jQuery Mobile?

I have a long jQuery mobile page and would like to scroll to an element halfway down this page after the page loads.
So far I've tried a few things, the most successful being:
jQuery(document).bind("mobileinit", function() {
var target;
// if there's an element with id 'current_user'
if ($("#current_user").length > 0) {
// find this element's offset position
target = $("#current_user").get(0).offsetTop;
// scroll the page to that position
return $.mobile.silentScroll(target);
}
});
This works but then the page position is reset when the DOM is fully loaded. Can anyone suggest a better approach?
Thanks
A bit late, but I think I have a reliable solution with no need for setTimeout(). After a quick look into the code, it seems that JQM 1.2.0 issues a silentScroll(0) on window.load for chromeless viewport on iOS. See jquery.mobile-1.2.0.js, line 9145:
// window load event
// hide iOS browser chrome on load
$window.load( $.mobile.silentScroll );
What happens is that this conflicts with applicative calls to silentScroll(). Called too early, the framework scrolls back to top. Called too late, the UI flashes.
The solution is to bind a one-shot handler to the 'silentscroll' event that calls window.scrollTo() directly (silentScroll() is little more than an asynchronous window.scrollTo() anyway). That way, we capture the first JQM-issued silentScroll(0) and scroll to our position immediately.
For example, here is the code I use for deep linking to named elements (be sure to disable ajax load on inbound links with data-ajax="false"). Known anchor names are #unread and #p<ID>. The header is fixed and uses the #header ID.
$(document).bind('pageshow',function(e) {
var $anchor;
console.log("location.hash="+location.hash);
if (location.hash == "#unread" || location.hash.substr(0,2) == "#p") {
// Use anchor name as ID for the element to scroll to.
$anchor = $(location.hash);
}
if ($anchor) {
// Get y pos of anchor element.
var pos = $anchor.offset().top;
// Our header is fixed so offset pos by height.
pos -= $('#header').outerHeight();
// Don't use silentScroll() as it interferes with the automatic
// silentScroll(0) call done by JQM on page load. Instead, register
// a one-shot 'silentscroll' handler that performs a plain
// window.scrollTo() afterward.
$(document).bind('silentscroll',function(e,data) {
$(this).unbind(e);
window.scrollTo(0, pos);
});
}
});
No more UI flashes, and it seems to work reliably.
The event you're looking for is "pageshow".
I was digging a lot this issue, also at jQuery mobile official forum.
Currently it seems that there is no solution (at least for me).
I tried different events (mobileinit, pageshow) and different functions (silentscroll, scrolltop) as suggested above, but, as a result, I always have page scrolled until all images and html is finished loading, when page is scrolled to top again!
Partial and not really efficient solution is using a timer as suggested in comment to sgliser's answer; unfortunately with a timeout is difficult to know when page will be fully loaded and if scroll happened before that, it will scroll back to top at the end of load, while if it happens too long after page has fully loaded, the user is already scrolling page manually, and further automated scroll will create confusion.
Additionally, would be useful to have silentscroll or other function to address a specific id or class and not plain pixels, because with different browsers, resolutions and devices it may give different and not correct positioning of the scroll.
Hope someone will find a smarter and more efficient solution than this.

jQuery selector :not(:animated)

We're trying to make sure our JavaScript menu, which loads content, doesn't get overrun with commands before the content in question loads and is unfurled via .show('blind', 500), because then the animations run many times over, and it doesn't look so great. So I've got about six selectors that look like this:
("#center_content:not(:animated)")
And it doesn't seem to be having any effect. Trying only :animated has the expected effect (it never works, because it doesn't start animated), and trying :not(div) also has this effect (because #center_content is a div). For some reason, :not(:animated) seems not to be changing the results, because even when I trigger the selector while the div in question is visibly animated, the code runs. I know I've had success with this sort of thing before, but the difference here eludes me.
$("#center_content:not(:animated)").hide("blind", 500, function () {
var selector_str = 'button[value="' + url + '"]';
//alert(selector_str);
var button = $(selector_str);
//inspectProperties(button);
$("#center_content:not(:animated)").load(url, CenterContentCallback);
if (button) {
$("#navigation .active").removeClass("active");
button.addClass("active");
LoadSubNav(button);
}
});
I hope this provides sufficient context. I feel like the second selector is overkill (since it would only be run if the first selector succeeded), but I don't see how that would cause it to behave in this way.
Here's the snippet that seemed to be working in the other context:
function clearMenus(callback) {
$('[id$="_wrapper"]:visible:not(:animated)').hide("blind", 500, function() {
$('[id^="edit_"]:visible:not(:animated)').hide("slide", 200, function() {
callback();
});
});
}
Here, the animations queue instead of interrupt each other, but it occurs to me that the selector still doesn't seem to be working - the animations and associated loading events shouldn't be running at all, because the selectors should fail. While the queueing is nice behavior for animations to display, it made me realize that I seem to have never gotten this selector to work. Am I missing something?
Sometimes it's helpful to use .stop() and stop the current animation before you start the new animation.
$("#center_content").stop().hide("blind", 500, function () {});
Really depends on how it behaves within your environment. Remember that .stop() will stop the animation as it was (eg. halfway through hiding or fading)
I don't know if I understand it correctly, but if you want to make sure the user doesn't trigger the menu animation again while it's currently animating(causing it to queue animations and look retarded, this works and should help. I use an if-statement. And before any mouseover/off animation I add .stop(false, true).
$('whatever').click(function(){
//if center_content is not currently animated, do this:
if ($("#center_content").not(":animated")) {
$(this).hide(etc. etc. etc.)
}
//else if center_content IS currently animated, do nothing.
else {
return false;}
});
another example i found elsewhere:
if($("#someElement").is(":animated")) {
...
}
if($("#someElement:animated").length) {
...
}
// etc
then you can do:
$("#showBtn").attr("disabled", $("#someElement").is(":animated"));

How can I run a function anytime anything is animated with jQuery?

I have some jQuery animations in my code to slide divs up and down in response to some mouse clicks and other logic. This is all working just peachy, however in IE 6 some of the smaller icon images on the page don't slide along with the rest of the div for some strange reason. They kind of stay put then flicker into the new position and I've chalked this up to an IE6 'feature'.
Considering that I have to support IE6, I wanted to just hide the icons anytime an animation started, and show them again when the queue was empty.
I couldn't find a reference to any kind of events or hooks into the queue itself and I'd rather not add the hide code, then the show code to every animation as a callback.
Thanks if you can help-
b
Probable cause for IE6 goofiness: hasLayout. http://www.satzansatz.de/cssd/onhavinglayout.html
Try adding zoom: 1 to the css of the images.
You can do this with the livequery plugin like so:
$(':animated').livequery(function() {
// firing code here
}, function() {
// anything you want to run when all animation stops
});
This type of functionality is the only reason that the livequery plugin is still useful actually, since otherwise its functionality has been replaced by live() and delegate()
And since this only happens in IE6, it would be silly to hide them in all browsers, so in the firing function you can add a class with an IE6 hack like .hide4IE6 { _display:none; } to let them remain shown in other browsers.
Does it do the same in IE7? Is the div or icon relative positioned?

Categories

Resources