Skip to main content
edited tags
Link
200_success
  • 144.1k
  • 22
  • 188
  • 473
added 12 characters in body; edited title
Source Link
Jamal
  • 34.9k
  • 13
  • 133
  • 237

Everything you might want to know about an element - faster / less redundant?

https://jsfiddle.net/googabeast/h8rqnh83/jsFiddle

Everything you might want to know about an element - faster / less redundant?

https://jsfiddle.net/googabeast/h8rqnh83/

Everything you might want to know about an element

jsFiddle

Source Link

Everything you might want to know about an element - faster / less redundant?

I am working with a lot of DOM manipulation and need to know several values of an element to determine its position within the DOM and I have written the following to help scrape several of the bits of information I need to proceed.

To me this looks very heavy and there might be some room to help improve the speed / accuracy of returning this information.

Any help in speeding this up or helping with the redundancy issues would be most helpful.

https://jsfiddle.net/googabeast/h8rqnh83/

$.fn.info = function(){
    var $el = this,
        obj = {
            _css: {},
            $win: $(window),
            $doc: $(document),
            x: Math.floor($el.offset().left),
            y: Math.floor($el.offset().top),
            w: Math.floor($el.width()),
            h: Math.floor($el.height()),
            tag: $el.prop("tagName").toLowerCase(),
            computedCss: function(){
                var css = ["width", "height", "float", "color", "font-size", "position", "top", "right", "bottom", "left", "margin-top", "margin-right", "margin-bottom", "margin-left", "color", "display", "visibility"];
                for(var i = 0; i < css.length; i++){
                    if(css[i].indexOf("-") > -1){
                        var temp = css[i].replace("-", "_");
                        this._css[temp] = $el.css(css[i]);
                    }else{
                        this._css[css[i]] = $el.css(css[i]);
                    };
                    
                };
                return this;
            },
            checkVisibility: function(){
                this.visible = (((this.y + this.h) <= (this.top + this.winH)) && (this.y >= this.top));
                this.partial = ((this.y <= (this.top + this.winH)) && ((this.y + this.h) >= this.top));
                return this;
            },
            init: function(){
                this.winH = Math.floor(this.$win.height());
                this.winW = Math.floor(this.$win.width());
                this.docH = Math.floor(this.$doc.height());
                this.docW = Math.floor(this.$doc.width());
                this.top = this.$win.scrollTop();

  /* :compute the box-modal a,b,c,d with {x,y} values: */
  /* a----b */  this.a = { x:this.x, y:this.y };
  /* |    | */  this.b = { x:this.x+this.w, y:this.y };
  /* |    | */  this.c = { x:this.x, y:this.y+this.h };
  /* c----d */  this.d = { x:this.x+this.w, y:this.y+this.h };

                this.computedCss();
                this.checkVisibility();
                return this;
            }
        }.init();

    return obj;
};