CODEWITHSUNDEEP
jquerygetboundingclientrect
keerti
keerti

Reputation: 255

getBoundingClientRect() alternative

I am using document.body.getBoundingClientRect().right to find what all elements in my top navigation are going out of view, so as to hide them and put them under a 'More' dropdown. But the function does not seem to be working in safari. Is there any alternative to the function or is there some way I can make it fix in safari?

var windowRightOffset = document.body.getBoundingClientRect().right,
        elementHiddenFlag = false;

    $(".headerNav").find("li").each(function() {
        if ($(this).className !== 'more') {
            var elemRightOffset = $(this).find("a")[0].getBoundingClientRect().right;
            if (elemRightOffset > windowRightOffset) {
                $(this).hide();
                elementHiddenFlag = true;
                $(".more .moreNavItems-content").append($(this).html());
            }
        }
    });

Upvotes: 3

Views: 9183

Answers (3)

Juan Manuel Gómez Mayoral
Juan Manuel Gómez Mayoral

Reputation: 1

getBoundingClientRect is the difference between offset.top and window scrollTop. These:

console.log(document.getElementById('elem-id').getBoundingClientRect().top)
console.log($('#elem-id').offset().top-$(window).scrollTop())

show the same number.

Upvotes: 0

Dalibor Adamec
Dalibor Adamec

Reputation: 71

Ok, lets go :-)

function getBounding(name,index){
    this.ele = document.querySelectorAll(name)[index];
    this.y= this.ele.offsetTop;
    this.x= this.ele.offsetLeft;
    this.coordinates();
  }

  getBounding.prototype.coordinates = function(){
    if( this.ele.localName != "body"){
      this.ele = this.ele.offsetParent;
      this.y += this.ele.offsetTop;
      this.x += this.ele.offsetLeft;
      this.coordinates();
    } else {
      return({x:this.x,y:this.y});
    }
  }

new getBounding(".-img",0)

Upvotes: 1

MisterJ
MisterJ

Reputation: 929

Since you are using jQuery you can have a look at the position and offset functions in jQuery.

To replace your code then with jQuery you would be doing :

var aTag = $(this).find("a")[0];
var left = aTag.offset().left;
var width = aTag.find("a")[0].width();

var aTagRightOffset = width + left;

Upvotes: 2

Related Questions