JSFiddle

  • JS Dynamic Quiz with jQuery #2 is the latest revision

    From the course: http://javascriptissexy.com/how-to-learn-javascript-properly/

    /**
     * Created with JetBrains WebStorm.
     * User: pwanwu
     * Date: 18/09/2013
     * Time: 17:41
     * To change this template use File | Settings ...
  • Knockoutjs.com - Hello World Example

    http://knockoutjs.com/examples/helloWorld.html

    // Here's my data model
    var ViewModel = function(first, last) {
        this.firstName = ko.observable(first);
        this.lastName = ko.observable(last ...
  • hover underline animation

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

    <p>
    
    Source Idee: http://lea.verou.me</p>
    <p>
    
    </p>http://dabblet.com/gist/1dd8d43442e11b7c5822ae19ad10e3e9</p>
    
    <p>Hover over the following links:
    <p><a href="http://lea.verou.me" class="left">From left</a>
    <p><a href="http://lea.verou.me" class="center">From center ...</a></p></p></p>
  • Pure CSS3 Toggle Button

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

    <div id="switcher">
    
    <span class="toggle">
        <input type="checkbox">
        <label data-off="&#10006;" data-on="&#10004;"></label>
    </span>
    
    <span class="toggle">
        <input type="checkbox">
        <label data-off="&#9724;" data-on="&#9654;"></label>
    </span>
    
    <span class="toggle">
        <input type="checkbox">
        <label data-off="Stop" data-on="Play"></label>
    </span>
    
    </div>
  • css text-shadow test

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

    <div style="background-color: #00FFE9; display: table; width: 100%; height: 100%;"><span style="display: table-cell; text-align: center; vertical-align: middle;" class="number2">3</span></div>
  • Fullscreen button

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

    1.
    <div class="ol-full-screen ol-control">
        <button type="button" title="Toggle full-screen">↔</button>
    </div>
    <br>
    
    2. CSS Rotation
    <div class="ol-full-screen ol-control">
        <button type="button" title="Toggle full-screen"><span>↔</span></button>
    </div>
    
    
    <p>3. A simpler solution proposed by @ahocevar (https://github.com/openlayers/ol3/pull/4449)</p>
    <img src="http://markussteiger.ch/blog/wp-content/uploads/2015/11/character-arrow.jpg" />
  • Word / Character Count jQuery

    Set CSS classes depending Word count, Word length and Character count

    // Find longest Word
    
    var sentence = $('#title').text();
    var parts = sentence.match(/\w[a-zA-ZäöüÄÖÜ._-]{1,}/gi);
    var longestIndex = -1;
    var ...
  • GEOJSON Points with Infowindow #7 is the latest revision

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

    // GEOJSON Points with Infowindow
    
    var infowindow = new google.maps.InfoWindow();
    
    function initialize() {
        features = [];
        map = new google.maps.Map(document.getElementById ...
  • Example URL Directions Google Maps #8 is the latest revision

    Set Google Directions Link via URL

    <h1>Examples</h1>
    
    <ul>
    <li>Walking
    <a href="https://maps.google.com/maps?saddr=47.376882,8.516434&amp;daddr=47.352848, 8.552781&amp;dirflg=w" target="_blank">Show in Google Maps</a>
        <p>Start: saddr=47.376882,8.516434</p>
        <p>End: daddr=47.352848, 8.552781</p>
        <p>Travel Mode ...</p></li></ul>
  • CSS3 Animation Fade Out and Scale #16 is the latest revision

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

    <div class="fade-out one"></div>