Show element in full screen using jQuery

While developing a module for Dotnetnuke I encountered a need to show a single element/control in fullscreen. This can be done using a set of complicated codes in the server. However, this can easily be achived in the client using jQuery. The idea is to iterate all the parents of the selected element and hide all their siblings. The code below will do just that.

(function($){

    $.fn.ShowElementInFullScreen = function() {

        return this.each(function(){

            $(this).parents().each(function(i){$(this).siblings().hide()});

        });

    };

})(jQuery);

After inserting the code above to your page you can now call the function using the code below.

jQuery('#YourElementId').ShowElementInFullScreen();

I have no public url to demostrate this yet, but I will post as soon as I have one. If you happen to use this code please post a comment with the URL below for others to see how this works.

Show only the content of this entry. Hide the rest.
Show Me Reload Entry


Thanks,
v