So, I am using jQuery Mobile and I'd like to animate individual elements on a page change both before and after the change. I set transitions to "none" in jQuery moblie then try to add class to css3 animate individual elements. It works on pagechange, so when you go to a new page the transition on the elements appears, but pagebeforechange happens to quickly and the animation is lost. Is there a way to make the pagebeforechange function wait until the animation is done then go on to the next page? preventDefault(); stops the page from changing at all. I need like a call back or deferred obj or something? If I call changepage in pagebeforechange after the animation is done...the function runs recursively :(
transitions: function(){
$(document).bind( "pagebeforechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
$(document).bind( "pagechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
},
Thanks in advance!
you could try pageshow instead of pagebeforechange. Beaucse pageshow is fired before the pagechange event
Related
$('#ac').autocomplete({
source: '/url',
appendTo: $('#ac').closest('.popupWindow'),
select: function (event, ui) {
// do stuff
}
});
in IE9 first time everything works fine, but when i type text is second time, elements don`t reacts on clicks
error appears only when using appendTo option
solve it: on one of parent elements was click event handler with e.stopPropagation()
I am using jQuery tabs, each tab has variable heights.
When I select a tab I need to refresh the content in a div to accomodate the window scroll appearing/disappearing.
Looking at the API documentation for the tabs plugin there is load event and a select event. I cannot seem to find any other events I can plug into.
The load event works fine but when selecting a tab that is already loaded the select event fires before the content is displayed.
$("#tabs").tabs({
cache: false,
select: function (e, ui) {
// running the event here will not work as it runs before the content is diplayed
},
load: function (event, ui){
// running it here works ok as it fires the event after the content is displayed
}
});
I need the event to fire after the content is displayed.
Is there an event I can plug into for this particular behaviour?
The JqueryUI 1.8 API documentation describes the show and select events.
If show doesn't work, then perhaps configuring a timer in the select handler to refresh the div a few milliseconds later will do the trick.
I have a page with an accordion that contains search criteria. Once a person clicks the search button, the criteria closes (I simulate a click on the accordion heading). This works great.
The problem is when there the user provides invalid input, my AJAX call returns and I attempt to show the search criteria again before the accordion finished closing (again with a simulated click on the accordion heading). This of course fails to open the search criteria.
A simple example of this would be double clicking on the accordion heading. Nothing happens if the accordion is in transition during this double click.
How to avoid this in my situation? NOTE: It seems to be more of a problem in Chrome/FF than in IE as IE does not animate the accordion open/collapse.
Basic idea from the code where #section1 represents the accordion heading:
$("#section1").click();
//some very fast AJAX.
$("#section1").click();
JS Fiddle: http://jsfiddle.net/mikeyfreake/gGaJn/2/
Thanks,
Mike
Call stop on the children of the accordion:
$("#accordion").children().stop(true, true);
http://jsfiddle.net/gGaJn/9/
Use async: false parameter in your Ajax call. This will let the Ajax call finish executing before the second click.
http://api.jquery.com/jQuery.ajax/
Or you can perform the second click in the success function:
$.ajax({
success: function (data) {
$("#section1").click();
},
...
});
I want to make a page transition using "pageChange":
$.mobile.changePage('new.html', { transition: "none"});
when the page loads, I want to executa a function. For this, I added this code in "new.js":
$('#new-page').live('pageinit', function(event) { ... });
The problem is when the caller page opens the new page the previous function don't run, I have to reload the page to run it.
What am I doing wrong?
Thanks
pageinit is only called once for a page, when it is initially loaded into the DOM. Subsequent navigations to the page won't force it to reload into the DOM (unless you specify the option on the changePage method)
when the page loads, I want to executa a function.
I suspect what you're actually after is pageshow or pagebeforeshow though?
EDIT:
the jQuery UI selectable widget has a callback built into it, stop, I need to know how to trigger this event programmatically.
(this was poorly worded)
I've attached an event listener to the jQuery UI Selectable Widget. How can I programmatically trigger the stop event?
Ex Selectable:
$("table").selectable({
filter: "tr",
stop: function(){
//do stuff
}
});
// Various attempts at triggering the stop event
// one
$("table .ui-selected").click();
// two
$("table .ui-selected").select();
// three
$("table .ui-selected").trigger("click");
// shot in the dark 1
$("table").selectable('widget').trigger('stop');
// Shot in the dark 2
$("table").trigger('stop');
// really long shot in the dark
$("table").selectable('widget').call('stop');
Further Attempts
// selectablestop event
$("#table").selectable('widget').trigger('selectablestop');
$("#table .ui-selected").trigger('selectablestop');
If you want to trigger the event outside of the control you can simply call .trigger(). This assumes you are using the .bind() and not the anonymous stop:function() in options.
$("#selectable").selectable({});
$("#selectable").bind("selectablestop", function(event) {
$("body").append("<h1>did selectablestop</h1>");
});
$(":button").click(function() {
$('#selectable').trigger('selectablestop');
});
Code example on jsfiddle.
Edit
Another way would be to retrieve the stop: option value (which would be the function)
var s = $('#selectable').selectable( "option" , "stop");
s(); //call the function.
Code example on jsfiddle.
I ended up doing this, found at How to programmatically select selectables with jQuery UI?
$('#selectable').data("selectable")._mouseStop(null);
This will trigger the mouse stop event and execute the binded stop function on the selectable. If there's a way to trigger the stop in a more elegant way, I would love to see.