• Maps API v3 SVG markers increase in size #7 is the latest revision

    Increate marker icon size every time a marker is added to the map

    var map;
    var polyLine;
    var polyOptions;
    var iconSize = 0.5;
    function initialize() {
        var mapOptions = {
            zoom: 5,
            mapTypeId: google.maps.MapTypeId ...
  • Date / Time Playground

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

                var now = new Date();
                var month = now.getMonth() + 1;
                var day = now.getDate();
                var year = now.getFullYear()
                var time = ('0 ...
  • 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


    // 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

    Source Idee: http://lea.verou.me</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 class="toggle">
        <input type="checkbox">
        <label data-off="&#9724;" data-on="&#9654;"></label>
    <span class="toggle">
        <input type="checkbox">
        <label data-off="Stop" data-on="Play"></label>
  • 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

    <div class="ol-full-screen ol-control">
        <button type="button" title="Toggle full-screen">↔</button>
    2. CSS Rotation
    <div class="ol-full-screen ol-control">
        <button type="button" title="Toggle full-screen"><span>↔</span></button>
    <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 #8 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 ...