Does jQuery show() / hide() on iPhone / Android work? - javascript

I've been testing a website on mobile devices which uses a simple hide() / show() on a form. Works great on the desktop but not at all on mobile devices. Does anyone know if the functions are supported?
Using jQuery 1.5
Thanks
Ric

Yes, jQuery works fine on iPhone and Android.

yes works fine,
I had done in many projects for smartphones (iPhone, Android) specially and works as charm
you can be sure for this, because, new mobile web framework, jQtouch, and jQuery mobile is in jQuery and alot others too.

Ric I wouldn't say that combining all of the JS files together is really that bad of a solution, in fact I think that minifying and combining JS code is a great practice, unless you need people to be able to read your JS from source for some reason. Glad you got it fixed.

Okay, this is a terrible answer and thanks to everyone for their help.
In the end I combined all the JS files together. This fixed the script execution order problem on iPhone / Android. I'm not sure why it was happening on this particular site, and only on mobile phones.
It's not a very elegant solution and I do not recommend it. In my case it was for a temporary microsite so decided it was acceptable. Should I discover more about the problem I will post it here.
As Colt pointed out I was a bit rash saying it wasn't en elegant solution combining all the files together. In fact it is just what you should be doing! My frustration was that desktop and mobile browsers handled the JS different, and when developing the site I don't combine/minify the files until I know they work. Makes debugging and updating libraries easier.
As I feel bad for suggesting poor advice here's a little top tip: When on the production server I use Smart Optimizer (http://farhadi.ir/works/smartoptimizer) to handle joining, minifying, GZipping and caching the files for me. Means my dev code remains nicely seperated and it's easy to up jQuery, plugins etc but on the live site everything is nicely stuck together.

Related

Website links load but do not redirect to different page Wordpress, IE8

I've almost completed a website built in Wordpress, using a theme called WP Foocamp. My problem is that whilst the site looks great in most modern browsers, mobiles etc I am still struggling with IE8. I don't have an in-depth knowledge of javascript or PHP which makes this really difficult, but if I could find out where the problem is then I could research where to fix it.
Any help would be MASSIVELY appreciated.
The url is ipswichhalfmarathon.com
I recently did a complete answer on the subject of IE pre 9. Go and check it out here

Javascript/Jquery Lazy load not supported..How does facebook do it?

So I am trying to implement a basic image lazy load feature to speed up the loading of my website. From what I understand the Jquery plugin lazyload worked for a while but is no longer supported for new browsers.
My question is simple:
How do other sites do it then? Sites such as facebook do have support for this type of thing, so there has to be an answer out there. I'm aware that they have full teams of developers for this sort of thing, but with all of the complexities of javascript there has to be a feasible solution.
So does anyone have a patch for the lazyload plugin or a way to do it that works? It would be greatly appreciated. Thank you.
EDIT
My previous research seemed to indicate that all of the tutorials were using the same plugin since there are many that are named similarly. However there are many differing variations and I was unclear in my original question.
I will try to find a cross-browser solution based on the suggestions below and post it here to make this post more useful for others.
Try this on for size: http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/
Worked fine for me in Chrome.
Try Ryan Grove's LazyLoad library http://github.com/rgrove/lazyload/

Browser compatibility; Before or after uploading website to server?

I am on the stage where I need to make my website cross-browser compatible.
I need tips on how to get started.
I have developed my website on firefox, so it works great with firefox.
I guess I have to download a couple of versions of all major browsers now, right?
Then just test each browser one by one?
Should I do this before uploading the entire website onto a server or afterwards?
All tips and SW which makes this easier is appreciated.
BTW, it is a classifieds website using MySql, Solr, PHP, js etc...
Thanks
Cross-browser compatibility is best planned for in advance, as there are ways to build your site that will make it much easier.
Consider using a CSS reset script like Eric Meyer's.
Consider using a JavaScript library like jQuery.
You can make use of Adobe BrowserLab to do cross-browser testing.
Consider the mobile audience.
You need to have some kind of local webserver so you can edit the code and test it in a comfortable way. It is also helpful if you make it accessible for validator.w3.org so you can do syntax checking.
Testing it in IE6, 7 and 8, Firefox and Chrome would be a good start I would say.
Since you are working with server side code, you need to have a server.
Once the site goes live you will need both a live and a development server.
Yes, I'd make it cross browser compatible before uploading to the server. The reason for this is that you may need to change the server-side code, adding ids and classes to the markup, plus it may well be necessary to change the markup. Make sure it's working locally first.
IE Tester is very useful for testing on the various IE browsers. I'd ensure that I've tested it on a Webkit browser (such as Chrome), a Gecko Browser (such as Firefox) and Opera. See this list for different browsers.

