[RESOLVED]Need to understand a portion of jquery code?

here i am posting a jquery code which is working and few area is not clear to me . js fiddle link
http://jsfiddle.net/p4e4psg4/5/

full code

HTML
--------
<form method="post" action="WebForm1.aspx" id="ctl00">
    <input type="submit" name="Button1" value="Fly DIV" id="Button1" class="toggleUPSContainer" />
</form> 

CSS
----
#UPSContainer{
    position: absolute;
    display: none;
    background:red;
    height:0;
    width:0;
}


javascript
--------------
$(document).ready(function () {
    var $els = [];
    var data = {
        "UPSContainer": {
            "height" : 100,
            "width" : 100
        },
        "isAnimating" : false
    };
    $els.window = $(window);
    $els.form = $('#ctl00');
    $els.toggleUPSButtons = $('.toggleUPSContainer');
    
    function addUPSOverlay(){
        $els.form.append('<div id="UPSContainer"></div>');
        $els.UPSContainer = $('#UPSContainer');
    }
    
    function getNewWindowCorner(){
        data.windowWidth = parseInt($els.window.width());
        data.windowHeight = parseInt($els.window.height());
        if($els.UPSContainer.is(':hidden')){
            $els.UPSContainer.css({
                top: data.windowHeight + 'px',
                left: data.windowWidth + 'px'
            });
        }else{
            $els.UPSContainer.css({
                left: ((data.windowWidth - data.UPSContainer.width) / 2) + 'px',
                top: ((data.windowHeight - data.UPSContainer.height) / 2) + 'px'
            });
        }
    }
    
    function containerOpenComplete(){
        // do what you want here when opening complete
    }
    
    function containerCloseComplete(){
        // do what you want here when closing complete
    }
    
    function toggleUPSOverlay(e){
        e.preventDefault();
        if(!data.isAnimating){
            if($els.UPSContainer.is(':hidden')){ // currently closed so open
                $els.UPSContainer.show();
                $els.UPSContainer.animate({
                        left: ((data.windowWidth - data.UPSContainer.width) / 2) + 'px',
                        top: ((data.windowHeight - data.UPSContainer.height) / 2) + 'px',
                        height: data.UPSContainer.height + 'px', 
                        width: data.UPSContainer.width + 'px'
                }, 200, function(){
                    containerOpenComplete();
                });
            }else{ // currently open so close
                $els.UPSContainer.animate({
                        left: data.windowWidth + 'px',
                        top: data.windowHeight + 'px',
                        height: 0 + 'px', 
                        width: 0 + 'px'
                    }, 200,
                    function () {
                        $els.UPSContainer.hide();
                        containerCloseComplete();
                    });
            }
        }
    }
    
    function attachEvents(){
        $els.window.on('resize', getNewWindowCorner);
        $els.toggleUPSButtons.on('click', toggleUPSOverlay);
    }
    
    function initialize(){
        addUPSOverlay();
        getNewWindowCorner();
        attachEvents();
    }
    
    initialize();
});
   


this function’s code is not clear

function getNewWindowCorner(){
        data.windowWidth = parseInt($els.window.width());
        data.windowHeight = parseInt($els.window.height());
    }

just see windowWidth & windowHeight potion

var data = {
        "UPSContainer": {
            "height" : 100,
            "width" : 100
        },
        "isAnimating" : false
    };

data has been declared as object and it has property like height, width & isAnimating etc but how we can add two new property called
windowWidth & windowHeight to data object ??

just seeing the below code it seems that we can add any property to any object with any name at runtime in javascript and here we are storing value to
windowWidth & windowHeight property.

        data.windowWidth = parseInt($els.window.width());
        data.windowHeight = parseInt($els.window.height());

so just see my whole code and tell me from where these two property comes
windowWidth & windowHeight
? thanks

mou_inn

so just see my whole code and tell me from where these two property comes
windowWidth & windowHeight
? thanks

If you notice in the beginning of your function declaration, you have an anonymous object called data which stores a few properties :

var data = { "UPSContainer": { "height" : 100, "width" : 100 }, "isAnimating" : false };

One of the benefits of an object like this is that you don’t necessarily need to define all of your properties when you initialize it. You can easily add other properties (like windowHeight or windowWidth) by simply setting them. This is done when
your getNewWindowCorner() method is called :

data.windowWidth = parseInt($els.window.width());
data.windowHeight = parseInt($els.window.height());

What the line above is doing is storing the height and width of the current window within your data object (so it can be accessed via data.windowHeight and data.windowWidth respectively).

If the part that you are confused on is the actual $els declaration, I’ll elaborate a bit more on that. $els is also defined at the beginning of your page and is simply an array :

var $els = [];

However, much like our data object, you can associate values to it as well. In this case, the current window is associated with it using the following call :

$els.window = $(window);

Since this is done at the beginning, when you call the line in question :

data.windowWidth = parseInt($els.window.width());
data.windowHeight = parseInt($els.window.height());

All this is doing is storing the dimensions of your current window in your data object. It could easily be rewritten as :

data.windowWidth = $(window).width();
data.windowHeight = $(window).height();

thanks for reply.

Need bit more help. what it is called in js

var $els = [];

? is it array or object? what is the difference between var

$els = []; and var els = {};

? if this is array

var $els = [];

then how one can push anything into array like this way

$els.window = $(window); or $els.body = $('body');

. please help me understand the usage with small sample. thanks

mou_inn

Need bit more help. what it is called in js

var $els = [];

Technically that is declared as an array, but since Javascript essentially treats everything as an object, it allows you to set any type of arbitrary properties on it (much like you would using the other "var x = { … }" syntax).

mou_inn

$els = []; and var els = {};

? if this is array

While these both essentially declare the same thing (as mentioned earlier "[]" and "{}" both are essentially objects / functions), the difference here comes down to scope. When you use the var keyword, you are scoping the variable to it’s current
scope (e.g. if it is used within a function, it will only exist within that function). However, if you don’t use var, your variable will be considered global :

// Global object
$els = [];

// Scoped object
var els = {};

You can
read more about this here
.

mou_inn

then how one can push anything into array like this way

$els.window = $(window); or $els.body = $('body');

. please help me understand the usage with small sample. thanks

It’s just part of how Javascript works and sadly it can often be abused. Generally, if you are planning on using this same type of syntax, you should create a proper object and not an array.

Leave a Reply