Responsive Javascript part 1

April 26, 2013 By Thong,

Ever want to change desktop interactions to mobile friendly events? If so, then you've come to the right place! Well kind of. The background, your design team wants a section of the site to be interactive; on desktops a hover effect is desired. But this, being a responsive site for mobile, hover events do not work. So they want it to be a click event for that resolution. For developers, a simple if statement can change that. Below I'm going to create a simple example where you can take the concept and run with it. This example will take intermediate knowledge of Javascript and jquery.

In this example

We are going to be making two simple events. Both events will trigger the same thing, doubling the size of the image. The first event will be a hover event, the second will be a click event. Then we will combine those two events to trigger off browser width.

Prep

jquery linked
a place to put your custom script

Mark up

<img src="http://lorempixel.com/400/200" class="test" /> A simple image and class to demostrate events.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

First we need to create variables to measure the original size and height of the image. Just to remember what the original measurements were so we can toggle.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

$('.test').click(function(){
	if( $(this).width == imgWidth || $(this).height() == imgHeight){
		$(this).width(imgWidth * 2 ).height( imgHeight * 2);
	}else{
		$(this).width(imgWidth).height(imgHeight);
	}
});

The click event above compares the original sizes to the variables created. If the variables are equal to the current image size, the click event will increase the width and height x2. If the sizes are different, then restore the image back to its original measurements.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

$('.test').mouseenter(function(){
	$(this).width(imgWidth * 2).height(imgHeight * 2);
});
$('.test').mouseleave(function(){
	$(this).width(imgWidth).height(imgHeight);
});

This hover event will increase the image's size when the mouse enters its box, then restores it on mouse exit. Now we have two events, a click event, which it optimal for tablets and mobile resolutions, and a hover event, for desktops and mouse interaction. Of course, having two scripts targeting the exact same object will cause some issues. So we need another IF statement to determine which event is needed based on browser size. To do this we will wrap both hover and click events into an IF statement.

var imgHeight = $('.test').height();
var imgWidth = $('.test').width();

if( $(window).width() >= 958){
	$('.test').mouseenter(function(){
		$(this).width(imgWidth * 2).height(imgHeight * 2);
	});
	$('.test').mouseleave(function(){
		$(this).width(imgWidth).height(imgHeight);
	});
}else{
	$('.test').click(function(){
		if( $(this).width == imgWidth || $(this).height() == imgHeight){
			$(this).width(imgWidth * 2).height(imgHeight * 2);
		}else{
			$(this).width(imgWidth).height(imgHeight);
		}
	});
}

In this IF statement the window's width is measured. If the window's width is greater than 958px, I chose this window size because most desktop monitors are 960px and higher in resolution, and 960px the standard I believe, use the mouse enter event. If the browser is smaller use the click event. BAH-BOOM! that's it. But there's a part 2!!! Part two is mainly for testing and people who believe testing responsive is by going 'epileptic' on the browser handles.