Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • Last Modified:

Javascript show div under object

Good aftrernoon,
Ive written a javascript script, which should show a div underneath an object, which is passed into it. However although it shows the div, and hides correctly, it doesnt move the div into the correct position :-(

My Javascript is called by:-
<input name="ctl00$MainContent$TextBox1" type="text" id="MainContent_TextBox1" onFocus="javascript: showDiv(this, 'divBelowObjects');" onBlur="javascript: hideDiv('divBelowObjects');" />

Which should move the div I have to the position of just below the textbox:-
<div id="divBelowObjects" style="visibility:hidden; z-index:1;">
 Hello, This is a test
</div>

Any ideas how I can fix it?


<script type="text/JavaScript">
    function findPos(obj) {
        var posX = obj.offsetLeft; var posY = obj.offsetTop;
        while (obj.offsetParent) {
            posX = posX + obj.offsetParent.offsetLeft;
            posY = posY + obj.offsetParent.offsetTop;
            if (obj == document.getElementsByTagName('body')[0]) { break }
            else { obj = obj.offsetParent; }
        }
        return [posX, posY]
    }
    function findPosX(obj) {
        var posX = obj.offsetLeft; var posY = obj.offsetTop;
        while (obj.offsetParent) {
            posX = posX + obj.offsetParent.offsetLeft;
            posY = posY + obj.offsetParent.offsetTop;
            if (obj == document.getElementsByTagName('body')[0]) { break }
            else { obj = obj.offsetParent; }
        }
        return posX;
    }
    function findPosY(obj) {
        var posX = obj.offsetLeft; var posY = obj.offsetTop;
        while (obj.offsetParent) {
            posX = posX + obj.offsetParent.offsetLeft;
            posY = posY + obj.offsetParent.offsetTop;
            if (obj == document.getElementsByTagName('body')[0]) { break }
            else { obj = obj.offsetParent; }
        }
        return posY;
    }
    function showDiv(objObject, divObject) {
        document.getElementById(divObject).style.top = findPosY(objObject);
        document.getElementById(divObject).style.left = findPosX(objObject);
        document.getElementById(divObject).style.visibility = "visible";
    }
    function hideDiv(divObject) {
        document.getElementById(divObject).style.visibility = "hidden";
    }
</script>

Open in new window

0
tonelm54
Asked:
tonelm54
  • 3
2 Solutions
 
BadotzCommented:
The functions "findPos", "findPosX" and "findPosY" are identical. I changed them to work according to their names.

In "showDiv", I set an object from the passed-in ID.

Not sure if any of this will help, but it is easier to read.


<script type="text/JavaScript">
    function findPos(obj) {
        return [findPosX(obj), findPosY(obj)];
    }
    function findPosX(obj) {
        var posX = obj.offsetLeft;
        while (obj.offsetParent) {
            posX += obj.offsetParent.offsetLeft;
            if (obj == document.getElementsByTagName('body')[0]) { break }
            else { obj = obj.offsetParent; }
            }
        }
        return posX;
    }
    function findPosY(obj) {
        var posY = obj.offsetTop;
        while (obj.offsetParent) {
            posY += obj.offsetParent.offsetTop;
            if (obj == document.getElementsByTagName('body')[0]) { break }
            else { obj = obj.offsetParent; }
        }
        return posY;
    }
    function showDiv(obj, divID) {
        var div = document.getElementById(divID);
        
        div.style.top = findPosY(objObject);
        div.style.left = findPosX(objObject);
        
        div.style.visibility = "visible";
    }
    function hideDiv(divObject) {
        document.getElementById(divObject).style.visibility = "hidden";
    }
</script>

Open in new window

0
 
BadotzCommented:
hmmm...it could be that the values you are trying to add are, say, "320px" instead of "320". In that case:


<script type="text/JavaScript">
    function findPos(obj) {
        return [findPosX(obj), findPosY(obj)];
    }
    function findPosX(obj) {
        var posX = obj.offsetLeft;
        while (obj.offsetParent) {
            posX += parseInt(obj.offsetParent.offsetLeft, 10);
            if (obj == document.getElementsByTagName('body')[0]) { break }
            else { obj = obj.offsetParent; }
            }
        }
        return posX;
    }
    function findPosY(obj) {
        var posY = obj.offsetTop;
        while (obj.offsetParent) {
            posY += parseInt(obj.offsetParent.offsetTop, 10);
            if (obj == document.getElementsByTagName('body')[0]) { break }
            else { obj = obj.offsetParent; }
        }
        return posY;
    }
    function showDiv(obj, divID) {
        var div = document.getElementById(divID);
        
        div.style.top = findPosY(objObject) + "px";
        div.style.left = findPosX(objObject) + "px";
        
        div.style.visibility = "visible";
    }
    function hideDiv(divObject) {
        document.getElementById(divObject).style.visibility = "hidden";
    }
</script>

Open in new window

0
 
tonelm54Author Commented:
The actual issue was that the Div wasnt setup right, everything else was working.

So it was me being a muppet, sorry!

Thanks for looking anyways!
0
 
BadotzCommented:
No worries - glad to help.
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now