JSFiddle

  • Jvectormap with SVG Overlay #1 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    var markerArray = [
    	{name:'Houston', latLng:[29.761993,-95.369568]},
    	{name:'New York', latLng:[40.710833,-74.002533]},
    	{name:'Kansas City ...
  • Konvajs shield logo

    Konvajs shield draw

    var $canvas_logo_width=250,$canvas_logo_height=250;
    
    $(document).ready(function(){
            var logo = $('#logo_head');
            var parent = logo.parent();
            var width = parent.width() -10 ...
  • slider_test

    jQuery 2.1.0, HTML, CSS, JavaScript

    $(document).ready(function() {
    		$( '#bb-bookblock' ).bookblock();
    });
  • Block scroll

    http://als.musings.it/#demo http://jquery-plugins.net/any-list-scroller-jquery-plugin-to-scroll-lists

    function WrityeLOg(text) {
        var res = $('#result');
        if ('undenifed' !== typeof res && '' !== text) {
            res.html(res.html()+'<br/>'+text);
        }
    }
    function SetToCenter(objid){
        var obj = $('#'+objid);
        if ('undenifed' !== typeof obj ...
  • HTML5 canvas rounded corners

    How to make accurate rounded corners using HTML5 canvas.

    var canvas = $("#myCanvas");
    var context = canvas.get(0).getContext("2d");
    
    // Set rectangle and corner values
    var rectX = 50;
    var rectY ...
  • Social Buttons using HTML only

    How to Social Buttons in HTML only using Twitter Bootstrap 3 and Font Awesome Icons (No Javascript)

    <div class="container">
        <div class="btn-group">
            <button class="btn btn-default btn-lg disabled">Share:</button> 
            <a class="btn btn-default btn-lg" target="_blank" title="Like On Facebook" href="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-thumbs-o-up fa-lg fb"></i>
            </a>
            <a class="btn btn-default btn-lg google-plus-one" target="_blank" title="+1 On Google" href="https://apis.google.com/_/+1/fastbutton?usegapi=1&size=large&hl=en&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-google-plus fa-2x google"></i>
                <span class="google">1</span>
            </a>
            <a class="btn btn-default btn-lg" target="_blank" title="On Facebook" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&t=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons">
                <i class="fa fa-facebook fa-lg fb"></i>
            </a>
            <a class="btn btn-default btn-lg" target="_blank" title="On Twitter" href="http://twitter.com/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&text=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons">
                <i class="fa fa-twitter fa-lg tw"></i>
            </a>
            <a class="btn btn-default btn-lg" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-google-plus fa-lg google"></i>
            </a>
            <a class="btn btn-default btn-lg" target="_blank" title="On LinkedIn" href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-linkedin fa-lg linkin"></i>
            </a>
            <a class="btn btn-default btn-lg" target="_blank" title="On VK.com" href="http://vk.com/share.php?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&title=Social%20Buttons%20in%20HTML%20only&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&image=http%3A%2F%2Fostr.io/img/icon_500x500.png">
                <i class="fa fa-vk fa-lg vk"></i>
            </a>
            <a class="btn btn-default btn-lg" target="_blank" title="Pin It" href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&media=http%3A%2F%2Fostr.io/img/share-bar.png&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&">
                <i class="fa fa-pinterest fa-lg pinterest"></i>
            </a>
            <a class="btn btn-default btn-lg" target="_blank" title="Surf!" href="http://surfingbird.ru/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&screenshot=http%3A%2F%2Fostr.io/img/share-bar.png&title=Social%20Buttons%20in%20HTML%20only">
                <i class="fa surfingbird fa-lg"></i>
            </a>
        </div>
    </div>
    <hr>
    <div class="container">
        <div class="btn-group">
            <button class="btn btn-default disabled">Share:</button>    
            <a class="btn btn-default" target="_blank" title="Like On Facebook" href="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-thumbs-o-up fa-lg fb"></i>
            </a>
            <a class="btn btn-default google-plus-one" target="_blank" title="+1 On Google" href="https://apis.google.com/_/+1/fastbutton?usegapi=1&size=large&hl=en&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-google-plus fa-2x google"></i>
                <span class="google">1</span>
            </a>
            <a class="btn btn-default" target="_blank" title="On Facebook" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&t=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons">
                <i class="fa fa-facebook fa-lg fb"></i>
            </a>
            <a class="btn btn-default" target="_blank" title="On Twitter" href="http://twitter.com/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&text=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons">
                <i class="fa fa-twitter fa-lg tw"></i>
            </a>
            <a class="btn btn-default" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-google-plus fa-lg google"></i>
            </a>
            <a class="btn btn-default" target="_blank" title="On LinkedIn" href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-linkedin fa-lg linkin"></i>
            </a>
            <a class="btn btn-default" target="_blank" title="On VK.com" href="http://vk.com/share.php?url=http%3A%2F%2Fostr.io&title=Social%20Buttons%20in%20HTML%20only&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&image=http%3A%2F%2Fostr.io/img/icon_500x500.png">
                <i class="fa fa-vk fa-lg vk"></i>
            </a>
            <a class="btn btn-default" target="_blank" title="Pin It" href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&media=http%3A%2F%2Fostr.io/img/share-bar.png&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&">
                <i class="fa fa-pinterest fa-lg pinterest"></i>
            </a>
            <a class="btn btn-default" target="_blank" title="Surf!" href="http://surfingbird.ru/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&screenshot=http%3A%2F%2Fostr.io/img/share-bar.png&title=Social%20Buttons%20in%20HTML%20only">
                <i class="fa surfingbird fa-lg"></i>
            </a>
        </div>
    </div>
    <hr>
    <div class="container">
        <div class="btn-group">
            <button class="btn btn-default btn-sm disabled">Share:</button> 
            <a class="btn btn-default btn-sm" target="_blank" title="Like On Facebook" href="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-thumbs-o-up fa-lg fb"></i>
            </a>
            <a class="btn btn-default btn-sm google-plus-one" target="_blank" title="+1 On Google" href="https://apis.google.com/_/+1/fastbutton?usegapi=1&size=large&hl=en&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-google-plus fa-2x google"></i>
                <span class="google">1</span>
            </a>
            <a class="btn btn-default btn-sm" target="_blank" title="On Facebook" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&t=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons">
                <i class="fa fa-facebook fa-lg fb"></i>
            </a>
            <a class="btn btn-default btn-sm" target="_blank" title="On Twitter" href="http://twitter.com/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&text=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons">
                <i class="fa fa-twitter fa-lg tw"></i>
            </a>
            <a class="btn btn-default btn-sm" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-google-plus fa-lg google"></i>
            </a>
            <a class="btn btn-default btn-sm" target="_blank" title="On LinkedIn" href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-linkedin fa-lg linkin"></i>
            </a>
            <a class="btn btn-default btn-sm" target="_blank" title="On VK.com" href="http://vk.com/share.php?url=http%3A%2F%2Fostr.io&title=Social%20Buttons%20in%20HTML%20only&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&image=http%3A%2F%2Fostr.io/img/icon_500x500.png">
                <i class="fa fa-vk fa-lg vk"></i>
            </a>
            <a class="btn btn-default btn-sm" target="_blank" title="Pin It" href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&media=http%3A%2F%2Fostr.io/img/share-bar.png&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&">
                <i class="fa fa-pinterest fa-lg pinterest"></i>
            </a>
            <a class="btn btn-default btn-sm" target="_blank" title="Surf!" href="http://surfingbird.ru/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&screenshot=http%3A%2F%2Fostr.io/img/share-bar.png&title=Social%20Buttons%20in%20HTML%20only">
                <i class="fa surfingbird fa-lg"></i>
            </a>
        </div>
    </div>
    <hr>
    <div class="container">
        <div class="btn-group">
          <button class="btn btn-default btn-xs disabled">Share:</button>   
            <a class="btn btn-default btn-xs" target="_blank" title="Like On Facebook" href="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-thumbs-o-up fa-lg fb"></i>
            </a>
            <a class="btn btn-default btn-xs google-plus-one" target="_blank" title="+1 On Google" href="https://apis.google.com/_/+1/fastbutton?usegapi=1&size=large&hl=en&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-google-plus fa-2x google"></i>
                <span class="google">1</span>
            </a>
            <a class="btn btn-default btn-xs" target="_blank" title="On Facebook" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&t=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons">
                <i class="fa fa-facebook fa-lg fb"></i>
            </a>
            <a class="btn btn-default btn-xs" target="_blank" title="On Twitter" href="http://twitter.com/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&text=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons">
                <i class="fa fa-twitter fa-lg tw"></i>
            </a>
            <a class="btn btn-default btn-xs" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-google-plus fa-lg google"></i>
            </a>
            <a class="btn btn-default btn-xs" target="_blank" title="On LinkedIn" href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
                <i class="fa fa-linkedin fa-lg linkin"></i>
            </a>
            <a class="btn btn-default btn-xs" target="_blank" title="On VK.com" href="http://vk.com/share.php?url=http%3A%2F%2Fostr.io&title=Social%20Buttons%20in%20HTML%20only&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&image=http%3A%2F%2Fostr.io/img/icon_500x500.png">
                <i class="fa fa-vk fa-lg vk"></i>
            </a>
            <a class="btn btn-default btn-xs" target="_blank" title="Pin It" href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&media=http%3A%2F%2Fostr.io/img/share-bar.png&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&">
                <i class="fa fa-pinterest fa-lg pinterest"></i>
            </a>
            <a class="btn btn-default btn-xs" target="_blank" title="Surf!" href="http://surfingbird.ru/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&screenshot=http%3A%2F%2Fostr.io/img/share-bar.png&title=Social%20Buttons%20in%20HTML%20only">
                <i class="fa surfingbird fa-lg"></i>
            </a>
        </div>
    </div>
  • Clear URL hack

    Clear empty href with # click hack

    var str = 'http://localhost/3d/admin/index.php#';
    
    var url = document.URL;
    url = str;
    if ('' !== url && -1 < url.indexOf('#')) {
        var mas = url.split('#');
        document.getElementById("result").innerHTML ...
  • Image preload #1 is the latest revision

    http://fragged.org/preloading-images-using-javascript-the-right-way-and-without-frameworks_744.html

    // assign 50 non-cache-able images via an image generator
    var imagesArray = new Array(50).join(',').split(',');
    imagesArray = imagesArray.map(function(el ...
  • Kineticjs - image

    jQuery Compat (edge), HTML, CSS, JavaScript

    window.onload = function(){
        var stage = new Kinetic.Stage({
            container : "cantainer",
            width : 400,
            height : 400
        });
        var layer = new Kinetic.Layer();
        stage ...
  • Decode to JavaScript entities

    jQuery 1.9.1, HTML, CSS, JavaScript

    function Encode(input) {
        var output = escape(input.trim()).replace(/%u/g, '\\u');
        return output;
    }
    
    function Decode(input) {
        var output = unescape ...