Using different jQuery event listeners for responsive interaction

Exclusive offer: get 50% off this eBook here
HTML5 and CSS3 Responsive Web Design Cookbook

HTML5 and CSS3 Responsive Web Design Cookbook — Save 50%

Learn the secrets of developing responsive websites capable of interfacing with today's mobile Internet devices with this book and ebook

$26.99    $13.50
by Benjamin LaGrone | September 2013 | Cookbooks Open Source Web Development

In this article by Benjamin LaGrone, author of HTML5 and CSS3 Responsive Web Design Cookbook, will show you how to create an interactive widget that uses unobtrusive JavaScript, which uses different event listeners for desktop versus mobile devices. This article will be useful for building your own web app that can transition between the desktop and mobile versions without needing you to rewrite your entire JavaScript code. In addition, the JavaScript is unobtrusive and the page uses different CSS files through media queries for different devices.

There are a number of things we are going to build in this article, so hang on tight.

(For more resources related to this topic, see here.)

Getting Started

First we want to create JavaScript that transforms a select form element into a button widget that changes the value of the form element when a button is pressed. So the first part of that task is to build a form with a select element.

How to do it

This part is simple; start by creating a new web page. Inside it, create a form with a select element. Give the select element some options. Wrap the form in a div element with the class select. See the following example. I have added a title just for placement.

<h2>Super awesome form element</h2>
<div class="select">
<form>
<select>
<option value="1">1</option>
<option value="Bar">Bar</option>
<option value="3">3</option>
</select>
</form>
</div>

Next, create a new CSS file called desktop.css and add a link to it in your header. After that, add a media query to the link for screen media and min-device-width:321px. The media query causes the browser to load the new CSS file only on devices with a screen larger than 320 pixels. Copy and paste the link to the CSS, but change the media query to screen and min-width:321px. This will help you test and demonstrate the mobile version of the widget on your desktop.

<link rel="stylesheet" media="screen and (min-device-width:321px)"
href="desktop.css" />
<link rel="stylesheet" media="screen and (min-width:321px)"
href="desktop.css" />

Next, create a script tag with a link to a new JavaScript file called uiFunctions.js and then, of course, create the new JavaScript file. Also, create another script element with a link to the recent jQuery library.

<script src = "http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src = "uiFunctions.js"></script>

Now open the new JavaScript file uiFunctions.js in your editor and add instructions to do something on a document load.

$(document).ready(function(){
//Do something
});

The first thing your JavaScript should do when it loads is determine what kind of device it is on—a mobile device or a desktop. There are a few logical tests you can utilize to determine whether the device is mobile. You can test navigator.userAgent; specifically, you can use the .test() method, which in essence tests a string to see whether an expression of characters is in it, checks the window width, and checks whether the screen width is smaller than 600 pixels. For this article, let's use all three of them. Ultimately, you might just want to test navigator.userAgent. Write this inside the $(document).ready() function.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/
i.test(navigator.userAgent) || $(window).width()<600 ||
window.screen.width<600) {
//Do something for mobile
} else {
//Do something for the desktop
}

Inside, you will have to create a listener for the desktop device interaction event and the mouse click event, but that is later. First, let's write the JavaScript to create the UI widget for the select element. Create a function that iterates for each select option and appends a button with the same text as the option to the select div element. This belongs inside the $(document).ready() function, but outside and before the if condition.

The order of these is important.

$('select option').each(function(){
$('div.select').append('<button>'+$(this).html()+'</button>');
});

Now, if you load the page on your desktop computer, you will see that it generates new buttons below the select element, one for each select option. You can click on them, but nothing happens. What we want them to do is change the value of the select form element.

To do so, we need to add an event listener to the buttons inside the else condition. For the desktop version, you need to add a .click() event listener with a function. Inside the function, create two new variables, element and itemClicked. Make element equal the string button, and itemClicked, the jQuery object event target, or $(event.target). The next line is tricky; we're going to use the .addClass() method to add a selected class to the element variable :nth-child(n). Also, the n of the :nth-child(n) should be a call to a function named .eventAction(), to which we will add the integer 2. We will create the function next.

