Jquery conflict even after following standards
<p>I have this jquery fullscreen plugin. Though I am following all the standard its giving me <code>jquery not defined</code> error. I have no idea what to do.</p>

<p>Below is the code that I have inline in html.</p>

<pre><code>(function($){
    $(document).ready(function(){

        $("#fsButton").click(function(e){
            // Use the plugin
            $("#content").fullScreen();
            e.preventDefault();
        });

    });


}(jQuery));
</code></pre>

<p>This is the plugin that is referenced in the html</p>

<pre><code>/**
 * @name        jQuery FullScreen Plugin
 * @author      Martin Angelov
 * @version     1.0
 * @url         http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
 * @license     MIT License
 */

(function($){

    // Adding a new test to the jQuery support object
    $.support.fullscreen = supportFullScreen();

    // Creating the plugin
    $.fn.fullScreen = function(props){

        if(!$.support.fullscreen || this.length != 1){

            // The plugin can be called only
            // on one element at a time

            return this;
        }

        if(fullScreenStatus()){
            // if we are already in fullscreen, exit
            cancelFullScreen();
            return this;
        }

        // You can potentially pas two arguments a color
        // for the background and a callback function

        var options = $.extend({
            'background' : '#111',
            'callback'   : function(){}
        }, props);

        // This temporary div is the element that is
        // actually going to be enlarged in full screen

        var fs = $('&lt;div&gt;',{
            'css' : {
                'overflow-y' : 'auto',
                'background' : options.background,
                'width'      : '100%',
                'height'     : '100%'
            }
        });

        var elem = this;

        // You can use the .fullScreen class to
        // apply styling to your element
        elem.addClass('fullScreen');

        // Inserting our element in the temporary
        // div, after which we zoom it in fullscreen
        fs.insertBefore(elem);
        fs.append(elem);
        requestFullScreen(fs.get(0));

        fs.click(function(e){
            if(e.target == this){
                // If the black bar was clicked
                cancelFullScreen();
            }
        });

        elem.cancel = function(){
            cancelFullScreen();
            return elem;
        };

        onFullScreenEvent(function(fullScreen){

            if(!fullScreen){

                // We have exited full screen.
                // Remove the class and destroy
                // the temporary div

                elem.removeClass('fullScreen').insertBefore(fs);
                fs.remove();
            }

            // Calling the user supplied callback
            options.callback(fullScreen);
        });

        return elem;
    };


    // These helper functions available only to our plugin scope.


    function supportFullScreen(){
        var doc = document.documentElement;

        return  ('requestFullscreen' in doc) ||
                ('mozRequestFullScreen' in doc &amp;&amp; document.mozFullScreenEnabled) ||
                ('webkitRequestFullScreen' in doc);
    }

    function requestFullScreen(elem){

        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        }
        else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        }
        else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen();
        }
    }

    function fullScreenStatus(){
        return  document.fullscreen ||
                document.mozFullScreen ||
                document.webkitIsFullScreen;
    }

    function cancelFullScreen(){
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }

    function onFullScreenEvent(callback){
        $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){
            // The full screen status is automatically
            // passed to our callback as an argument.
            callback(fullScreenStatus());
        });
    }

})(jQuery);
</code></pre>

<p>FYI I am using this in a drupal site. However this seems to be a javascript issue.</p>
