CODEWITHSUNDEEP
javascriptmobile-safariios-3.x
newtonapple
newtonapple

Reputation: 4133

What is the equivalent of getBoundingClientRect on iPhone Mobile Safari 3?

iPhone Mobile Safari seems to be missing element.getBoundingClientRect. What is the equivalent method on iPhone Mobile Safari? This method exists on the iPad.

Upvotes: 12

Views: 12283

Answers (2)

robocat
robocat

Reputation: 5413

Edit 1: This code (webkitConvertPointFromNodeToPage) is only required for very old and out-of-date phones... see these comments.

EDIT 2: I wouldn't recommend you use this code... I recall changing it to deal with some problem with IE10 with touch zoom. I will try to remember to update the code with the fix.

Was: I think the following works on IE6+, FF3+, Safari 2+ (Desktop & Mobile), Chrome (Desktop & Android), Opera:

function offset(el) {
    var convertPoint = window.webkitConvertPointFromNodeToPage;
    if ('getBoundingClientRect' in el) {
        var
            boundingRect = el.getBoundingClientRect(),
            body = document.body || document.getElementsByTagName("body")[0],
            clientTop = document.documentElement.clientTop || body.clientTop || 0,
            clientLeft = document.documentElement.clientLeft || body.clientLeft || 0,
            scrollTop = (window.pageYOffset || document.documentElement.scrollTop || body.scrollTop),
            scrollLeft = (window.pageXOffset || document.documentElement.scrollLeft || body.scrollLeft);
        return {
            top: boundingRect.top + scrollTop - clientTop,
            left: boundingRect.left + scrollLeft - clientLeft
        }
    } else if (convertPoint) {
        var
            zeroPoint = new WebKitPoint(0, 0),
            point = convertPoint(el, zeroPoint),
            scale = convertPoint(document.getElementById('scalingEl'), zeroPoint);
        return {
            top: Math.round(point.y * -200/scale.y),
            left: Math.round(point.x * -200/scale.x)
        }
    }
}

where the following is a child of the body:

<div id="scalingEl" style="position:absolute;top:-200px;left:-200px;visibility:hidden;"></div>

Method does need some error checking (e.g. element must be in document). Scale makes it work when page zoomed, but may not be required (I did need it when testing webkitConvertPointFromNodeToPage in Windows Safari).

Upvotes: 8

redochka
redochka

Reputation: 12829

For anyone looking for the ele.getBoundingClientRect().width method on iOS 3, you can use ele.offsetWidth

 if("getBoundingClientRect" in this.container) {
    this.width = this.container.getBoundingClientRect().width ;    
}else {
    this.width = this.container.offsetWidth;    //http://help.dottoro.com/ljvmcrrn.php
}

Upvotes: 2

Related Questions