JSFiddle

  • Hover to trigger display:block. #18 is the latest revision

    Example for my blog post.

    <p>
    Hover black boxes and observe how images (light gray boxes) appears on next screen (next big orange box).
    </p>
    <div class="page">
        <div class="hoverer">       
            <a href="#">
                <div class="img"></div>
            </a>
        </div>
        <div class="hoverer">
            <a href="#">
                <div class="img"></div>
            </a>
        </div>
        <div class="hoverer">
            <a href="#">
                <div class="img"></div>
            </a>
        </div>   
    </div>
    <div class="page">
        <div class="hoverer">       
            <a href="#">
                <div class="img"></div>
            </a>
        </div>
        <div class="hoverer">
            <a href="#">
                <div class="img"></div>
            </a>
        </div>
        <div class="hoverer">
            <a href="#">
                <div class="img"></div>
            </a>
        </div>    
    </div>
    
    <div class="page last-page">
    
    </div>
  • Preserve state in CSS #58 is the latest revision

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

    <p>
    When you hover first rectangle, the box will change its color from gray to red. And when you remove your ...</p>
  • Pure CSS: load images on-demand #87 is the latest revision

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

    <div class="border"></div>
    <a class="foo">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    <a class="bar">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    <a class="bar">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    <a class="bar">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    <a class="bar">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    <a class="bar">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    <a class="bar">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    <a class="bar">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    <a class="bar">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    <a class="bar">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    <a class="bar">
        <!--img src="http://bit.ly/11A2ojR"></img-->
    </a>
    
  • When 2+2=5 in Javascript

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

    var a = 2, b = 2; // or use Number(2)
    
    Number.prototype.valueOf = function(){
        return 2.5;
    };
    
    function convert() {
        return this ...
  • Opera scriptless attack #15 is the latest revision

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

    <div class="links-container">
        <a href="http://wikipedia.org" class="top-link" target="_blank">
            Wikipedia
        	<a href="http://podlipensky.com" class="bottom-link" target="_blank">Wikipedia
    	    </a>
        </a>
    </div>
  • Find maximum of sliding window in O(n) time

    Mootools 1.4.5, HTML, CSS, JavaScript

    var a = [3,10,1,3,4,7,8,5,5,10,7],
        len = a.length,
        m = 4,
        v,
        d ...
  • V8 optimizations #2 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    //create all properites of class instances inside of constructor and always in the same order
    //this will allow to prevent ...
  • What is first valueOf or toString? #5 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    var o = {
        valueOf: function() {
            console.log('valueOf');
            return "5";
        },
        toString: function() {
            console.log('toString');
            return 6;
        }
    };
    console.log("0" == o);
  • Delete operator tests

    Mootools 1.4.5, HTML, CSS, JavaScript

    var a = 1;
    //delete a; //false, because this is declared global variable, i.e. Global is used as Variable Object ...
  • isNumeric function

    Mootools 1.4.5, HTML, CSS, JavaScript

    var isnan = /^(NaN|-?Infinity)$/;
    function isNumeric(num) {
        return !isnan.test(+num);
    }