Create a "Give me directions" button using jQuery and HTML5 Geolocation

17 May 2013, Danny Connell

An upcoming mobile website required the inclusion of a "Give me directions" button. I.E. a button that the mobile user can click to see directions from their current location to a given destination.

Here is my simple custom solution.

View demo page | Download demo page

HTML

Firstly, I added a button to the page for the user to click:

<a href="#" class="get-directions">Give me directions to Reading Room Manchester</a>

JavaScript

I included jQuery, and began by creating variables for the starting location and destination:

$(document).ready(function() {

var startingLocation;
var destination = "reading+room+manchester"; // replace this with any destination

});

Next I attach a click event to my button:

$('a.get-directions').click(function (e) {

});

Within this click function, I use HTML5 geolocation to calculate the user's latitude and longitude, combine these two values into a string, and send the starting location and destination to a function:

// check if browser supports geolocation
if (navigator.geolocation) {

// get user's current position
navigator.geolocation.getCurrentPosition(function (position) {

// get latitude and longitude
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
startingLocation = latitude + "," + longitude;

// send starting location and destination to goToGoogleMaps function
goToGoogleMaps(startingLocation, destination);

});

}

Finally, within the goToGoogleMaps function, I send the user to Google Maps, along with the query needed to get the directions:

// go to Google Maps function - takes a starting location and destination and sends the query to Google Maps
function goToGoogleMaps(startingLocation, destination) {
window.location = "https://maps.google.co.uk/maps?saddr=" + startingLocation + "&daddr=" + destination;
}

Fallback for browsers without Geolocation

What if the user's browser doesn't support Geolocation? Or they selected 'no' to the prompt asking to use their location? I wanted it to still work. Upon clicking the button, the user would be presented with a warning, along with a text input. The user could then manually enter their postcode, click the button and still get directions.

Here is the HTML for the warning and input (this is hidden by default in the CSS):

<div class="no-geolocation">
<p class="warning">Your browser does not support Geolocation. Please enter your postcode and click the button again.</p>
<input type="text" placeholder="Enter postcode or address" class="manual-location">
</div>

And here is the JavaScript for the fallback:

// get manually entered postcode
startingLocation = $('.manual-location').val();

// if user has entered a starting location, send starting location and destination to goToGoogleMaps function
if (startingLocation != '') {
goToGoogleMaps(startingLocation, destination);
}
// else fade in the manual postcode field
else {
$('.no-geolocation').fadeIn();
}

View demo page | Download demo page

Read more

Scroll to any element using jQuery

12 March 2012, Danny Connell

In today's front-end landscape of responsive, mobile-friendly sites, I'm finding a frequent need to scroll the user (either up or down) to various different elements on the page. This article will show you a simple, lightweight way to do this...

'Back to top' buttons, 'Jump to menu' buttons, 'Jump to widget' links... there are now all sorts of situations where you would want to smoothly scroll the user to a certain element on the page.

There has been a jQuery plugin around for quite a while that can accomplish this, Arial Flesler's ScrollTo.

This is a wonderful plugin that allows you to scroll in all sorts of different ways.

However, if all you want to do is scroll up or down to an element, by using a selector, then you may prefer this lightweight function:

function scrollToElement(selector, time, verticalOffset) {
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('html, body').animate({
scrollTop: offsetTop
}, time);
}

Here's how you might use it to scroll to an element with an ID of 'content' when the user clicks a 'Jump to content' button:

$('a.jump-to-content').click(function () {
scrollToElement('#content');
});

You can also specify the duration of the scroll animation (in miliseconds):

scrollToElement('#content', 500); // scroll the element #content, and take 500ms to get there

And you may also want to specify a vertical offset. The following will scroll the user to 150px above the #content element:

scrollToElement('#content', 500, -150); // scroll to 150px before the element #content, and take 500ms to get there

Show me the god damn demo page already.

Read more

Developing an iPhone App using HTML, CSS, JavaScript and PhoneGap - From Concept to App Store

1 August 2011, Danny Connell

Speed Distance Time CalculatorHi. I'm a front-end web designer/developer by trade. When I first heard that I could develop iPhone apps using my existing skills (HTML, CSS, JavaScript), I couldn't wait to get stuck in. Having just got my first app, Speed Distance Time Calculator into the App Store, I thought I'd share an overview of my journey, right from coming up with a concept, through to going live in the App Store.

I feel this sort of overview would've been very helpful to me before I started.

I'll discuss the technologies and resources I used to build a web-app, how I converted the web-app into a native app, submission to iTunes and many of the stumbling blocks and realisations I had along the way.

Read more