Thoughts, ideas, tips, musings, and pontifications (not necessarily in that order) by Ben Forta ...
NOTE: This is my personal blog, and the opinions and statements voiced here are my own.
April 17, 2012
With being offline for almost two weeks I missed lots of important news, including this announcement of the release of jQuery Mobile 1.1 Final.
January 31, 2012
jQuery Mobile 1.0.1 has been released, full list of enhancements in this blog post.
January 5, 2012
The default jQuery Mobile page transitions are slide for pages and pop for dialogs. And on Android these can be sluggish and appear to flash on and off annoyingly. Turning off transitions is easy, well, once you know the code you need. The following (which is not overly clear in the docs) was given to me by fellow Adobian, and jQuery Mobile contributor, Kin Blas. $(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = "none";
$.mobile.defaultDialogTransition = "none";
});
Simple, right? Well, there is one catch. The mobileinit event has to be bound before jQuery Mobile is loaded. In other words it needs to be after your code that loads jQuery, but before the code that loads jQuery Mobile. You can put it right inline, or in its own .js file, which you can include.
January 3, 2012
The Fireworks team has started a 5-part blog series on jQuery Mobile Theme Skinning using Fireworks CS5 and the CSS3 Mobile Pack extension.
December 30, 2011
Posted At : 10:58 AM
Related Categories:
jQuery :
The following is based on a jQuery Mobile app I am working on. But, the code and details apply to jQuery, too. The app I am working on makes frequent Ajax calls to back-end services, and so I want a busy indicator that shows the user that activity is occurring. This is actually really easy to do, once you have a few steps in place. So ... First you'll need the indicator itself. The simplest way to do this is with an animated GIF (and, yes, that means that the indicator won't reflect the relative wait time like a progress bar would). For great free animated GIF loading indicators, go to ajaxload.info. Once you have the image, embed it in your page using an <img> tag: <img id="imgAjaxLoader" class="ajaxLoader" src="images/ajax-loader.gif" />
I want the image centered on the page, accomplished using this CSS: .ajaxLoader {
position: fixed;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px;
z-index: 100;
display: none;
}
The GIF I used was 48px x 48px, so the margins are set to -half that size. That, combined with 50% for top and left ensures that the image is centered in the page. z-index is set to 100 to ensure that the image is in the foreground, and display:none prevents the image from being displayed. Now there is an invisible animated GIF on the page. The next step is to show the image when an Ajax call starts and hide it when the call completes. jQuery makes this incredibly simple to do via the ajaxSetup() function. Here's the code: $.ajaxSetup({
beforeSend:function(){
$("#imgAjaxLoader").show();
},
complete:function(){
$("#imgAjaxLoader").hide();
}
});
When an Ajax call is initiated, beforeSend calls .show() to display the animated GIF, and when complete, .hide() hides the image. Simple. My own jQuery Mobile app makes Ajax calls on multiple pages, and so I embedded the same animated GIF on each page, all using the same style. Rather than bothering to track which page is displayed to show / hide just that animated GIF, I use jQuery to show / hide all of them, like this: $.ajaxSetup({
beforeSend:function(){
$(".ajaxLoader").show();
},
complete:function(){
$(".ajaxLoader").hide();
}
});
.ajaxLoader finds every tag styled as ajaxLoader, so $(".ajaxLoader").show() shows all of the loader GIFs and $(".ajaxLoader").hide() hides them all. Nice and simple!
December 29, 2011
Posted At : 9:35 PM
Related Categories:
jQuery :
jQuery lets you manipulate control contents at runtime, for example, you can add and items to an ordered or unordered list using code like this: $('#myList').append('<li>Some text</li>');
If you do this in jQuery Mobile, you must then force the control to refresh so that formatting and styles are reapplied, like this: $('#myList').listview('refresh');
Simple, right? Well, not always. One of my lists contains collapsible items created using data-role="collapsible". And for some reason that I have yet to determine, when listview('refresh') refreshed the control it did not refresh the collapsible data-role, so all data was displayed, head and collapsible content, in one mess. The solution? I had to call the collapsible() method on each list item that needed to be collapsible in addition to doing the refresh. I used jQuery .find() to find all <li> controls with a data-role of "collapsible", and then called .collapsible({refresh:true}) for each, like this:
$('#myList').listview('refresh');
$('#myList').find('li[data-role=collapsible]').collapsible({refresh:true});
Obviously, to use this code with other controls you'd need to change 'li[data-role=collapsible]' to reflect the HTML control you are using. Again, I have yet to figure out why this is necessary. But, it is, and it works.
December 13, 2011
Posted At : 11:29 AM
Related Categories:
jQuery :
I needed to trap the events triggered when a dialog is opened and closed in a jQuery Mobile app. After trying all sorts of combinations of open, close, and dialog events, I found that these will do the trick: // Dialog opened
$('#myDialog').on("pageshow", function() {
alert("Opened");
});
// Dialog closed
$('#myDialog').on("pagehide", function() {
alert("Closed");
});
December 12, 2011
jQuery lets you manually manipulate controls like lists. For example, you can do something like this to add an item to a list: $('#myList').append('<li>Some text</li>');
In jQuery Mobile, if you manually update lists like that, then when you are done you must force the list to refresh so that formatting and styles are applied. To do this, just use: $('#myList').listview('refresh');
But, there is one gotcha you should be aware of. jQuery Mobile apps are usually comprised of pages, each defined with a <div data-role="page">, and often with multiple in the same .html file. jQuery (and thus jQuery Mobile) lets you manipulate any controls in your page, so you can append or change controls in a page not currently being displayed. But, the .listview('refresh') call? That will only work if the control is on the currently displayed page. If you try to .listview('refresh') a control on a page that is not displayed, you'll see this error: Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'
So, if you do need to update controls on a not currently displayed page, remember to load that page before triggering the refresh.
December 9, 2011
jQuery is freaking amazing, you all know that already. jQuery Mobile? It's a great v1 effort (and it just won the Innovation of the Year award), but is not quite as complete as it needs to be. If you are playing with jQuery Mobile, you owe it to yourself to check out JTSage's jQuery Mobile plugins, DateBox (a date and time picker, it blows away the in development jQuery Mobile experimental datepicker), and SimpleDialog (a replacement for JavaScript alert() or dialog()). Both are must haves!
August 6, 2011
Posted At : 2:10 PM
Related Categories:
jQuery :
This is actually a few days old, but I've been swamped and am only getting to dig into it now. But, as per this blog post, jQuery Mobile Beta 2 (which Adobe is very involved in) has been released.
July 12, 2011
Back in May, Matthew David wrote an excellent article for ADC entitled Getting started with jQuery Mobile. He has now followed this up with a new ADC article entitled Using and customizing jQuery Mobile themes in which he walks through how to control colors, look and feel, and more. If you are new to jQuery Mobile, and especially the Dreamweaver jQuery integration, these are both highly recommended.
April 11, 2011
In support of the new Flash Builder 4.5 and CS5.5 announcements, lots of new content has been published to ADC and Adobe TV:
- Flex and Flash Builder
- Flash Catalyst
- Dreamweaver (and web development)
March 29, 2011
 Amazon has announced Cloud Drive, essentially a hard drive in the cloud, and 5 GB of free storage to get you started. Aside from file storage, Cloud Drive is specifically intended for storing your digital music collection which can then be played back using Amazon Cloud Player (for web and Android).
Of course, unless you are buying new music from Amazon (which will get deposited right into your cloud drive), this requires that you upload your entire music collection, and so Amazon created the Amazon MP3 Uploader. And the MP3 Uploader (which also uploads AAC files)? It's a web based Adobe AIR app built using jQuery.
February 18, 2011
Back at MAX 2010 I chatted John Resig about Adobe's contributions to jQuery Mobile. This topic came up again this week at Mobile World Congress amidst discussions about Adobe and HTML5, and The Register has posted an article on the subject as well as the whole over-hyped HTML5 / Flash "controversy".
December 29, 2006
Rob Gonda has announced an implementation of AjaxCFC for jQuery, it uses the existing AjaxCFC ColdFusion integration, but uses the jQuery Ajax engine. Keep an eye on Rob's blog for the beta announcement.
|
