Swipe handling to retrofit existing slider with jQuery Mobile UI

Going Mobile

While retro-fitting a client’s website as mobile-friendly and responsive, an existing slider was requested to be outfit with swipe action on mobile devices. This made sense as the experience on mobile was lacking. You just *wanted* to swipe to the next slide.

As the site was already using jQuery and a custom built slider using WordPress’s queries, implementing jQuery Mobile UI API, I was able to quickly detect left and right swipes, and extend the logic to include mobile slider navigation.

Include the jQuery code in your page, and check out the docs:

swipeleft
swiperight

Handle the Swipe:

$(function() {
	// Bind the swipeHandler callback function to the swipe event on the slider div
	$( "#slider_frames" ).on( "swipeleft", swipeHandler );
	$( "#slider_frames" ).on( "swiperight", swipeHandler);

	// Callback function references the event target and finds swipe'#' id
	function swipeHandler( event ) {
		if(event.target.id) {
		var id = event.target.id.split('swipe'),
			id = parseInt(id[1], 10);
			slideCount = $('#slider_frames li').length;
			switch(event.type) {
				case "swipeleft":
					id = (id === 1 ? slideCount : id - 1);
					buttonaction(id);
				break;
				case "swiperight":
					id = (id === slideCount ? 1 : id + 1);
					buttonaction(id);
				break;
			}
		}
	}
}); 
 

Mobile App Notification Center – Front-End

The Notification Center of MediaFactory is a page that compliments the iOS and Andriod mobile applications. The function of the page is for producers to create their push notification

Technologies used: Core JavaScript, jQuery, Google Maps 3 API, jQuery Map UI, Filemobile API

How it all works: Working with RESTful API services that serve device location, this map populates with thumbnails that represent a device. Using the Google Map radius method which can be manipulated via form data or drag & drop, a producer can draw a circle around a group of devices, configure what they would like the push notification to say and where to swipe to, and schedule the notification to send now or in the future.

Who’s using it: Bell Media – CTV News, Network 10 Australia, USA Today, Filemobile

Notification Center

 

Google Map v3 w/ Clustering

This map is associated with UGC media geolocation metadata. It uses marker clusters to denote groups of media located close together.

Technologies used: Core JavaScript, jQuery, Google Maps 3 API, MarkerClusterer API, MediaFactory, custom made JSON

How it all works: To keep the JSON calls consolidated to a single server call, I created a custom JSON script with the proprietary Filemobile template engine (which is essentially a php abstraction layer) that gathers all the content into one script. From there, we initiate the Google Map 3 API and run it through the complimentary MarkerClusterer script that groups media with close geographic co-ordinates. For this iteration of the map, reliance on Google Maps jQuery plug-in was removed to reduce additional resource calls.

Who’s using it: Bell Media – CTV News, Hearst Communications, CBC Sports Day

CTV MyNews Map Cluster

 

Personal Website Redux

meaghanbent.com homepageI intend this to be a series of posts that roughly represent my progress through this spreadsheet’s priorities. As a web developer, it is a common feeling to know that your own profile site is out of date. In my case, it was not only out of date but it was purposefully lacking feeling. A few years back I realized that I had a vast and unrefined online footprint, exposing the growth of my career. A website from 2002 is certainly a lot different than that of 2013 and no developer wants to show off their first sites. But, what DO we want to show off? Projects we are proud of, our art, our process, what makes us unique, how we use the Internet, what drives us, where we’ve been and where we are going. All in one tight, sweet design that implies the richness of who we are in a package that is easily digested, not too stuffed with ego, and good looking enough to keep someone engaged.

Yesterday I wrote down the meat of what I intend to do. I realized that it was ego centric, an advertisement. I don’t want to advertise! Lord knows I don’t need anymore work. What I want to do is show off to my peers and motivate myself to learn. The focus of this website is to continue to expand my skills. Concepts, languages, rules, best practices, plug-ins, frameworks, libraries and fonts are all chugging along and if you wait 2 years to get to your own learning you will find that you’ve been slacking.

I’d been slacking.

Today I have a new site, which is basically just a prototype for a site but in the true spirit of Agility and iteration it is just the first step to be a playground to discover and build, a sweet pad to have pals over to, a curated collection of my work to vainly please myself and intrigue, woo and sometimes disappoint others. No worries, what’s for me is for you is for me!

See where I am today (www.meaghanbent.com) vs the document to get an understanding of how building a web project is a beautiful flower with room for unexpected growth.