JSFiddle

  • D3js dagre-d3 - Clusters example

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

    // Create the input graph
    var g = new dagreD3.graphlib.Graph({compound:true})
      .setGraph({})
      .setDefaultEdgeLabel(function() { return {}; });
    
    // Here we're setting ...
  • Dropzone

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

    <form action="/file-upload" class="dropzone">
      <div class="fallback">
        <input name="file" type="file" multiple />
      </div>
    </form>
  • Character Counting Remaining on Textarea

    text area with maxlenght that feeds how many characters the user has remaining

    $(document).ready(function() {
        var text_max = 99;
        $('#textarea_feedback').html(text_max + ' characters remaining');
    
        $('#textarea').keyup(function() {
            var text_length = $('#textarea').val().length;
            var ...
  • HTML5 semantic structure

    HTML5 has seen the introduction of a number of sectioning elements that can be used to mark up your web pages. Using these elements gives more semantic meaning to your pages, allowing computer programs to better understand your content.

    
      <header>
        <h1>Welcome On Our Website!</h1>
        <p>Here is our logo and slogan.</p>
      </header>
       
      <nav>
        <header>
          <h2>Choose Your Interest</h2>
        </header>
        <ul>
          <li>Menu 1</li>
          <li>Menu 2</li>
          <li>Menu 3</li>
        </ul>
      </nav>
       
      <article>
        <header>
          <h1>Title ...</h1></header></article>
  • Handlebars runtime example

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

    var source = $("#entry-template").html();
    var context = {
      title: "My New Post",
      body: "This is my first post!"
    };
    var template = Handlebars.compile ...
  • VR 360^View browser

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

    <a-scene>
      <a-sky src="https://aframe.io/aframe/examples/_skies/puydesancy.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
    
  • Javascript filter findOneByName

    Search in objects

    var people = [{
      "name": "Bob",
      "dinner": "pizza"
    }, {
      "name": "John",
      "dinner": "sushi"
    }, {
      "name": "Larry",
      "dinner": "hummus"
    }];
    
    // Filter
    var user = people.filter(function ...
  • Online/Offline

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

    $(function() {
        $.ajaxSetup({
            timeout: 1000,
            error: function(request, status, maybe_an_exception_object) {
                if (status != 'timeout')
                    alert('Online')
                else
                    alert('Offline')
            }
        });
    
        // Register listeners
        window ...
  • Google Custom Search with autosuggest #8 is the latest revision

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

    
    
    // Make sure in jsFiddle you have selected option onLoad
    (function() {
      var cx = '017643444788069204610:4gvhea_mvga'; // Insert your own Custom Search engine ...
  • Google Custom Search with autosuggest #2 is the latest revision

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

    // Make sure in jsFiddle you have selected option onLoad
    (function() {
      var cx = '017643444788069204610:4gvhea_mvga'; // Insert your own Custom Search engine ...