John Main Logo

John Main

Code. Design. Hosting. Maintenance.

15
May '12

In my opinion one of the big glaring fails in CSS is the lack of ability to make an element expand to fill the remaining space within its parent container. So often, particularly in mobile design, in order to build as flexible a layout as possible I want to let one element be the size it needs to be and have another fill the remaining space. That’s what this jQuery plugin does.
This version works for filling the remaining height, but I’m sure you can see how easy it is to change it to work for widths.

(function($) {
$.fn.dynamicElement = function() {
options = jQuery.extend({
spacing: 20
}, options);
this.each(function() {
var sibling_height = 0;
$(this).siblings().each(function() {
sibling_height += $(this).outerHeight(true);
});
var parent_height = $(this).parent().innerHeight();
$(this).height(parent_height - sibling_height - options.spacing);
});
}
})(jQuery);

Options
spacing – adds an extra gap. Do bear in mind though that the position of this gap will be dependent on how you have aligned your elements.

Calling the Function

$('.element').dynamicElement();
$('.element').dynamicElement({ spacing: 50 });
29
Apr '12

In the process of learning mobile application design with jQuery Mobile I struggled greatly with making my layouts work with different screen sizes. There are a hundred and one articles online about screen sizes, resolutions etc but no clear consensus on an easy way to make your applications scale from phone to tablet. So I thought I’d build a plugin to do just that.
The idea behind this is simply that you design you application on a certain device with a certain screen width and make sure all your fonts are in the correct proportion. If you set a base font size and then use em sizes on all the rest then it’s simply a case of using a little logic on the current screen width to calculate what that base font size should be in order keep your scale correct.

(function($) {
$.fn.dynamicText = function(options) {
options = jQuery.extend({
maxFontSize: 14,
minFontSize: 6,
baseFontSize: 10,
baseScreenWidth: 800
}, options);
var element = $(this);
doTextResize();
$(window).resize(function() {
doTextResize();
});
function doTextResize() {
var font_size = parseInt(options.baseFontSize * $(window).width() / options.baseScreenWidth);
font_size = (font_size = options.minFontSize) ? font_size : options.minFontSize;
element.css('font-size', font_size + 'pt');
}
}
})(jQuery);

Options

  • maxfontSize – maximum size it will adjust your base font to
  • minFontSize – minimum size it will adjust your base font to
  • baseFontSize – the base font size you used for your development
  • baseScreenWidth – the screen width you used for your development

Calling the Function

$('body').dynamicText({ baseFontSize: 14 });
$('.container').dynamicText({ maxFontSize: 8, minFontSize: 16 });

You’ll notice that, although you will generally want to call this function on the entire body of your page, you by no means have to. It will set the base font of any specified element and as such scale all those below it.

The window resize listener is not strictly necessary for a static page but it will trigger when you change the orientation of your device which could be useful.

20
Mar '12

Having recently upgraded my phone to a Samsung Galaxy SII, acquired an Asus Transformer Prime tablet and reached the end of a big work project I decided it was time to invest in my skill-set and learn the art of mobile application development.

After some research I decided that PhoneGap and jQuery Mobile were the tools I should be using. They bridge the gap between web development and mobile application development really well and, used correctly, produce and app as polished and powerful as one built by any other means.

The key thing to remember when developing is that your code will be rendered by a webkit engine so several of those tricks you might use for Firefox or IE won’t work. A key issue that had me stumped for a while was the fact that you can’t transform any elements that are hidden. However there is a flip side to this in that you are developing for webkit and only webkit so you don’t have to worry about any of that browser compatibility rubbish you normally have to account for in web development.

jQuery has some very good tutorials and demo code on their demo site. All their code is ready to drop straight into an application and is very much geared towards scalability and flexibility with device orientation.

PhoneGap is a full set of libraries to help you take control of your hardware though Javascript calls. I can’t even explain how useful these libraries are. They also have a great set of documentation.

Chances are that once you’ve got into the swing of setting up an app the main issue you will encounter is scaling your app to work on different screen sized and resolutions. This job gets even more difficult when you learn that a pixel is not always a pixel. I strongly recommend reading this article to shed a little light on the situation.

And finally some links and plugins that I have found incredibly useful:

PhoneGap Getting Started Guide

PhoneGap Plugins – The Video Player plugin is particularly useful

Photo Swipe – Great starting point for keeping views scalable and the code is easily modified to go into other apps