JSFiddle

  • Show Image onClick without Javascript (CSS only)

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

    <p>Click images below. Caveat: Does not work with keyboard inputs.</p>
    <div class="thumb-wrapper">
      <a href="#img1">
        <img src="https://unsplash.it/800/400?image=179" class="thumbnail">
      </a>
      <a href="#img2">
        <img src="https://unsplash.it/800/400?image=134" class="thumbnail">
      </a>
      <a href="#img3">
        <img src="https://unsplash.it/800/400?image=22" class="thumbnail">
      </a>
    </div>
    
    <img class="lightbox" id="img1" src="https://unsplash.it/800/400?image=179">
    <img class="lightbox" id="img2" src="https://unsplash.it/800/400?image=134">
    <img class="lightbox" id="img3" src="https://unsplash.it/800/400?image=22">
    
  • CSS Sunset

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

    <h1>Hip Hop, Ya Don't Stop!</h1>
    
    <p>There are so many things to worry about.</p>
    <p>Cras varius. Aliquam erat volutpat. Suspendisse ...</p>
  • Visualize OSM Maps with Google JS API

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

    // Google maps API initialisation
    var element = document.getElementById("map");
    
    var map = new google.maps.Map(element, {
        center: new google.maps ...
  • Example JS Closure

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

    function makeAdder(x) {
    
    	function add(y) {
        return y + x;
      }
    	
      return add; 
      
    }
    
    var plusOne = makeAdder(1);
    var plusTen = makeAdder(10);
    
    console ...
  • Get Elevation with Given Angle and Distance

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

    // http://stackoverflow.com/a/4715311/1171790
    function getTanDeg(deg) {
      var rad = deg * Math.PI / 180;
      return Math.tan(rad)
    }
    
    /**
     * adjacent ...
  • CSS object-fit Test

    object-fit css

    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    for (i = 0; i < getRandomInt(30, 80); i++) {
      $('#wrapper').append('<div class="image-container"><img src="https://placekitten.com/g/' + getRandomInt(250, 450) + '/' + getRandomInt(250, 450) + '" /></div>');
    }
    
  • Basic CSS3 Rotating Cube

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

    <ul class='cube'>
      <li class='face'>1</li>
      <li class='face'>2</li>
      <li class='face'>3</li>
      <li class='face'>4</li>
      <li class='face'>5</li>
      <li class='face'>6</li>
    </ul>
    
  • Make Links to Certain Points in an Audio Element with JS

    jQuery 2.1.4, HTML, CSS, JavaScript

    function playAudioAtPoint(audioId, position) {
        //console.log(audioId);
        //console.log(position);
        audioElement = document.getElementById(audioId);
        minutes_position = position.substr(0, position.indexOf ...
  • Get Browser Coords

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

    var viewport = document.createElement("meta");
    viewport.setAttribute('name', 'viewport');
    viewport.setAttribute('content', 'width=device-width, initial-scale=1');
    document.getElementsByTagName('head')[0 ...
  • Google Maps: Display InfoWindow on click

    With google maps API

    var triangleCoords = [{
      lat: 47.78945,
      lng: -121.29127
    }, {
      lat: 47.98469,
      lng: -121.13747
    }, {
      lat: 47.96998,
      lng: -120.67741 ...