$('button').click(function(){
var element = 'button';
var itemClicked = $(event.target);
$(element+':nth-child(' + (eventAction(itemClicked,element) + 2) +
')').addClass('selected');
});

Next, outside the $(document).ready() function, create the eventAction() function. It will receive the variables itemClicked and element. The reason we make this function is because it performs the same functions for both the desktop click event and the mobile tap or long tap events.

function eventAction(itemClicked,element){
//Do something!
};

Inside the eventAction() function, create a new variable called choiceAction. Make choiceAction equal to the index of the element object in itemClicked, or just take a look at the following code:

var choiceAction = $(element).index(itemClicked);

Next, use the .removeClass() method to remove the selected class from the element object.

$(element).removeClass('selected');

There are only two more steps to complete the function. First, add the selected attribute to the select field option using the .eq() method and the choiceAction variable. Finally, remember that when the function was called in the click event, it was expecting something to replace the n in :nth-child(n); so end the function by returning the value of the choiceAction variable.

$('select option').eq(choiceAction).attr('selected','selected');
return choiceAction;

That takes care of everything but the mobile event listeners. The button style will be added at the end of the article. See how it looks in the following screenshot:

This will be simple. First, using jQuery's $.getScript() method, add a line to retrieve the jQuery library in the first if condition where we tested navigator.userAgent and the screen sizes to see whether the page was loaded into the viewport of a mobile device. The jQuery Mobile library will transform the HTML into a mobile, native-looking app.

