Nan & Bob have been looking for a way to include extra marketing copy - a tagline - in their new website, but felt that the additional text didn't fit well when viewed on a phone. We suggested showing that extra copy in the footer, but only when the device is in landscape orientation.
The screenshot below shows the result, in both portrait and landscape orientation - note that the landscape orientation shows the tagline "The best place in town to get books and goodies!" on the footer, above the icons:
We detect the orientation of the device with
$(window).on('orientationchange' (when the device changes orientation after the page has loaded) and
$(document).on('pagecreate' (when each page first loads).
Each handler calls method
setContent which, as in our example above, translates the on-load (numeric) and orientation-change ("portrait", "landscape") orientation values into a consistent string.
$('p.tagline').remove() to remove the tagline paragraph from all footers when in portrait orientation and uses
$("div:jqmData(role='footer')").prepend to add the tagline paragraph to all footers when in landscape orientation, first checking to see if the tagline paragraph already exists (which would be the case if the page loads while the device is already in "landscape" orientation).