Categories for Works

Native Slider

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.

 

November 12, 2013  Leave your thoughts

Responsive Slide Navigation with CSS only

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…)

February 10, 2013  Leave your thoughts

WordPress Plugin: Promotions

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…)

February 3, 2013  Leave your thoughts

Flashback Grid

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…)

January 7, 2013  Leave your thoughts

Submit a <form> without reloading

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.

December 5, 2012  Leave your thoughts