WordPress.org

Ready to get started?Download WordPress

Forums

iNove
iNove menu item offset with WordPress admin bar fix (4 posts)

  1. Marko-M
    Member
    Posted 2 years ago #

    This is a good theme been using it for years, I've seen some asking about menus having wrong offset when using WordPress admin bar so here's the fix. The cumulative offset function was reading wrong offset due to HTML element having margin-top due to WP admin bar. Find following inside js/menu.js:

    cumulativeOffset = function(element) {
    	var valueT = 0, valueL = 0;
    	do {
    		valueT += element.offsetTop  || 0;
    		valueL += element.offsetLeft || 0;
    		element = element.offsetParent;
    	} while (element);
    	return [valueL, valueT];
    }

    and replace with following:

    cumulativeOffset = function(element) {
        if (element.getBoundingClientRect) {
            return getOffsetRect(element)
        } else { // old browser
            return getOffsetSum(element)
        }
    }
    
    getOffsetRect = function(element) {
        var box = element.getBoundingClientRect()
    
        var body = document.body
        var docElem = document.documentElement
    
        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
        var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
    
        var clientTop = docElem.clientTop || body.clientTop || 0
        var clientLeft = docElem.clientLeft || body.clientLeft || 0
    
        var top  = box.top +  scrollTop - clientTop
        var left = box.left + scrollLeft - clientLeft
    
        return [Math.round(left), Math.round(top)];
    }
    
    getOffsetSum = function(element) {
      var top=0, left=0
    
      while(element) {
        top = top + parseInt(elem.offsetTop)
        left = left + parseInt(elem.offsetLeft)
        element = element.offsetParent
      }
    
      return [left, top];
    }

    I've tested on Chromium and Firefox and it works great. I'm running Linux so have no IE if someone could test with IE it would be great, thanks!

    There is currentOffset function, maybe it also needs to be modified because it is also used in some cases but for me it isn't (yet) necessary.

    http://wordpress.org/extend/themes/inove/

  2. Marko-M
    Member
    Posted 2 years ago #

    Been testing, works with IE.

  3. Laurent J.V. Dubois
    Member
    Posted 2 years ago #

    Thanks Marko !

  4. Marko-M
    Member
    Posted 2 years ago #

    No problem, but just saw that there are some errors. Here's corrected code:

    cumulativeOffset = function(element) {
        if (element.getBoundingClientRect) {
            return getOffsetRect(element)
        } else { // old browser
            return getOffsetSum(element)
        }
    }
    
    getOffsetRect = function(element) {
        var box = element.getBoundingClientRect()
    
        var body = document.body
        var docElem = document.documentElement
    
        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
        var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
    
        var clientTop = docElem.clientTop || body.clientTop || 0
        var clientLeft = docElem.clientLeft || body.clientLeft || 0
    
        var top  = box.top +  scrollTop - clientTop
        var left = box.left + scrollLeft - clientLeft
    
        return [Math.round(left), Math.round(top)];
    }
    
    getOffsetSum = function(element) {
      var top=0, left=0
    
      while(element) {
        top = top + parseInt(element.offsetTop)
        left = left + parseInt(element.offsetLeft)
        element = element.offsetParent
      }
    
      return [left, top];
    }

    Enjoy!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags