Change the style of moving to next activity in phonegap - mobile android - javascript

I am using phonegap for my application.When I move from one activity to another, by default the first one dissappears and the next activity appears. I want to change it so that when I move from one activity to another, the first one goes into left and the next one enters the screen from right. Is that possible? Thanks in advance.

There are several ways.
If the page change is NOT triggered by Javascript, and you want to configure for that transition specifically, then you can add data-transition="slide" to the a tag that triggers such transition.
If the page change is triggered by Javascript, and you want to configure for that transition specifically, then you can add the option transition: "slide" to the JS Object passed to changePage() function:
$.mobile.changePage("#destPage", {
// Other options
transition: "slide"
});
If you want to change the default behavior of the transition (global change), then you can run the code below before the inclusion of jQuery Mobile script:
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = "slide";
// Other overrides
});
For this last method, you can take a look at the documentation of configuring the default settings of jQuery Mobile for more details.
Check out other transitions that you can have with jQuery Mobile. The page also mentions the first method of transition, which can be used with a tag (link) or form submission.

Related

Bootstrap active tab shown event listener

I'm using Bootstrap Tabs and I have one default tab that has active class on page load. When I want to apply some jQuery effects with animation on that tab's content (for example 'show(2000)') that content does not show for 2 seconds, but instantly jumps in after this 2 s time. So jQuery works, but only partially - u cant see animation.
I tried to analyze the cause of this problem. It seems that when bootstrap is loading active tab some it's machinery is still working after the page load and not allowing jQuery 'show' method to get all element's properties at start of animation. So jQuery gets for example opacity but not width and height of element. If I setTimeout on 'show' animation for something about 150-200ms everything is working ok.
Another problem is, that U cant set shown.bs.tab listener on active tab, loaded by default.
Did U have similar problems, and how u managed to resolve it in the easiest way possible?
I was thinking about not setting active class but managing to click or show tabs by JavaScript, allowing to shown.bs listener to work and then apply my jQuery on callback. Another ideas?

How can I find out which functions are being called?

I'm using mmenu jQuery plugin which makes the page slide to the left and displays a menu on the right when a user clicks a menu icon.
To make the main page slide back the user has to click the main page on the left.
Using Chromes Developer Tools how can I find out which functions are being called so I can know which function is responsible for sliding the main page back to its original position?
What you could do, is making every function output their own name using
console.log("function name");
when you click on particular element in chrome dev tools, in the right side partition (left partition should show your DOM) you will find styles, computed, Event Listeners.
So if you visit event listeners tab it will show all types of events associated for any particular element typically with it's callback function in a single line.
This is one of the way i know, its bad but it works. To filter the files, you can click the file names in the profile, it will take you to the function.
Try placing breakpoints wherever in the code this action could be performed.

Triggering function on page update (infinite scrolling)

I'm currently working on a Chrome extension that modifies content on a user's Tumblr dashboard, which uses infinite scrolling. However whenever the use scrolls down, a function needs to run again.
Here's a basic run-down of how I've got it working right now:
User loads page
Extensions modifies elements on page
User scrolls down
Triggers infinite scrolling
Next page loads below current one
More content loads
After that final step, I need step 2 to trigger again and have the new content modified.
I've tried .binding elements such as the entire <body>, the container div around the elements, and to no avail.
How do I trigger a function so that it runs when the content of a page changes (specifically the Tumblr dashboard)?
jQuery is fine, by the way.
You should set up a MutationObserver in your content script to watch for insertions of elements you want to modify.
See this question for more details.
Also, the Mutation Summary library might work well in your case.
You can try jQuery.ajaxComplete. It runs whenever there is an ajax request completed. You could have something like
$( document ).ajaxComplete(function( event, xhr, settings ) {
if (settings.url === 'tumblr.com/update') { //obviously change the update url
//do your thing
}
});
Of course the best way would be to find the actual function that gets fired on the scroll and modify it to fire yours on its success. But give that a shot.

CSS transition property on page exit

I need a few objects on my pages to animate out when a user clicks a link. I want each object to scale and fade out but not all objects such as the navigation buttons.
I was thinking that upon a user clicking a link, the page delays 1 second before opening the redirecting the link to allow fade out giving the animation time to take effect.
Look at the JS event window.onbeforeunload
https://developer.mozilla.org/en-US/docs/Web/API/window.onbeforeunload
It will hopefully be enough to just run the exit animations when this function is triggered - it generally takes the browser around a second to unload the page completely but this varies depending on your browser, page size and cpu speed.
Assuming you're using plain JS and you know how to do CSS transitions, the simple way to make animations occur on page exit is something like this:
window.onbeforeunload = function(e){
document.getElementById('myDiv').className = 'out';
}
Where myDiv id the element you want to animate and out is the CSS class representing the final stage of your transition.
Here is a JSfiddle: http://jsfiddle.net/X5vKS/
If you need finer control over the wait time, you could use the onbeforeunload function with setTimeout to delay the page exit by the length of time of your animation. This is slightly complex for a JS beginner but is quite doable.

jqm Stop tap events queuing when busy

I am creating an app using jQuery Mobile and PhoneGap.
I "delegate" a button on "tap" to perform some heavy processing and display a loading spinner. If users continue to tap on my app, the taps get queued up and fall through to be processed by the app after the heavy processing completes - and end up clicking on unwanted stuff.
How can I prevent this?
(From what I understand, stopImmediatePropagation doesn't help as these are new user events.)
Thanks
To inactive taps on the whole page you could overlay the whole page with a transparent div. Although it might be considered a borderline hack - this would actually use minimal js and css!
The caveat is that it would not give any visual indicator that the page is inactivated.
To do that one could, use a semitransparent gray for the overlay or, as I've done below, show a loading message.
First off, a small CSS discussion:
To make the div cover the whole page set width and height 100%. To position it correctly, use position:absolute and for the transparent background use an rgba background-color property (see below). You should also declare a z-index (can be increased if needed) to ensure that it goes on top of everything else and remove tap-callout using the -webkit-tap-highlight-color property. Set display to none and then show it during your heavy lifting.
I made a jsfiddle which hopefully clears things up.
Here I've made div with an id of "inactivator" which features the properties discussed above.
I've also made a button with an id of "inactivate" to which I've delegated jQuery's show function.
I also took the liberty to add jQuery Mobile's default loading message to show simultaneously just to give a visual indicator of the app thinking (so it's not mistaken for lag).
Here I've added a timeout function so that the loading message and "inactivator" hides after 5 second. Obviously in your case the same code should instead be fired upon completion of your "heavy processing" rather than after five seconds.
(New, additional answer since I didn't understand the question correctly but the old answer still might be helpful to other people.)
The easiest way I can think of is inactivating the button at the start of your javascript function and then reactivating it when it's suitable:
$('#YourButton').addClass('ui-disabled');
At the end of your function (or whenever you'd want it active again:
$('#YourButton').removeClass('ui-disabled');
So it took me a while to figure it out... you have to return FALSE from the delegate function for parent elements to ignore the event. The return false line below fixes my issue:
$(document).delegate("#finish", "tap", onFinish);
var onFinish = function() {
$.mobile.loadingMessage = "Finishing...";
$.mobile.showPageLoadingMsg();
setTimeout(function(){
HEAVYPROCESSING();
$.mobile.changePage($("#choosearticle"));
}, 50);
return false; // important - stops the two click fall through problem!
}

Categories

Resources