Embedded Google Place Map Boiler Plate

Confused about how to embed a google map of your google place or listed business? It’s annoying to have to work your way through google maps V3 API so I’ve written this little boiler plate which allows you to embed a map based on its place id. Additionally all you need to get going is the starting latitude and longitude of your map. You can search any google place id using this tool. Neat.

CSS3 only Battlefield 3 indicator

Here’s a loading indicator from BF3 I built using CSS3. Be warned you might have to re-run the code in the iframe or view on codepen to show the complete animation properly as the iframe can be a little buggy!

‘Chris Coyier hearted your Pen Battlefield 3 Loading Indicator’

Update: I just claimed the number one stop on the front-page and popular of codepen. Over 10k views in 3 days and still climbing, Madness!

codepen gareth weaver

Push button with css3 and jQuery

CSS3 Only

As you hover over the button a text link is revealed with a push. This is all good and well, however, as far as I can tell there is no way to achieve this effect without triggering a hover over the whole button. Currently there is no option to select a parent element using CSS so the text being pushed out of the box has to be contained within the hovered element. This means the button will push across when the mouse enters any part. This is fine if you don’t actually need to click on the content initially shown within the button.

CSS3 and jQuery

The only solution I could come up with was to trigger a class on hover using jQuery. As you can see you are now able to mouse around within the button freely. The push is activated when hovering the final element on the button.

Constrained sticky sidebar with offset using jQuery

This constrained sidebar scrolls within a parent track. When the sidebar is fixed it has a margin from the top of the page to prevent it sitting against the edge of the window. Warning, this is not mobile tested although I did write a method to remove the fixed behaviour of the sticky when the window.height is less than the total of the sticky.height + sticky.margin.

Simple Sass generated responsive grid partial

For the smaller site; if you don’t feel you need a framework or prefer to have complete control over your grid layout you can easily write your own. This snippet doesn’t have classes to push or pull columns but I’m sure it wouldn’t be difficult to implement.

BBC homepage style responsive slider built from scratch

If this doesn’t quite look right you might need to re-run the codepen as sometimes it gets a bit stuck while loading in the embed!

After BBC redesigned their homepage featuring a unique looking slider I decided to have a crack at my own version. Although the visual outputs are similar I approached the problem slightly differently and used some clever solutions to make it work responsively.

Extract Youtube and Vimeo links from a string and embed as video

This script does exactly what it says on the tin. Sometimes it’s not possible to get content delivered in the way you want. Here we’re dealing with a single string outputted from something like a database. My script matches Youtube and Vimeo links, strips them from the original string and then embeds them as a video. I haven’t written the code to embed Vimeo videos but I’m sure you can work that out.