Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I deal with jQuery mobile and PhoneGap at the moment and have some questions about it (documentation and books did not help).
I'm using the multi-page template to develop a mobile app. Each page has some JavaScript.
Should each JavaScript begin with $(document).on("xxx")?
What's the difference between document ready and $(document).on("xxx")
And should I also use function onDeviceReady() in every JavaScript?
onDeviceReady() should be used for Phonegap side, if you want to execute anything after Phonegap is loaded successfully.
Classic document ready should not be used with jQuery Mobile because in some cases it can trigger before / after page is loaded.
on method is on the other hand just method used for event binding. Do not confuse it with document ready. What you need is jQuery Mobile page evenets. Read more about them here.
Use this:
$(document).on('pageinit', function() {
});
Instead of document ready.
Several page events exists, find more about them in an official documentation, or here. Official documentation is for older version of jQuery Mobile but it also translates to last 1.4 version.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I am working on a site that calls various different pages and forms through ajax. To save page loading times I'm trying to only load the .js files that I need for each page or form, but during development this causes several issues and errors, like events or elements having to be referenced through $(document). Also, Jquery now throws a deprecation warning for loading inline js through ajax.
I know I can call external scripts through jquery's .getScript() function, and will be able to resolve all errors, but I'm wondering if it wouldn't just be a whole lot easier to include all the required script files in the main header (or footer).
What approach is more efficient in terms of work flow vs user experience? Load all the site js initially, or load scripts dynamically as needed? (In this case, total size of extraneous js files is approx 50kb)
I recommend you load dynamically when you need it, and put each js file in each file you gonna load, and forget load() wich is actually deprecated, use $.ajax() syntax.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Does bootstrap provide a swipe functionality for the user to swipe slides or images?
If not, is their a easy approach to do this? I am a beginner in both javascript and coldfusion and would like any help that can take me to the right direction or where to start.
Thanks
No, Bootstrap does not provide such a function. I suggest using ZingTouch. Here is an example from their docs:
var parentTouchArea = document.getElementById('parent-toucharea')
var touchArea = document.getElementById('toucharea')
var myRegion = new ZingTouch.Region(parentTouchArea);
myRegion.bind(touchArea, 'swipe', function(e){
console.log(e.detail);
});
You could try jQuery mobile, it has many great resources for (you guessed it) mobile and it is very easy to use, plus there are a lot of great tutorials online.
$(".elementClassName").on("swipe", function(){
//jQuery or JS code here
});
Note that you need to have the script file for jQuery Mobile and jQuery (not sure about the latter though) for the code to run
Also, if your developing for iPhone or WebKit, you should give a look to scroll-snap, it works as you would expect using only CSS and no JavaScript. Check it out on this link
https://webkit.org/demos/scroll-snap/
Check out HammerJS: http://hammerjs.github.io/ -- it provides cross-browser abstractions for a lot of touch gestures, including swipe.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm writing a hybrid app with HTML5, JavaScript and CSS for Android 4.0+ and iOS 7.0+. I was wondering: does JavaScript consumes much memory of the smartphone? Basically my script will: parse objects, handle events, Ajax calls, update the view, etc. I was considering about use jQuery o Angular.js too.
I'm focusing on performance and smooth experience.
Thanks!
As Ari Lerner writes about AngularJS in ng-book, "When we mix Angular into the flow, it extends this normal browser flow to create an Angular context. The Angular context refers specifically to code that runs inside the Angular event loop, referred to as the $digest loop." This is good for updating the view with a JavaScript library.
Both AngularJS and jQuery are extremely efficient, and can be used together to meet the needs listed above.
In my opinion, the optimal JavaScript library for mobile is jQuery Mobile.
https://docs.angularjs.org/misc/faq
Angular JS uses Jquery for some of its operations, and uses its own built in version if none is declared. I would suggest reading the documentation for a full grasp.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
What is the best approach for changing pages in a multipage mobile application?
I have seen it done both ways (as shown below). I can't seem to understand which one is the best approach. Are there differences between the two?
$("#nextPage").load("myapp.html", function(){
alert("loaded next page!");
});
Vs..
$('#currentPage').hide();
$('#nextPage').show();
For the difference between what you've wrote in the question - see comment by #Japser, but in general:
I would say it depends on your app design, on "how far" you want to take it, on the framework you choose for developing it with (Sencha, jQuery Mobile, jQuery, Dojo, ...), etc...
If you "go simple", you can have 1 HTML file considered as your main page, and in it have a DIV which you will use jQuery's .load to replace its content with different content from other HTML files...
You can also use the jQuery Mobile approach for the same, which uses .changePage, etc... again, depending on what you actually want to do.
At the end, it depends on what you want to accomplish.
There is no one best approach.
And if you ever implement multi-page navigation in a Worklight-based project, it is highly important to remember that a Worklight application is a Single Page Application. You must not "leave" the Worklight context, or else you application will stop functioning. See more here: IBM Worklight 6.1 - Why is Cordova code not working when placed in a sub-page?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have this js that beginning so:
$( "#map-page" ).live( "pageinit", function()
{
//Here the body function
});
I would load this function after the page has completed to load.how can i do?
Update: Looks like this method won't work with jQuery mobile (strangely enough).
Try this instead:
$(document).ready(function () {
$("#map-page").doWhatever();
})
For what you want, I think that load suits better
You can read about it here http://api.jquery.com/load/
You should be more clear that you're referring to jQuery Mobile, anyways the best way is to bind a live event to the pagecreate/pageshow event that's triggered on the <div data-role="page">
If you want the code to run just once use pagecreate, if it needs to run everytime the page is shown (there is dynamic data) then use pageshow and fetch any changes via AJAX. Please note if you re-navigate to the page again via the back button etc, it may be fetched from memory in which case your html won't be updated - you must use non-AJAX loading or update your DOM via AJAX in the pageshow
Use an id or class to properly attach the listener, here's a more detailed answer I wrote: https://stackoverflow.com/a/9085014/737023