Solved

Javascript show div under object

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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.
Viewers learn how to read error messages and identify possible mistakes that could cause hours of frustration. Coding is as much about debugging your code as it is about writing it. Define Error Message: Line Numbers: Type of Error: Break Down…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.

778 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