Solved

Javascript show div under object

Posted on 2010-08-22
4
243 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Apps blocked by Java 9 64
Angular- another way of coding hide and display 3 40
Enter key on html form page 11 48
Materializecss - Different Behaviors in Browser's 1 20
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
This tutorial will introduce the viewer to VisualVM for the Java platform application. This video explains an example program and covers the Overview, Monitor, and Heap Dump tabs.

895 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

17 Experts available now in Live!

Get 1:1 Help Now