Adding Orientation Events - Exercise

Contact Us or call 1-877-932-8228
Adding Orientation Events - Exercise

Adding Orientation Events

Duration: 15 to 20 minutes.

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:

orientation exercise

  1. Open Events/Exercises/orientation.html in a file editor.
  2. Add scripting to add the tagline to the footer on every page of the site when in landscape orientation and to remove the tagline when in portrait orientation.
  3. Be sure to handle the case when the user changes orientation while viewing a page as well as the case when the user opens a page for the first time.
  4. Check your work from a mobile device.



Code Explanation:

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.

setContent uses $('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).