Page 1 of 1
absolute positioning
Posted: Fri Jan 27, 2006 9:07 am
by liljester
Ive coded a nice app, ajax (ajapt more accurately) and everything.
my app is to list students, and make them clickable. when you click a students name, a layer appears under your cursor with a list of options. it works beautifully... untill you scoll the page, the it goes to crap. i cant seem to find a way to tell on the page (not the screen or client viewable) where the onclick event fires... so i click when im scrolled, and the layer appears waaay back at the top.
can anyone help? if not ill have to go back to a nasty popup type solution .. and that sucks
Thanks!
PS I would like to note, im only interested in making this work with IE.
Posted: Fri Jan 27, 2006 9:36 am
by Roja
Post a link, or the code.. it all depends on how you've implemented it. Without the specifics, we cant give a specific solution.
Posted: Fri Jan 27, 2006 9:55 am
by liljester
here is the part im having trouble with:
Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="javascript">
var ie = document.all ? true : false;
function createAlert(id_num, crs_cde) {
if(ie) {
if(document.getElementById('subDiv')) { document.body.removeChild(subDiv); }
subDiv = document.createElement("<div id='subDiv' class='alertPopup'></div>");
document.body.insertBefore(subDiv);
document.getElementById('subDiv').style.left = event.clientX;
document.getElementById('subDiv').style.top = event.clientY;
content = "Some text goes here.<br>";
content += "<input type='checkbox' id='alert_1' value='1'>option1<br>";
content += "<input type='checkbox' id='alert_2' value='1'>option2<br>";
content += "<input type='checkbox' id='alert_3' value='1'>option3<br>";
content += "<input type='checkbox' id='alert_4' value='1'>option4<br>";
content += "<input type='checkbox' id='alert_5' value='1'>option5<br>";
content += "<input type='checkbox' id='alert_6' value='1'>option6<br>";
content += "<center><input class='input_button' type='button' value='Cancel' onclick='document.body.removeChild(subDiv);'> ";
content += "<input class='input_button' type='button' value='Alert' onclick='alertSend();'></center>";
document.getElementById('subDiv').innerHTML = content;
document.getElementById('subDiv').style.display = '';
} else {
alert("This application requires IE.");
}
}
</script>
<style>
.alertPopup {
font-family: Arial;
font-size: 12px;
font-weight: bold;
position: absolute;
width: 300px;
height:160px;
border: 1px solid #000000;
background-color: #88bbff;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<font onclick="createAlert(0, 0);">clickme</font>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
Posted: Fri Jan 27, 2006 10:30 am
by Roja
Hmm. Tricky.
Haven't solved it yet, but here's the html-compliant version (reduces the number of issues you have to troubleshoot):
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type="text/javascript">
function createAlert(id_num, crs_cde) {
if(document.getElementById('subDiv'))
{ document.body.removeChild(subDiv); }
subDiv = document.createElement("<div id='subDiv' class='alertPopup'><\/div>");
document.body.insertBefore(subDiv);
document.getElementById('subDiv').style.left = event.clientX;
document.getElementById('subDiv').style.top = event.clientY;
content = "Some text goes here.<br>";
content += "<input type='checkbox' id='alert_1' value='1'>option1<br>";
content += "<input type='checkbox' id='alert_2' value='1'>option2<br>";
content += "<input type='checkbox' id='alert_3' value='1'>option3<br>";
content += "<input type='checkbox' id='alert_4' value='1'>option4<br>";
content += "<input type='checkbox' id='alert_5' value='1'>option5<br>";
content += "<input type='checkbox' id='alert_6' value='1'>option6<br>";
content += "<center><input class='input_button' type='button' value='Cancel' onclick='document.body.removeChild(subDiv);'> ";
content += "<input class='input_button' type='button' value='Alert' onclick='alertSend();'><\/center>";
document.getElementById('subDiv').innerHTML = content;
document.getElementById('subDiv').style.display = '';
}
</script>
<style type="text/css">
.alertPopup {
font-family: Arial;
font-size: 12px;
font-weight: bold;
position: absolute;
width: 300px;
height:160px;
border: 1px solid #000000;
background-color: #88bbff;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#" onclick="createAlert(0, 0);">clickme</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
I'll work on it some more.
Posted: Fri Jan 27, 2006 3:40 pm
by Roja
Okay, having quite a few problems here. I'm working from a new version..
Code: Select all
function createAlert(id_num, crs_cde)
{
if(document.getElementById('subDiv'))
{
document.body.removeChild('subDiv');
}
subDiv = document.createElement("div");
subDiv.className='alertPopup';
subDiv.id='subDiv';
document.body.appendChild(subDiv);
document.getElementById('subDiv').style.left = event.clientX;
document.getElementById('SubDiv').style.top = event.clientY;
content = "Some text goes here.<br>";
content += "<input type='checkbox' id='alert_1' value='1'>option1<br>";
content += "<input type='checkbox' id='alert_2' value='1'>option2<br>";
content += "<input type='checkbox' id='alert_3' value='1'>option3<br>";
content += "<input type='checkbox' id='alert_4' value='1'>option4<br>";
content += "<input type='checkbox' id='alert_5' value='1'>option5<br>";
content += "<input type='checkbox' id='alert_6' value='1'>option6<br>";
content += "<center><input class='input_button' type='button' value='Cancel' onclick='document.body.removeChild(subDiv);'> ";
content += "<input class='input_button' type='button' value='Alert' onclick='alertSend();'><\/center>";
document.getElementById('subDiv').innerHTML = content;
document.getElementById('subDiv').style.display = '';
}
First, insertbefore has to have a second item - the target to insert the new item in front of.
Second, createelement was all kinds of wrong. You cant set id's and classes on created elements that way. More like..
Code: Select all
subDiv = document.createElement("div");
subDiv.className='alertPopup';
subDiv.id='subDiv';
But to do that correctly, you really need to appendChild that onto something (or else its just floating, in undefined space).
The event call is the really confusing part. You are asking for an event from a createElement - which isnt an event the user did. Worse, you are asking for the clientX/Y for that subdiv, NOT for where they clicked.
No offense, but the code looks like a badly cobbled together collection of different scripts, that dont work together well. I'd help more, but sadly, I dont know enough about JS to do "what you meant to do".
Posted: Mon Jan 30, 2006 8:39 am
by liljester
for the insrertBefore method, documentation says "Inserts an element into the document hierarchy as a child node of a parent object." so if i use document.body.insertBefore() that creates a child of the body, yes? and the second argument is optional. i dont care where in the document hierarchy its put as long as its a child of body.
http://msdn.microsoft.com/workshop/auth ... before.asp
I disagree, i have had no troubles creating the subdiv the way i did, i pulled the info straight off of microsfts website.
http://msdn.microsoft.com/workshop/auth ... lement.asp the second example clearly states that you can create an element in this fashion.
i could be wrong, if so please elaborate on why
Thanks for the help, Roja!
Posted: Mon Jan 30, 2006 8:50 am
by liljester
The event call is the really confusing part. You are asking for an event from a createElement - which isnt an event the user did. Worse, you are asking for the clientX/Y for that subdiv, NOT for where they clicked.
no, you are incorrect. when onClick is fired, it stores the location of the cursor in event object, im just using the event info from that onclick event. again ill point you to the ms docs
http://msdn.microsoft.com/workshop/auth ... _event.asp
all i want this part of the script to do is this:
when the user clicks something, i want a layer to be created under the mouse cursor. thats it.
Posted: Mon Jan 30, 2006 9:39 am
by Roja
liljester wrote:i could be wrong, if so please elaborate on why

Sure.
The javascript debugger gives an error when trying to do so, saying that there is no object (the child node to point to). Giving it a target removes that issue.
Seems clear enough to me. Documentation is not always accurate, and testing is showing a different result (at least for me).
No, you misunderstand. You aren't using the event info from the onclick event. You are using the event info from the createElement event - which does not capture a cursor location.
As I said before, I don't have the javascript knowledge to work around the issues mentioned, so hopefully someone else will. However, after the two responses given, if I had any desire to, it would be gone now.
Posted: Mon Jan 30, 2006 11:09 am
by liljester
ok, i am very confused now. i copy+pasted my code exactly from my second post and run it in IE6, and i get no errors at all. the layer is created and populated, and its in the correct x coord, however the y coord is wrong.
where should i look for the js debugger you mentioned? is it part of IE?
it appears to me that the event.clientX and event.clientY are populated with the correct values from the onclick event (if you click different places on the text, the layer moves to compensate) as i understand the ms docs, the window.event object is only exposed to *events* and not to a function being called. (createElement is a method not an event object)
try pasting
Code: Select all
<font onclick="createAlert(0, 0);">clickme</font>
at the top of the page so you dont have to scroll, it works perfectly in IE6 (for me)
Posted: Mon Jan 30, 2006 11:11 am
by liljester
As I said before, I don't have the javascript knowledge to work around the issues mentioned, so hopefully someone else will. However, after the two responses given, if I had any desire to, it would be gone now.
did i offend you in some way?