I realise that this question may be almost impossible to answer definitively, but:
Is it reasonable to assume that mobile browser with JavaScript can also cope with jQuery? We're talking relatively basic jQuery such as click events and Ajax.
I'm writing a mobile HTML app. It involves slippy maps so anyone who wants to use it has to have JavaScript.
I'd much prefer to use jQuery for the rest of the coding if possible, but can I reasonably say to the client "any phone with JavaScript should support basic jQuery"?
I know about jQuery mobile, but I'm specifically talking about phones that aren't advanced enough to handle jQuery mobile, but do have JavaScript.
Thanks!
Yes.
jQuery is not a language. It is a library written in JavaScript, and therefore if you can run JavaScript reasonably well, you should be able to run jQuery without any problems.
With that being said, nothing compares to actual testing. Periodically check that your code works across multiple platforms (not only on different phones, but different web browsers as well).
javascript is javascript. You can always use jQuery.support to detect features. You should test on the browsers you want to support anyway.
The answer is simple: yes.
JQuery, and especially its most basic features, is designed to be cross browser. If the mobile browser has reasonable javascript support, JQuery should not be an issue.
For fallbacks on features you aren't sure whether or not are supported, you can use jquery.Support or Modernizr
It should run okay on most... don't expect much from explorer pocket.
Although jQuery functions across these
browsers, IRL many of the cool
effects that jQuery makes simple won't
be seen on a mobile browser, because
the interface is so different. There
is (almost) no concept of mousedown,
mouseup, or hover; click and focus
behave differently, screensize is
different vs effective window size,
animations are slow, etc. The
challenge in mobile browsers is mostly
in the interface design. The main
advantage IMO is AJAX-loaded content,
for speed and low data/bandwidth
usage.
In short: yes.
HOWEVER, if you're only doing Ajax and other little things, you'll see a significant speed gain just using vanilla JS. But I do realize this can be somewhat of a pain. There are lighter-weight packages out there, like xui.
Honestly, I'd consider programming separate sites for mobile Safari (iOS and Android), and other lower-powered devices that don't run WebKit.
To iterate again: jQuery.mobile is NOT a replacement for jQuery, but rather framework that builds on jQuery, much like jQuery-ui does. This would be an even larger footprint and bootstrap time.
You can check http://jquerymobile.com/ - maybe it is what you should use on your pages instead of "regular" jquery.
Yes but you will better off using jQuery Mobile in case you are developing for mobile devices. It's optimized for them.
Check out jQuery mobile, as well as this very informative slideshare which describes the scope and difficulty of the problem you're facing.
Related
I am working on a project to convert a web site that is fully functional in Internet Explorer 8 and lower, but does not work well in Firefox or Safari.
A lot of what will need to be changed is going to be javascript-related (aka methods that exist in IE but not in other browsers).
What I want to know is whether anyone is aware of a fairly comprehensive list of common things that have to be changed to work accross all browsers.
I am starting with quirksmode.org but I don't think it will have quite everything I'm looking for. If anyone knows of a list please let me know.
Your best option here is to go with a Javascript toolkit/library like jQuery, MooTools or Prototype. Such a decision will save you a monstrous amount of work, and all three are constantly being updated which gives you a large degree of safety against future compatibility issues. Especially for DOM manipulation or AJAX, a library is the way to go.
If you absolutely mustn't use one, quirksmode is a good start. I've never found any single source that is comprehensive enough to keep me from running back to Google for each problem area.
Quite honestly, if you don't have lots of experience doing cross-browser development, I suspect the best way to fix your app is to set up a good test environment on each target browser and starting finding where it breaks. You're eventually going to have to test it on each target browser anyway, so you might as well start there. Once you find out what code is failing you for a particular bug, you can do more targeted searches for how to work around that issue in a cross browser way.
You will, over time, build up a good internal knowledge base of what is safe to use in a cross browser way and what is not. Even experienced developers still run into new issues on every project that are only found with testing. One advantage of experience though is that you start to learn when to suspect that something might or might not have cross browser issues and either avoid it (find a safer way) or explicitly test it in several browsers before you use it.
I find that http://jsfiddle.net is awesome for creating very efficient self-contained test cases to either proactively try something in other browsers or to troubleshoot something that's been giving you a problem.
As others have said, one huge advantage of the various browser libraries like jQuery or others is that they have solved a lot of these compatibility issues for you and, in general, if they document a function in the library and don't explicitly warn you about cross-browser issues, then they've already done their homework to make it safe for you.
You may also find out that using a javascript framework such as jQuery, ExtJs, Prototype, Mootols, ... would be very beneficial in writing cross browser javascript.
a web site that is fully functional in Internet Explorer 8 and lower,
but does not work well in Firefox or Safari
I would strongly recommend to develop with a browser that meets the standards (e.g. CSS3).
The process should rather be: to develop with FireFox or Chrome - and fix all IE versions later on.
Well, this is my daily bread... and ordinary it's IE b*tch which makes me loose time...
By multi-device viewing, I mean that it will be seen on both desktop computers and mobile.
Will mobile user get better performance and usability without JavaScript? Would it be good if we make site with pure CSS and server side programming for mobile? Opera Mini, iPhone safari, blackberry browser, Windows mobile browser, whatever?
Graceful degradation takes time to implement. So if we go with pure CSS for fancy things and server side solution for dynamic things , is it a better idea?
Although there is a good answer here, first think on pure CSS solution or server side solution if needed is a good idea I think.
The phone/browser combos you've mentioned all have fully functional javascript interpreters. Any modern smartphone is going to be capable of most of what you can throw at it. If you're doing excessive processing client side in javascript, you're probably doing it wrong already.
Write code that degrades gracefully, and if you're doing it right, your site should work properly without javascript by simply adhering to the standards. Start with a design that works without scripting, and then layer in the niceties. In most cases, this produces a cleaner, more maintainable application.
I don't know a ton about designing sites for mobile phones, but what you're saying sounds logical. JavaScript is run client-side, and since mobile devices have rather limited processors, it makes sense to do as much work as possible on the server.
I like to do it server side. You can use WURFL to get database of existing mobile devices and when you detect one you server a customized view for mobile devices.
I'm not a JavaScript wiz, but is it possible to create a single embeddable JavaScript file that makes all browsers standards compliant? Like a collection of all known JavaScript hacks that force each browser to interpret the code properly?
For example, IE6 does not recognize the :hover pseudo-class in CSS for anything except links, but there exists a JavaScript file that finds all references to :hover and applies a hack that forces IE6 to do it right, allowing me to use the hover command as I should.
There is an unbelievable amount of time (and thus money) that every webmaster has to spend on learning all these hacks. Imagine if there was an open source project where all one has to do is add one line to the header embedding the code and then they'd be free to code their site per accepted web standards (XHTML Strict, CSS3).
Plus, this would give an incentive for web browsers to follow the standards or be stuck with a slower browser due to all the JavaScript code being executed.
So, is this possible?
Plus, this would give an incentive for web browsers to follow the standards or be stuck with a slower browser due to all the JavaScript code being executed.
Well... That's kind of the issue. Not every incompatibility can be smoothed out using JS tricks, and others will become too slow to be usable, or retain subtle incompatibilities. A classic example are the many scripts to fake support for translucency in PNG files on IE6: they worked for simple situations, but fell apart or became prohibitively slow for pages that used such images creatively and extensively.
There's no free lunch.
Others have pointed out specific situations where you can use a script to fake features that aren't supported, or a library to abstract away differences. My advice is to approach this problem piecemeal: write your code for a decent browser, restricting yourself as much as possible to the common set of supported functionality for critical features. Then bring in the hacks to patch up the browsers that fail, allowing yourself to drop functionality or degrade gracefully when possible on older / lesser browsers.
Don't expect it to be too easy. If it was that simple, you wouldn't be getting paid for it... ;-)
Check out jQuery it does a good job of standardizing browser javascript
Along those same lines explorercanvas brings support for the HTML5 canvas tag to IE browsers.
You can't get full standards compliance, but you can use a framework that smooths over some of the worst breaches. You can also use something called a reset style sheet.
There's a library for IE to make it act more like a standards-compliant browser: Dean Edwards' IE7.
Like a collection of all known
javascript hacks that force each
browser to interpret the code properly
You have two choices: read browser compatibility tables and learn each exception a browser has and create one yourself, or use avaiable libraries.
If you want a javascript correction abstraction, you can use jQuery.
If you want a css correction abstraction, you can check /IE7/.
I usually don't like to use css corrections made by javascript. It's another complexity to my code, another library that can insert bugs to already bugged browsers. I prefer creating conditional statements to ie6, ie7 and such and create separate stylesheets for each of them. This approach works and doesn't generate a lot of overhead.
EDIT: (I know that we have problems in other browsers, but since IE is the major browser out there and usually we need really strange hacks to make it work, css conditional statements is a good approach IMO).
Actually you can,there are lots of libraries to handle this issue. From the start of the time, javascript compliance issue always was a problem for developers and thanks to innovative ones who developed libraries to get over this problem...
One of them and my favorite is JQuery.
Before JavaScript 1.4 there was no global arguments Array, and it is impossible to implement the arguments array yourself without a highly advanced source filter. This means it is going to be impossible for the language to maintain backwards-compatibility with Netscape 4.0 and Internet Explorer 4.0. So right out I can say that no, you cannot make all browser standards compliant.
Post-netscape, you can implement nearly all of the features in the core of the language in JavaScript itself. For example, I coded all methods of the Array object in 100% JavaScript code.
http://openjsan.org/doc/j/jh/jhuni/StandardLibrary/1.81/index.html
You can see my implementation of Array here if you go to the link and then go down to Array and then "source."
What most of you are probably referring to is implementing the DOM objects yourself, which is much more problematic. Using VML you can implement the Canvas tag across all the modern browsers, however, you will get a buggy/barely-working performance in Internet Explorer because VML is markup which is not a good format for implementing the Canvas tag...
http://code.google.com/p/explorercanvas/
Flash/Silverlight: Using either of these you can implement the Canvas tag and it will work quite well, you can also implement sound. However, if the user doesn't have any browser plugins there is nothing you can do.
http://www.schillmania.com/projects/soundmanager2/
DOM Abstractions: On the issue of the DOM, you can abstract away from the DOM by implementing your own Event object such as in the case of QEvent, or even implementing your own Node object like in the case of YAHOO.util.Element, however, these usually have some subtle changes to the standard API, so people are usually just abstracting away from the standard, and there is hundreds of cases of libraries that abstract away.
http://code.google.com/p/qevent/
This is probably the best answer to your question. It makes browsers as standards-compliant as possible.
http://dean.edwards.name/weblog/2007/03/yet-another/
Does javascript work on mobile phones?
Which mobile phones?
There's some pretty good information on this site:
http://www.quirksmode.org/m/table.html
depends on the browser
Some. Do you have a specific model in mind or just in general?
Depends on what mobile phones and to what extent you need support.
Smart phones pretty much all include support for JavaScript. How well they support them is another story.
You can see a lot of what mobile devices support here: http://www.quirksmode.org/m/table.html
In general I would assume that javascript isn't there, as older cellphone models may not support javascript, but, if you use unobtrusive javascript and graceful degradation, then it won't really matter, as your page will function in some known way on any device, as long as it is formatting itself properly.
So, if you want to have it work on all mobile phones, then start with not needing javascript, then add in the javascript as an enhancement.
Bare in mind as well that their are different versions of JavaScript supported by different phones and different browsers, even if JavaScript is available.
http://www.skyfire.com/ if you can get that browser on it then you can get javascript! Awesome browser and quite portable...
Works on Symbian (Nokia Phones use it) and Windows Mobile.
I think javascript is totally browser dependent. Symbian mobile surely can run javascript. Smart phones are much smarter to handle javascript.
I need to use JavaScript in a form for mobile web application.
I need some information about it, related to browser compatibility as well as way to use JavaScript in mobile web applications (syntax).
It's a nightmare. It's like working with web-browsers in the 90's but with the manager expectations of tomorrow.
I strongly recommend you determine your target platforms in terms of regions, software, and actual hardware since the market is much more fragmented than the web and a large number of mobile devices have issues with CSS, JS and even XHTML ranging from painful to not-on-this-platform.
The good news is that android and iphone are pushing the field rapidly. The bad news is that makes a lot of the sources you'll google badly out-of-date.
Some references:
http://www.w3.org/TR/mobileOK-basic10-tests/#test_objects_or_script
http://mobiforge.com/developing/story/getting-started-with-mobile-ajax
http://mobiforge.com/
Especially that last one :)
The reality have changed since this question was asked. Modern smartphones support browsers, that are compatibile with their desktop big brothers, with same JavaScript support. However, still there are differences how application is displayed and how it is operated, you can't rely on drag-and-drop, there are some rendering differences, f.g. in GWT-Ext Showcase on Opera Mobile tab close buttons are not rendered. So you should not rely on modern JavaScript 'magic framework' such as Ext.
Agree with the "it's a nightmare" comment.
Some tips:
For simple scripts, go right back to JavaScript basics - no JS frameworks - think document.getElementById();
Always make sure your JavaScript is valid. If you have an object, make sure you have commas and semi-colons in the right place. An easy way to check this is in Internet Explorer - check in the bottom left for the valid or invalid JavaScript icon.
Make sure your Javascript is XML valid - Blackberry's won't like it if it's not.
For something more complex, check out jquery mobile: http://jquerymobile.com/ - some nice stuff in there.
I would recommend you to use new framework for mobile web applications Sencha http://www.sencha.com/
This framework supports wide range of mobile platforms like Adroid, iPhone and others...
Good luck,
Yevgeniy V.
Softjourn Inc.
Software developer.
Another good solution to target multiple devices (IPhone, Android, BlackBerry, Bada ...) and take advantage of innovative components is to use the JavaScript Toolkit Wink.
Khushi,
I have just founded a framework called PhoneGap, you build your whole app using javascript, html5 and css. You even can play with device native features.
Take a look at for more information http://www.phonegap.com/about .
Totally agree with annakata,
It is a minefield trying to work with JavaScript on a mobile phone in fact we(I work for a mobile agency) tend to recommend to clients that you don't use JavaScript in your mobile pages.
If you have to use JavaScript then look into
WURLF - http://wurfl.sourceforge.net/
MobiForge - http://mobiforge.com/
MobileElements - http://www.mobileelements.com/
And I would recommend creating an iPhone only site that has all the cool functionality and then a plain site for everyone else so that it works well for them.
Also remember you can use device anywhere for testing on multiple phones as well
You may know Patrick H. Lauke, who wrotes the quirksmode blog. He started to work with mobile phones in the not so recent past.
He is publishing his work on the same website in the same wonderful quality of his.
Browsers in the new mobile phones are getting better, that's true, but unfortunately even crazier bugs are popping up.
Not all are javascript related, but you could check his mobile pages at:
http://www.quirksmode.org/mobile/