Categories for Works

Breadcrumbs demo screenshot

Download Breadcrumbs for IE9+, Safari, Chrome, Firefox.

native-slider

CSS-only slider with native browser scrolling and JS navigation buttons. Optimised for mobile without mobile-specific code. Multiple sliders on one page. <2K zipped.

Usage: Add native-slider.css and native-slider.js to a jQuery-enabled page and wrap the slides with a “.slider” container.

How it works: The slides are lined up horizontally with “display: inline-block” and prevented from dropping below by “white-space: normal”. The sliding action is native browser scrolling.

World of Games is a virtual world full of composite locations, characters and events from video games, driven by game logic. (more…)

Checkbox state detection + media queries + CSS animation – JavaScript = Slide Nav. On desktop it looks like normal horizontal navigation, but on mobile devices it is transformed into a sliding navigation like in the Facebook mobile app.

(more…)

Transform your ‘Twenty Twelve’ WordPress to a clean promotions site. Add images as a gallery, insert them individually or make a slider by using post category Slider. The gallery now has custom image link.

(more…)

The same shot from Nikon D7000 as a still photo and a video frame. (Photo resized to video size)

Photo @ 100%

(more…)

The great number of Responsive Web Design grids can be confusing and intimidating to use. Percentage-based floating columns can drop down in certain resolutions and browsers. The flex box method is unfinished and currently has 3 different conflicting implementations. With a little help from the table-based past, here is the Flashback Grid, whose columns behave like table cells. Boxes never drop below each other and the browser does all width calculations, instead of forcing us to write complex percentages in CSS. (more…)

If you have a form on your PHP-enabled website and want to submit it without reloading the page,

1. Add this below the form:

    

   <div class="success" style="display:none"> Thank you for submitting. </div>
   
   <script type="text/javascript">
       if (typeof jQuery == 'undefined') {
           document.write('<script src="' + ( (location.protocol == 'file:') ? 'http:' : location.protocol ) + '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">\x3C/script>');
       }
   </script>
   
   <script src="send-form.js" type="text/javascript"></script>

2. Upload the contents of send-form.zip (2 KB) to your page location.

Enjoy!

Thanks to phpmind for the original code.