$.getScript("http://code.jquery.com/mobile/1.2.0/
jquery.mobile-1.2.0.min.js");

The next step is to copy the desktop's click event listener, paste it below the $.getScript line, and change some values. Replace the .click() listener with a jQuery Mobile event listener, .tap() or .taphold(), change the value of the element variable to the string .uti-btn, and append the daisy-chained .parent().prev() methods to the itemClicked variable value, $(event.target). Replace the line that calls the eventAction() function in the :nth-child(n) selector with a more simple call to eventAction(), with the variables itemClicked and element.

$('button').click(function(){
var element = '.ui-btn';
var itemClicked = $(event.target).parent().prev();
eventAction(itemClicked,element);
});

When you click on the buttons to update the select form element in the mobile device, you will need to instruct jQuery Mobile to refresh its select menu. jQuery Mobile has a method to refresh its select element.

$('select').selectmenu("refresh",true);

That is all you need for the JavaScript file. Now open the HTML file and add a few things to the header. First, add a style tag to make the select form element and .ui-select hidden with the CSS display:none;. Next, add links to the jQuery Mobile stylesheets and desktop.css with a media query for media screen and max-width: 600px; or max-device-width:320px;.

<style>
select,.ui-select{display:none;}
</style>
<link rel="stylesheet" media="screen and (max-width:600px)"
href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<link rel="stylesheet" media="screen and (min-width:600px)"
href="desktop.css" />

When launched on a mobile device, the widget will look like this:

Then, open the desktop.css file and create some style for the widget buttons. For the button element, add an inline display, padding, margins, border radius, background gradient, box shadow, font color, text shadow, and a cursor style.

button {
display:inline;
padding:8px 15px;
margin:2px;
border-top:1px solid #666;
border-left:1px solid #666;
border-bottom:1px solid #333;
border-right:1px solid #333;
border-radius:5px;
background: #7db9e8; /* Old browsers */
background:-moz-linear-gradient(top, #7db9e8 0%,#207cca 49%,#2989d8
50%,#1e5799 100%); /* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,
color-stop(0%,#7db9e8), color-stop(49%,#207cca),
color-stop(50%,#2989d8), color-stop(100%,#1e5799)); /*
Chrome,Safari4+ */

background:-webkit-linear-gradient(top,#7db9e8 0%,#207cca 49%,
#2989d8 50%,#1e5799 100%);
/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#7db9e8 0%,#207cca 49%,#2989d8
50%,#1e5799 100%); /*
Opera 11.10+ */
background:-ms-linear-gradient(top,#7db9e8 0%,#207cca 49%,#2989d8
50%,#1e5799 100%); /* IE10+ */
background:linear-gradient(to bottom,#7db9e8 0%,#207cca 49%,#2989d8
50%,#1e5799 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient
( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 );
/* IE6-9 */
color:white;
text-shadow: -1px -1px 1px #333;
box-shadow: 1px 1px 4px 2px #999;
cursor:pointer;
}

Finally, add CSS for the .selected class that was added by the JavaScript. This CSS will change the button to look as if the button has been pressed in.

.selected{
border-top:1px solid #333;
border-left:1px solid #333;
border-bottom:1px solid #666;
border-right:1px solid #666;
color:#ffff00;
box-shadow:inset 2px 2px 2px 2px #333;
background: #1e5799; /* Old browsers */
background:-moz-linear-gradient(top,#1e5799 0%,#2989d8 50%,
#207cca 51%, #7db9e8 100%); /* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,
color-stop(0%,#1e5799),color-stop(50%,#2989d8),
color-stop(51%,#207cca),color-stop(100%,#7db9e8)); /*
Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,
#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca
51%,#7db9e8 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8
50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient
( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /*
IE6-9 */
}

How it works

This uses a combination of JavaScript and media queries to build a dynamic HTML form widget. The JavaScript tests the user agent and screen size to see if it is a mobile device and responsively delivers a different event listener for the different device types. In addition to that, the look of the widget will be different for different devices.

Summary

In this article we learned how to create an interactive widget that uses unobtrusive JavaScript, which uses different event listeners for desktop versus mobile devices. This article also helped you build your own web app that can transition between the desktop and mobile versions without needing you to rewrite your entire JavaScript code.

Resources for Article :


Further resources on this subject:


HTML5 and CSS3 Responsive Web Design Cookbook Learn the secrets of developing responsive websites capable of interfacing with today's mobile Internet devices with this book and ebook
Published: May 2013
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Benjamin LaGrone

Benjamin LaGrone is a web developer who lives and works in Texas. He got his start in programming at the age of 6 when he took his first computer class at The Houston Museum of Natural Science. His first program was “choose your own adventure book”, written in BASIC; he has fond memories of the days when software needed you to write line numbers.

Fast forward to about thirty years later; after deciding that computers are here to stay, Ben has made a career combining some of his favorite things—art and coding; creating art from code. One of his favorite projects was using the GMaps API to map pathologies to chromosomes for cancer research.

Fascinated with mobile devices for a long time, Ben thinks that the Responsive Web is one of the most exciting, yet long time coming, new aspects of web development. He now works in a SAAS development shop and is the mobile and Responsive Web evangelist for the team.

When he’s not working on some Internet project, Ben spends his time building robots, tinkering with machines, drinking coffee, surfing, and teaching Kuk Sool martial arts.

Books From Packt


Instant Migration to HTML5 and CSS3 How-to [Instant]
Instant Migration to HTML5 and CSS3 How-to [Instant]

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

Mobile First Design with HTML5 and CSS3
Mobile First Design with HTML5 and CSS3

 HTML5 and CSS3 Transition, Transformation and Animation
HTML5 and CSS3 Transition, Transformation and Animation

HTML5 Games Development by Example: Beginner’s Guide
HTML5 Games Development by Example: Beginner’s Guide

Developing Windows Store Apps with HTML5 and JavaScript
Developing Windows Store Apps with HTML5 and JavaScript

HTML5 Web Application Development By Example
HTML5 Web Application Development By Example

HTML5 Enterprise Application Development
HTML5 Enterprise Application Development


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
V
h
n
j
C
r
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software