iphone web page transitions

I am developing a web page for iPhones and iPod Touch's. I am using the Universal iPhone UI framework. I need to have silding page transitions, but can't seem to get it working. Is there a good javascript framework I could use that would make this easier? I've done a lot of normal web dev with jquery, but it doesn't seem to like the iPhone.
Try http://code.google.com/p/iui/
It's a nice little JS framework, among other things, that will help you with the transition aspect. Have a flick through the documentation too, as it'll give you quite a few additional options as well.
Regardless of what framework you're using, the WebKit CSS trasitions are extensions of CSS and were developed with the iPhone and iPhone web-based apps in mind. You can do some very clever, complex animations with no JavaScript and only a few lines of CSS.
Here's what Google finds on the subject.
Try the following frameworks.
Jo
Sencha Touch
jQuery Mobile
These are for serving Web based mobile sites, they can then in turn be made into Apps for Android or iOS using PhoneGap
Of the 3, Sencha is the more mature project and has the most things out of the box. Jo looks very promising and would probably directly compete with Sencha. jQuery mobile is very interesting but just far to early to do any production code with it, too rough around the edges. jQuery mobile takes a different approach to the others as it is html based and it interperates the attributes on tags to turn things into tableviews or menus.
jQuery mobile is quicker to hack together and get your head around, where the other two take a little bit more thinking. But once you figure them out its easy enough.
If you don't want to serve the site via a url at all and want to just build an app then Appcelerator is the way to go. You write code in JS and it makes native Android or iOS apps for you. You will get access to pretty much the full Android/iOS api.
I have coded with appcelerator, however I am no longer going to use it and use one of the above frameworks, probably Sencha for just now. I can get access to the device native apis via PhoneGap and for simpler apps give a great experience cross device via a url.
Reference
Apple's Dashcode IDE has an extensive set of page transition templates for the iPhone. You should be able to fire up a quick project, get the look you want, then export the resulting HTML/CSS/Javascript into your favorite IDE.
The only catch is that it's OSX only.
I've been deep into an iPhone web app project lately. We evaluated iUI, but decided against it for various reasons. Consequently, I've developed most of the same functionality from scratch. While I can't share the code from the actual product (as I'm under NDA), I have been documenting many of the techniques I've used to do certain things. Check out the links below:
http://segdeha.com/e/css-transitions/
http://segdeha.com/blog/2009/07/19/stupid-webkit-tricks

Minimalist cacheable jQuery/javascript library for iPhone?

Given the iPhone's 25k limit for caching of files, I'm wondering if there's interest in an iPhone optimized javascript library that makes caching a top level goal. Since it'd be iPhone only it could get rid of most cross-browser cruft and rely on safari specific capabilities, hopefully cutting down some of the girth and staying with 25k.
John Resig discusses this briefly, although mostly to dismiss it, it seems. He does mention:
if you're particularly excited about
breaking jQuery down into little
chunks you can grab the individual
pieces from SVN and build a custom
copy.
Anyone tried that?
Dojo implements a 6k version that seems to rely on deferred loading. I'm mostly a jQuery user so I haven't given it a try, but it looks interesting.
Overall: what do you think about a safari/iphone specific javascript library that implements, say, the top 90% most used APIs in jQuery (or your other favorite library)?
Newer update: looks like Zepto is the way to go these days.
Found XUI, looks like what I was looking for, although I haven't given it a try yet.
You should check out QuickConnectiPhone. It may do what you want. It can be found at https://sourceforge.net/projects/quickconnect/. It also lets you write your app in JavaScript, CSS, and HTML and yet install it on a device.
There is an API that will allow you to make calls down to the Objective-C layer as well for phone vibration, GPS locations, accelerometer information, and some more. You can even extend this to other native phone behaviors as well.
The development blog for the framework is found at http://tetontech.wordpress.com
I'm experimenting with XUI as well, looks promising, seems to follow JQuery-way of doing things.
The same people also created 'lawnchair' for persistant storage of data in json format, XUI+lawnchair looks like a great combination for cross-platform (as in at least iphone+android, maybe webos, symbian, blackberry and ms as well) mobile development.
I think it would be fantastic, but it would be hard to match the testing and reliability of jquery unless someone really picks it up and runs with it. If there was a lightweight, safari only version of jquery that was completely compatible with the plugins and documented methods, it would be a godsend.
Given the increasing popularity of the iphone, I think it would be a really useful thing, it might be possible to remove the cross browser stuff and get it down to size.... however, it would be even more useful if the iphone had a more realistic cache limit.
It does make me wonder if the cache limit in the iphone was determined by the capacity of the hardware or the business needs of the carriers. A 50K cache limit would reduce a lot more carrier usage...

Categories