Menu
I have the following JavaScript/CSS which creates a div with some content. The goal (works in FF, not in IE) is to have it position the div at the passed x/y coordinates (x/y is either pageX/clientX depending on browser). However, under IE, it always positions the div at the end of the parentID element (a form element in this case) ignoring the element.style.left and element.style.top properties.
Anyone know how to get IE to behave like FF for this operation?
[code=html]
.absoluteHidden,
.userNoteDivClass {
position:absolute;
visibility:hidden;
}
.userNoteDivClass {
background-color:#FFCC33;
border:2px solid red;
padding:10px 10px 10px 20px;
}
.userNoteDivClass input {
width:400px;
}
.userNoteDivClass h1,
.userNoteDivClass h2 {
text-align:center;
}
[CODE]
function createAbsoluteElement(parentID, containerType, name, useClass, x, y, xAdjust) {
var parentTag = document.getElementById(parentID);
winWidth = docWidth();
var newEl = document.createElement(containerType);
newEl.setAttribute(‘id’, id = formNameToID(name));
if( useClass )
newEl.setAttribute(‘class’, useClass);
newEl.style.left = ((x+xAdjust) > winWidth) ? (winWidth-xAdjust) : x;
newEl.style.top = y;
parentTag.appendChild(newEl);
return newEl;
}
function createNoteDiv(parentID, name, noteTitle, value, x, y, readOnly) {
newEl = createAbsoluteElement(parentID, ‘div’, ‘div’+name, ‘userNoteDivClass’, x, y, xAdjust=400);
ro = ”;
if( readOnly )
ro = ‘readonly’;
innerStr = ‘<h2>’+noteTitle+'</h2>’;
innerStr += ‘<input type=”text” name=”‘+name+'” value=”‘+value+'” ‘+ro+’ />’;
innerStr += ‘<br/><br/>’;
innerStr += ‘<a href=”#” onclick=”hideNote(”+id+”);return false;”>Click To Close</a>’;
newEl.innerHTML = innerStr;
return newEl;
}
function showNote(parentID, name, noteTitle, x, y, readOnly) {
hiddenID = formNameToID(name);
divID = ‘div’+hiddenID;
// Now see if it exists… If not, create it and set the appropriate values.
if( tag = document.getElementById(divID) ) {
// exists, just show it.
tag.style.visibility = ‘visible’;
} else { // doesn’t exist
// Get the existing value from the hidden element
hiddenTag = document.getElementById(hiddenID);
val = ”;
if( hiddenTag ) {
val = hiddenTag.value;
// remove the original hidden element. It’s replaced by the dynamic one (name anyway)
hiddenTag.parentNode.removeChild(hiddenTag);
}
newDiv = createNoteDiv(parentID, name, noteTitle, val, x, y, readOnly);
newDiv.style.visibility = ‘visible’;
if( document.forms[parentID] ) {
focusItem = document.forms[parentID].elements[name];
if( focusItem && focusItem.type != ‘hidden’ && focusItem.style.display != ‘none’ && !focusControl.disabled ) {
focusItem.focus();
focusItem.select();
}
}
}
return false;
}