JSFiddle

  • Weather

    jQuery 1.10.1, HTML, CSS, JavaScript

    <iframe id="forecast_embed1" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=54.688016&lon=25.268555&name=Vilnius&color=#00aaff&font=Georgia&units=si"></iframe>
    <iframe id="forecast_embed2" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=50.467062&lon=30.618896&name=Kiev&color=#75622B&font=Georgia&units=si"></iframe>
    <iframe id="forecast_embed3" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=53.897811&lon=27.526245&name=Minsk&color=#aaff55&font=Georgia&units=si"></iframe>
    <iframe id="forecast_embed4" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=56.96734&lon=24.11499&name=Riga&color=#4C4C73&font=Georgia&units=si"></iframe>
    <iframe id="forecast_embed5" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=54.376132&lon=18.624573&name=Gdansk&color=#00ff00&font=Georgia&units=si"></iframe>
    <iframe id="forecast_embed6" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=55.66141&lon=21.251678&name=Klaipeda&color=#0000ff&font=Georgia&units=si"></iframe>
    <iframe id="forecast_embed7" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=53.128537&lon=23.164673&name=Bialystok&color=#6B0531&font=Georgia&units=si"></iframe>
    <iframe id="forecast_embed8" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=55.614762&lon=29.970703&name=Vitebsk&color=#ff2c55&font=Georgia&units=si"></iframe>
    <iframe id="forecast_embed9" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=55.880023&lon=26.537476&name=Daugaupils&color=#1E1F73&font=Georgia&units=si"></iframe>
    <iframe id="forecast_embed10" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=57.402754&lon=18.396606&name=Gotland&color=#D15E90&font=Georgia&units=si"></iframe>
  • Konvajs shield logo #4 is the latest revision

    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 ...
  • Jvectormap with SVG Overlay #4 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 ...