#javascript

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.

https://gist.github.com/davidsword/b4969ddffee2bcdf659c79b541a259db

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.

https://gist.github.com/davidsword/765532bd4b0bf81b74c9c81060a01fa5

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:

https://gist.github.com/davidsword/76fb01f32d2dae5f002788987b542f80

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:

https://gist.github.com/davidsword/d9babb72324354f79f884ca082770e21

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.

https://gist.github.com/davidsword/86f4d4625c9b9020042b6072c57e6ad2

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

https://gist.github.com/davidsword/583f41be62fcd8f09e5431fb96aa2163

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.