Tags

, , , , ,

SharePoint integrates some nice and useful JavaScript function which can a developer’s life easier. I will enumerate them one by one and give some explanation about them.

AbsTop and AbsLeft

AbsLeft and AbsTop are used to determine the position of the element in the page relative to the body element. In previous versions of SharePoint, these where directly attached to window object. In SharePoint Online, code was re-written, but they are still there. To understand the code, we need to take a look into init.js at DOM_module_def function (code was simplified for a better understanding).

var DOM;

function DOM_module_def() {

    function a(d, b) {
        var c = d[b], a = d.offsetParent;
        while (a != null && a.tagName != "BODY") {
            c += a[b];
            a = a.offsetParent
        }
        if (a != null)
            c += a[b];
        return c;
    }

    function l(b) {
        return a(b, "offsetLeft")
    }
    function m(b) {
        return a(b, "offsetTop")
    }

    DOM.AbsLeft = l;
    DOM.AbsTop = m;
}

if (typeof DOM == "undefined") {
        DOM = {__namespace: true};
        DOM_module_def();
}

These lines creates a DOM namespace which contains our functions. So in order to obtain the position of the element, you need to use them like this:

var element = document.getElementById('elementId');
var posFromTop = DOM.AbsTop(element);
var posFromLeft = DOM.AbsLeft(element);

GetElementsByName

GetElementsByName is another JavaScript interesting function, which is getting all elements by a specified name.

var DOM;

// Code was modified for better understanding
function DOM_module_def() {

    function _GetElementsByName(identifier) {

        var elements = document.getElementsByName(identifier);
        // If no elements not found and XMLHttpRequest is available (no idea why), identify elements by id
        if (elements.length == 0 && Boolean(XMLHttpRequest)) {
            elements = _GetElementsById(document, identifier);
        }
        return elements;



        function _GetElementsById(e, c) {
            var b = []
            var element = e.getElementById(c);

            while (element != null) {
                b.push(element);
                element.id = "";
                element = e.getElementById(c)
            }

            for (var d = 0; d < b.length; d++) {
                b[d].id = c;
            }
            return b;
        }
    }

    DOM.GetElementsByName = _GetElementsByName;

}

if (typeof DOM == "undefined") {
    DOM = { __namespace: true };
    DOM_module_def();
}

I changed some variables names this time to make it more clear. As you can see, this time is not so simple. If no elements with specified name is found and we have XMLHttpRequest object available, code is getting all elements where id is equal specified value. This time is getting really interesting. Don’t you think?

GetInnerText

Have you ever have issues with innerText property? I suppose yes, because Firefox is using different one. Well, this is another hit from Microsoft.

// Code was simplified for better understanding
var DOM;
function DOM_module_def() {

    function i(a) {
        return typeof a.textContent !== "undefined" && a.textContent !== null ? a.textContent : typeof a.innerText !== "undefined" ? a.innerText : undefined
    }
    DOM.GetInnerText = i;

}

if (typeof DOM == "undefined") {
    DOM = { __namespace: true };
    DOM_module_def();
}

// Usage
var innText = DOM.GetInnerText(document.getElementById('elementId'));
Advertisements