JQuery Plugin: Mobile Page Switcher

After I created the mobile sub-domain for GrasshopperPebbles, I needed a solution that would allow a user to switch to the mobile view at any time. I prefer giving the user the option to switch to a mobile view rather than a device-sniffing approach. So I created simple jQuery Plugin (gpMobilePageSwitcher) that displays an icon and a link to the mobile view. But the plugin doesn’t just take the user to the home page of the mobile sub-domain, it takes the user to the mobile view of the same page they are viewing.

The gpMobilePageSwitcher doesn’t work for all situations. It was created for those sites which have a duplicate url structure on a sub-domain.

So if you click on the mobile page switcher while on:
http://grasshopperpebbles.com/mobile-theme-generator/
You will be taken to:
http://m.grasshopperpebbles.com/mobile-theme-generator/

Using gpMobilePageSwitcher

To use the plugin, you only need to supply a single option, the domain name of the mobile view.

?View Code JAVASCRIPT
$('.mobile-switcher-cntnr').gpMobilePageSwitcher({
      mobile_domain: 'http://m.grasshopperpebbles.com',	
});

A link will be created in the mobile-switcher-cntnr. This container can be placed anywhere on your site (but it is probably best to place it at the top of the page).

gpMobilePageSwitcher Options

The mobile page switcher plugin has very few options, most are related to styling.

url_exceptions: An associative array of url exceptions. There may be locations on your primary domain that do not make exactly the same as the sub-domain. Create an associative array of the url (without the domain).

?View Code JAVASCRIPT
ar['/primary-domain/path/about'] = '/sub-domain/path/about-us';

So the about page on the primary domain will map to the about-us page of the sub-domaim. When I tested this functionality locally, I mapped a local WordPress archive page to the jQuery hash on the GrasshopperPebbbles mobile sub-domain.

?View Code JAVASCRIPT
ar = [];
ar['/grasshopperpebbles_local/wordpress/archives'] = '#mobile-pebbles-archives';
ar['/grasshopperpebbles_local/wordpress/links'] = '#mobile-pebbles-links';
$('.mobile-switcher-cntnr').gpMobilePageSwitcher({
      mobile_domain: 'http://m.grasshopperpebbles.com',
      url_exceptions: ar,
});

Note: The jQuery hash was created by the Mobile Theme Generator for WordPress.

cntnr_class: The plugin container. The default:

?View Code JAVASCRIPT
cntnr_class: 'gp-mobile-switcher-wrapper'

display_label: By default, the link text to the mobile page view is: “Switch To Mobile View”, but obviously, you can change it to anything you wish.

icon_class: The page switcher displays both an icon and text (either can be clicked). The plugin comes with an icon that can be displayed in 13 different colors and 3 sizes. But of course, you can choose to use your own icon. The default setting for this option is:

?View Code JAVASCRIPT
icon_class: 'gp-mobile-switcher-icon gp-mobile-switcher-30 gp-mobile-switcher-white'

gp-mobile-switcher-icon points to the icon sprite.
gp-mobile-switcher-30 is the 30px (height) icon. There are two additional height options:

75px – gp-mobile-switcher-75
50px – gp-mobile-switcher-50

gp-mobile-switcher-white is the white icon. There are 12 additional colors.

gp-mobile-switcher-black (black)
gp-mobile-switcher-red (red)
gp-mobile-switcher-blue (blue)
gp-mobile-switcher-grey (#999999)
gp-mobile-switcher-green (#008000)
gp-mobile-switcher-yellow (#ffff00)
gp-mobile-switcher-teal (#008080)
gp-mobile-switcher-orange-dark (#ff6600)
gp-mobile-switcher-pink (#ffaaaa)
gp-mobile-switcher-navy (#000080)
gp-mobile-switcher-lime (#00ff00)
gp-mobile-switcher-orange (#ff7f2a)

text_display_class: The icon comes with 3 sizes. The text classes style the display_label appropriate for each icon size. The default:

?View Code JAVASCRIPT
text_display_class: 'gp-mobile-switcher-text-white gp-mobile-switcher-text-30'

That’s it. The gpMobilePageSwitcher is a really a simple plugin. I’m working on another jQuery plugin that I hope to release fairly soon. You can see examples of the plugin on the top of my site. The plugin can be downloaded from Github.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks