/    Sign up×
Community /Pin to ProfileBookmark

I’m working on something for a website when you click their name it brings down options, i got it once but i want the options box to appear where the mouse is at the time of the click so i tried making it like this…

<script>

function show(szDivID, iState)
{

ms_x = event.x+document.body.scrollLeft;
ms_y = event.y+document.body.scrollTop;

if(document.layers) //NN4+
{
document.layers[szDivID].visibility = iState ? “show” : “hide”;
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? “visible” : “hidden”;
}
else if(document.all) // IE 4
{
document.all[szDivID].style.visibility = iState ? “visible” : “hidden”;
}

}

document.all[szDivID].style.top = ms_y
document.all[szDivID].style.left = ms_x

<div ID=’the’ style=’visibility:visible;position:absolute;’>
<table align=’center’ bgcolor=’#454545′ border=’1′>
<tr>
<td>
Test
</td>
</tr>
</table>
</div>

</script>

It’s just not working though ?

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@yellabuffNov 21.2006 — It looks pretty much correct except

document.all[szDivID].style.top = ms_y

document.all[szDivID].style.left = ms_x

is outside the function.

I did this...

[CODE]<script>

function show(szDivID, iState) {

ms_x = event.x+document.body.scrollLeft;
ms_y = event.y+document.body.scrollTop;

if(document.layers) { //NN4+
document.layers[szDivID].visibility = iState ? "show" : "hide";
}else if(document.getElementById) {
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}else if(document.all) {
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
document.all[szDivID].style.top = ms_y
document.all[szDivID].style.left = ms_x
}


</script>

<a href="#" onclick="show('the', 'visible')">item1</a>
<a href="#" onclick="show('the', 'visible')">item2</a>
<a href="#" onclick="show('the', 'visible')">item3</a>
<div style="padding-left:300px;"><a href="#" onclick="show('the', 'visible')">item4</a></div>
<div style="padding-left:200px;" onclick="show('the', 'visible')">item5</div>

<div ID='the' style='visibility:hidden;position:absolute;'>
<table align='center' bgcolor='#454545' border='1'>
<tr>
<td>
Test
</td>
</tr>
</table>
</div>[/CODE]
Copy linkTweet thisAlerts:
@HoodauthorNov 21.2006 — Well that worked until you use FireFox ?
Copy linkTweet thisAlerts:
@yellabuffNov 21.2006 — Sorry... event.x doesn't work in FireFox. Find out how to get the mouse position on google. I can't remember right now. Also change the code to

var obj = document.getElementById(szDivID);

if(document.layers) { //NN4+
obj.visibility = iState ? "show" : "hide";
}else if(document.getElementById) {
obj.style.visibility = iState ? "visible" : "hidden";
}else if(document.all) {
obj.style.visibility = iState ? "visible" : "hidden";
}
obj.style.top = ms_y
obj.style.left = ms_x
Copy linkTweet thisAlerts:
@HoodauthorNov 21.2006 — so what would the full source be now?
Copy linkTweet thisAlerts:
@HoodauthorNov 21.2006 — [CODE] <script>
function show(szDivID, iState, UserID)
{
ms_x = event.x+document.body.scrollLeft;
ms_y = event.y+document.body.scrollTop;
if(document.layers) //NN4+
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) // IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
document.all[szDivID].style.top = ms_y
document.all[szDivID].style.left = ms_x

<?
$content = "
<div align='center'>
<U>Options</U>
</div><br>
- <a href='?id=member_list&acc_id=$u_id'>View Profile</a><br>
- View all news articles<br>
";
?>
}
</script>

<div ID='options' style='visibility:hidden;position:absolute;width=200;'>
<table align='center' bgcolor='#454545' border='1' width='100%'>
<tr>
<td>

<table align='center'>
<tr>
<td>
<?=$content?>
</td>
</tr>
</table>

</td>
</tr>
</table>
</div>
[/CODE]


That's what I'm really trying to get to work, i got it so that it shows the box in the right spot now but i need that UserID thing to work so that it will show the right stuff when you click the links.
Copy linkTweet thisAlerts:
@yellabuffNov 21.2006 — Try this...

[CODE]<script>
window.onload = init;
function init() {
if (window.Event)
document.captureEvents(Event.MOUSEMOVE);
}

function getX(e) { return x = (window.Event) ? e.pageX : event.clientX; }
function getY(e) { return y = (window.Event) ? e.pageY : event.clientY; }

function show(szDivID, iState, UserID) {
ms_x = getX + document.body.scrollLeft;
ms_y = getY + document.body.scrollTop;


var obj = document.getElementById(szDivID);

if (document.layers) {
obj.visibility = iState ? "show" : "hide";
}else if(document.getElementById) {
obj.style.visibility = iState ? "visible" : "hidden";
}else if(document.all) {
obj.style.visibility = iState ? "visible" : "hidden";
}
obj.style.top = ms_y;
obj.style.left = ms_x;
}
</script>


<div align='center'>
<U>Options</U>
</div><br>
- <a href='#' onclick="show('options', 'visible', '')">View Profile</a><br>
- View all news articles<br>



<div ID='options' style='visibility:hidden;position:absolute;width:200px;'>
<table align='center' bgcolor='#454545' border='1' width='100%'>
<tr>
<td>

<table align='center'>
<tr>
<td>
Content goes here
</td>
</tr>
</table>

</td>
</tr>
</table>
</div>[/CODE]
Copy linkTweet thisAlerts:
@HoodauthorNov 22.2006 — Naw see, what i'm tryin to do is on the news system i made with php is you click the name and it drops down options...
×

Success!

Help @Hood spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...