Better radio and checkbox replacement with jQuery

I made an update to this checkbox replacement script. Now with inputs nested inside label elements the script listens for change events on the inputs and updates the replaced checkbox accordingly. This script is designed to easily replace all checkboxes and radio inputs across a whole site with just 12 lines of coffeescript. It’s a much better way of doing it as you can toggle your checkboxes with javascript and not have to worry about whether your input replacement is in sync.

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.

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.

Simple jQuery lightbox concept

Here’s a simple lightbox concept built from scratch using jQuery. It loads a larger gallery image from a link around the smaller thumbnail image. You can close the lightbox overlay by clicking the cross, on the overlay or buy using the esc key. If you’re keen to use this don’t forget to add in a loading indicator.

Simple image scroller

Sometimes you’ll learn a lot more writing code yourself than by defaulting to a plugin. You’ll also have a lot more control over the final product while keeping things light weight. I wrote this image crossfader from scratch and kept it super simple. Check it out!