Need to understand a portion of jquery code?

Question

here i am posting a jquery code which is working but few lines are not clear to me . js fiddle link.

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

EDIT 1

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

Spokey · Accepted Answer · 2014-11-26 12:50:41Z

1

For normal ones you can add them on the fly. They don't have to be declared from the start with the object. If they are they'll only be overwritten.

So you could either add everything you want from the start...

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

.. or create it as you go

var data = {};

data.UPSContainer = {};

data.UPSContainer.height = 100;
data.UPSContainer.width = 100;

data.isAnimating = false;

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

answered Nov 26, 2014 at 12:50

Spokey

11k2 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Over a year ago

thanks for nice reply. please see my edit 1 because i need few more help.

Quentin · Accepted Answer · 2014-11-26 12:42:49Z

1

it seems that we can add any property to any object with any name at runtime in javascript

Yes. You can. You just assign the new values.

where these two property comes windowWidth & windowHeight

From the code you are asking about. The assignment creates those properties.

answered Nov 26, 2014 at 12:42

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

DhruvPathak · Accepted Answer · 2014-11-27 08:54:27Z

1

In ECMAscript3 and ECMAScript5 , any property can be added to any object, either by dot assignment, or through an array type notation.

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

or

data['windowWidth'] = parseInt($els.window.width());

create 'windowWidth' property for the data object. In ECMA5 , this behaviour can be altered by following function:

Object.preventExtensions( obj )

and you can use Object.isExtensible( obj ) to check the current behaviour of that object. If you try adding property to such an object for which extensions have been prevented, you would get an error in strict mode.

For your second question, in javascript array is also an object having properties , date is also an object , hence you can add properties to the array.

edited Nov 27, 2014 at 8:54

answered Nov 26, 2014 at 12:51

DhruvPathak

43.4k17 gold badges125 silver badges180 bronze badges

1 Comment

Thomas Over a year ago

thanks for nice reply. please see my edit 1 because i need few more help.

Collectives™ on Stack Overflow

Need to understand a portion of jquery code?

EDIT 1

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT 1

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related