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.

 

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. Continue reading Flashback Grid

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.