JSFiddle - React, Tailwind, and code Playground

by jasonhsu

HTML

<a href="http://en.wikipedia.org/wiki/Parallax_scrolling">Parallax scrolling</a> is an awesome technique.

JavaScript

/*

(function ( $ ) { }( jQuery ));

The $ variable is very popular among JavaScript libraries, and if you're using another library with jQuery, you will have to make jQuery not use the $ with jQuery.noConflict(). However, this will break our plugin since it is written with the assumption that $ is an alias to the jQuery function. To work well with other plugins, and still use the jQuery $ alias, we need to put all of our code inside of an Immediately Invoked Function Expression, and then pass the function jQuery, and name the parameter $

$.fn

The jQuery object gets these methods from the $.fn object. This object contains all of the jQuery object methods, and if we want to write our own methods, it will need to contain those as well.

this

in javascript (usually) represents a reference to the object that invoked the current function.

*/
(function ( $ ) {
    $.fn.touchMe = function() {
        this.css({
            "color":"orange",
            "background-color": "gray",
            "font-size": "xx-large"
        });
        /*   
            this.css({
                color:"orange",
                backgroundColor: "gray",
                fontSize: "xx-large"
            });
            
            // Javascript interprets the hyphen as a subtraction operation. The following is wrong way.
            // this.css({
            //    color:"orange",
            //    background-color: "gray",
            //    font-size: "xx-large"
            // });
            
        */        
    };
}( jQuery ));

// select all hyperlink and run the procedure of touchMe function
$("a").touchMe();