Google Maps v3 API AutoComplete Use First Result

The following script stores the first result from Google Maps v3 API AutoComplete into a hidden input, allowing you to do something with the autocomplete input field if the user decides to type their address instead of click a result. I’ve included only the extra code ontop of the normal autoComplete script.


PreLoad Images With jQuery

Another incredible snippet if you’ve got a JS app that changes images and want said images to be ready and loaded, but not overwhelm the normal page load.


Responsive Height, Maintain Ratio

Say you have an element #banner with a background-image. On a responsive design that’s width:100%; you’ll notice your image will be auto croped by the viewport change. The solution is simple: background-size: cover; but a pain that follows is the height of the element will not scale down or up with the width change, leaving this weird empty vertical gap or a very cropped image.

Here’s a fix to figure out and change the height end_h based on the current window width, keeping background-image ratio making it responsive/scalable:


This resize happens when your script is loaded, as well as on any browser resize event.

How To Make A Responsive Site

Every since the tablet boom in the last two or so years, responsive design is the only way to make sites.

As an owner of a tablet and heavy web user, it makes a world of difference on my impression of a site (and thus a company/organization) when you visit a site that’s responsive. It’s butt hurt going to (a) a full size site where you have to awkwardly zoom-in, wait for 9000 things to load, and awkwardly scroll down in a straight line with the article. Worse than loading an unresponsive full size site on a tablet is a site detecting the large iPad to be a “mobile” device, thus redirecting you to a plain-text-2005-mobile site with images no bigger than your pinky finger nail, and no visual interest at all, and no care into textography for large-mobile devices.

Responsive design is easy, and for reference here’s the framework for detecting the screen size:


I found using CSS was enough, but sometimes loading bigger images and extra things is a pain, so you can use some basic Javascript to detect the size and change things up.


To make sure the viewport is the width of the device, HTML meta tag is used:


On a foot note, to further enhance the responsive experience, optimizing the site for the visitors screen-size, I use tools like LazyLoad to ensure the site loads speedy on slower 3/4G connections, Swipey for scrolling horizontal images, and Off-canvas-navigation easy app-like navigation.