Single Element CSS3 Only Checkbox On/Off Replacement Toggle

Everyone has beef with checkboxes but in modern browsers it’s super easy to use the click event on the label and hide the actual checkbox. I’ve used a single element with :before and :after pseudo elements to render an on/off toggle switch which provides much better clarity and consistency across browsers.

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.

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.