DOM: Form Field Position

Discussion in 'Water Cooler' started by Wayne Luke, Jun 14, 2009.

  1. Wayne Luke

    Wayne Luke Regular Member

    Joined:
    Apr 2, 2009
    Messages:
    992
    Likes Received:
    276
    Okay, maybe someone here can help with this. What I want to do is find all input fields on a page and under specific circumstances show an image immediately to the left. I want to do this with the DOM and Javascript without any HTML edits.

    I know about object.offsetTop and object.offsetLeft but they aren't being referenced properly. It always references 0,0 of the screen and shows relatively to that. I want to it show relatively to the field itself.

    The code in question is this:
    Code:
    show_warning: function(targ) {
    if (!targ.warning) {
    targ.warning = document.createElement('img');
    targ.warning.src = "images/misc/arrow_up.png";
    targ.warning.style.position = "absolute";
    targ.warning.style.top = (targ.offsetTop) + "px";
    targ.warning.style.left = (targ.offsetLeft + targ.offsetWidth - 5) + "px";
    targ.warning.style.zIndex = "999";
    targ.warning.setAttribute("alt", "Warning: Caps Lock is on");
    if (targ.warning.runtimeStyle) {
    // PNG transparency for IE
    targ.warning.runtimeStyle.filter +=
    "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/misc/arrow_up.png',sizingMethod='scale')";
    }
    document.body.appendChild(targ.warning);
    }
    }
    
    Original article is here:
    24 ways: Capturing Caps Lock

    Some pages might have more than one password field.
     

Share This Page