WordPress.org

Support

Support » Themes and Templates » iNove » iNove menu item offset with WordPress admin bar fix

iNove menu item offset with WordPress admin bar fix

  • 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/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Been testing, works with IE.

    Thanks Marko !

    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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘iNove menu item offset with WordPress admin bar fix’ is closed to new replies.
Skip to toolbar