JSFiddle

  • Slick Slider Contribution

    A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

    /**
    
        This fiddle is using the latest version 
        of Slick (from master) and jQuery.
    
        If your issue occurs in older version ...
  • jQuery Simple Tabs Demo #190 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    // From http://learn.shayhowe.com/advanced-html-css/jquery
    
    // Change tab class and display content
    $('.tabs-nav a').on('click', function (event) {
        event ...
  • Responsive navigation menu (smart)

    Responsive web design (RWD) navigation menu for desktop, tablet and smartphone devices.

    // create smartbutton
    $('nav').before('<div id="smartbutton"></div>');
    $('#smartbutton').append('<div class="buttonline"></div>');
    $('#smartbutton').append('<div class="buttonline"></div>');
    $('#smartbutton').append('<div class="buttonline"></div>');
    
    // add click listener
    $('#smartbutton').click(function(event) 
    {
      $('nav').animate({height ...
  • Responsive navigation dropdown mobile #8 is the latest revision

    using css only

    <ul class="nav">
        <li><a class="btn">&#9776;</a>
            <ul class="menu">
                <li><a href="/">Home</a></li>
                <li><a href="/portfolio">Portfolio</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </li>
    </ul>
  • Combobox Kecamatan dan kelurahan

    dropdownlist filter kelurahan by kecamatan

    $(document).ready(function(){
    
    var options=  $("#kelurahan").html();
    
    filterByKecamatan();
    
    
    $("#kecamatan").change(function(e) {
    	var text = $("#kecamatan :selected").text();
    	$("#kelurahan").html(options ...
  • Codemirror 2 - use as syntax highlighter

    Example on how to use Codemirror 2 as a syntax highlighter.

    $('.code').each(function() {
        
        var $this = $(this),
            $code = $this.html(),
            $unescaped = $('<div/>').html($code).text();
       
        $this.empty();
    
        CodeMirror(this, {
            value: $unescaped,
            mode ...</div/>
  • Kendo UI Grid - External Filter #51 is the latest revision

    External Filter example for Kendo UI Grid, as documented here: http://randombrainworks.com/2014/03/15/external-filteā€¦for-kendo-grid

    // Initialize Kendo Grid from our table.
    $("#TableGrid").kendoGrid({
        sortable: true
    });
    
    // attache change event for "OS" dropdown
    $("#os").change(function () {
        applyFilter ...
  • Typing animation with pure CSS

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

    <h1>Selamat datang.</h1>
  • CSS sprite sheet animation

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

    // Sprite Sheet animation with CSS3 using the steps() feature.
    // To change the speed, just edit the ".8s" animation time.
    
    // Post ...
  • Basic Grid Load

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

    var myDataSource = new kendo.data.DataSource({
        data: {
            "people": [
                { "firstName":"John" , "lastName":"Doe" },
                { "firstName":"Anna" , "lastName":"Smith" },
                { "firstName":"Peter" , "lastName":"Jones ...