I have the following code, it seems to work fine in FF, but in IE the head of teh div doesnt render properly and I cant drag it round the screen - does anyone have any ideas?
Thanks!
Thanks!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<title>Help</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.box {
background-color: #edeff1;
border: 1px solid #cccccc;
color: #000000;
padding: 0px;
position: absolute;
cursor:default;
visibility:hidden;
width:200px
}
.bar {
background-color: #cccccc;
color: #000000;
font-weight: bold;
padding: 2px;
cursor:move;
}
td.helpDivClose
{
width:15px;
background-color:#edeff1;
border:1px solid #999999;
color:#000000;
text-align:center;
cursor:pointer;
padding:3px;
}
td.helpDivCloseOver
{
width:15px;
background-color:#eeeeee;
border:1px solid #333333;
color:#333333;
text-align:center;
cursor:pointer;
padding:3px;
}
.content {
padding: 1em;
}
div.helpContent
{
background-color:#fefefe;
color:#000000;
text-align:justify;
vertical-align:top;
border:1px solid #cccccc;
margin:3px;
padding:4px;
}
li.helpItem
{
cursor:pointer;
}
li.helpItemOver
{
cursor:pointer;
font-weight:bold;
}
</style>
<script type="text/javascript">
//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// See [URL unfurl="true"]http://www.brainjar.com[/URL] for terms of use.
//*****************************************************************************
// Determine browser and version.
function Browser() {
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
var browser = new Browser();
// Global object to hold drag information.
var dragObj = new Object();
dragObj.zIndex = 0;
function dragStart(event, id) {
var el;
var x, y;
// If an element id was given, find it. Otherwise use the element being
// clicked on.
dragObj.elNode = document.getElementById(id);
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Save starting positions of cursor and element.
dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);
if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;
// Update element's z-index.
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
// Capture mousemove and mouseup events on the page.
if (browser.isIE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
event.preventDefault();
}
}
function dragGo(event) {
var x, y;
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Move drag element by the same amount the cursor has moved.
dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";
if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}
function dragStop(event) {
// Stop capturing mousemove and mouseup events.
if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}
function getTopics(indexNumbers) {
var emailAdmin = '<a href="mailto:jbolt@foo.com">admin</a>';
var topic = new Array(5);
topic[0]="How do I report a broken link?";
topic[1]="How do I add a new link to the portal?";
topic[2]="How do I remove an unwanted link from the portal?";
topic[3]="How do I post a new announcement to the portal?";
topic[4]="I cannot find a document that exists in the archive";
}
function getSolution(indexNumber) {
var emailAdmin = '<a href="mailto:jbolt@foo.com">admin</a>';
var solution = new Array(5);
solution[0]="Please contact the " + emailAdmin + " using the link at the top of the page, stating which link is broken, and for which portal the link is for.";
solution[1]="Please email the " + emailAdmin + " with the modifier the link is for, whether the link is to be cascaded to all the portal's related portals, the link's URL, the text to display, and a short description.";
solution[2]="How do I remove an unwanted link from the portal?";
solution[3]="How do I post a new announcement to the portal?";
solution[4]="I cannot find a document that exists in the archive";
return solution[indexNumber];
}
function createDiv() {
// The help div already exists
if (document.getElementById("helpDiv")) {
alert('help div already exists');
} else {
// Create the base div and assign an id and style object
var helpDiv = document.createElement("div");
helpDiv.id = "helpDiv";
helpDiv.className = "box";
// Create the header bar, this will contain the title and close button
var bar = document.createElement("div");
bar.className = "bar";
// We need a way to pass the event object, this works fine in IE and Mozilla
bar.onmousedown = function(e) {
eventObj = (e)?e:event;
dragStart(eventObj, 'helpDiv');
};
// This div will hold a list of topics, we dont populat the topics here however
var helpTopics = document.createElement("div");
helpTopics.className = "content";
// This div is where the answer to the topic is inserted
var helpContent = document.createElement("div");
helpContent.className = "helpContent";
helpContent.id="helpContent";
helpContent.innerHTML = "There are no topics available";
// This is table will hold the title and close button
var titleBar = document.createElement("table");
titleBar.cellspacing="0";
titleBar.width="100%";
var titleRow = document.createElement("tr");
// This is the title for the help box
var titleText = document.createElement("td");
titleText.innerHTML = "Related Help";
// This holds the close button
var titleButton = document.createElement("td");
titleButton.className="helpDivClose";
titleButton.innerHTML = "x";
// Add some eyecandy
titleButton.onmouseover = function(){ this.className='helpDivCloseOver'; };
titleButton.onmouseout = function(){ this.className='helpDivClose'; };
titleButton.onmousedown = function(){
var docBody = document.getElementsByTagName("body").item(0);
docBody.removeChild(document.getElementById("helpDiv"));
};
// Get the body object
var docBody=document.getElementsByTagName("body").item(0);
// Create the structure
docBody.appendChild(helpDiv);
helpDiv.appendChild(bar);
helpDiv.appendChild(helpTopics);
helpDiv.appendChild(helpContent);
bar.appendChild(titleBar);
titleBar.appendChild(titleRow);
titleRow.appendChild(titleText);
titleRow.appendChild(titleButton);
helpDiv.style.visibility="visible";
}
}
</script>
</head>
<body>
<a href="#" onclick="createDiv()">Show Help</a>
</body>
</html>