JSFiddle

  • Marka sandbox

    Play with various Marka[1] icon transformations. Assets are hotlinked. --- [1]: http://fian.my.id/marka/

    var m = new Marka('#icon');
    m.set('circle').color('#FF6600').size('50');
  • Sliding Table Columns

    Animatedly slide a table column open and closed

    var values = {
        left: ['0%', '50%'],
        right: ['100%', '50%']
    };
    var nextValue = function(side) {
        var value = values[side].shift();
        values[side].push ...
  • Random Colors generator

    jQuery 2.1.0, HTML, CSS, JavaScript

    var refreshColors = function(divs) {
        _.each( divs, function(div) {
            var color = tinycolor.random();
            $(div).animate({
                backgroundColor: color.toRgbString()
            }, 500, 'easeInOutQuint ...
  • Multiple Independent sliders

    vidur.io/for-sale

    $('.slider-control.prev').click(function() {
        var parent = $(this).parent();
        var currentSlide = parent.find('.slide.visible');
        var prevSlide = currentSlide.prev('.slide');
        var ...
  • Stripe Animations #2 is the latest revision

    jQuery 2.1.0, HTML, CSS, JavaScript

    $(document).ready(function() {
        $(window).click(function() {
            var stripe = $('#stripe');
    
            if(!stripe.hasClass('visible')) {
                stripe.addClass('visible');
            }
        });
    });
  • Nested fixed width columns

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="container">
        <div class="fixed-left-bit">&nbsp;</div>
        <div class="right">
            &nbsp;
            <div class="fixed-right-bit">&nbsp;</div>
        </div>
    </div>
  • Grid Builder

    js and css. (no jquery)

    function buildGrid(numRows, numCols, rHeight, cHeight) {
        var rowHeight = rHeight || Math.floor((window.innerHeight || document.documentElement.offsetHeight) / numRows);
        var colWidth = cHeight ...
  • Google Maps JS - Detection

    Source: http://tech.bellycard.com/blog/where-d-the-water-go-google-maps-water-pixel-detection-with-canvas/

    $(function(){
       var latlon = "40.7300694,-74.0024224"; // Sample Lat,Long (Manhattan NYC)
    	var distance_between_people = 40; // Keep 40 pixels between people ...
  • Horizontally align divs #122 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="start" class="side">
        <span>1</span>
        <span>Lower</span>
    </div>
    <div id="range"></div>
    <div id="end" class="side">
        <span>10</span>
        <span>Higher</span>
    </div>
  • Win8 Fix - Line up Textarea #9 is the latest revision

    jQuery 1.6.4, HTML, CSS, JavaScript

    $("textarea[name='thing']").focus(function() {
        $(this).css( 'margin-bottom', '500px' );
        window.location.hash = '#prompt';
    });
    
    $("textarea[name='thing']").focusout(function() {
        $(this).css ...