Solved

Javascript show div under object

Posted on 2010-08-22
4
237 Views
Last Modified: 2012-05-10
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
Comment
Question by:tonelm54
  • 3
4 Comments
 
LVL 29

Accepted Solution

by:
Badotz earned 500 total points
ID: 33495373
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
 
LVL 29

Assisted Solution

by:Badotz
Badotz earned 500 total points
ID: 33495381
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
 

Author Comment

by:tonelm54
ID: 33496208
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
 
LVL 29

Expert Comment

by:Badotz
ID: 33496232
No worries - glad to help.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Viewers learn about the “for” loop and how it works in Java. By comparing it to the while loop learned before, viewers can make the transition easily. You will learn about the formatting of the for loop as we write a program that prints even numbers…
The viewer will learn how to implement Singleton Design Pattern in Java.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now