Hi all,
I have a slight problem with IE, when everything works with firefox.
The goal is to _create_ boxes using the createElement method. And then
making it draggable with the mouse. The code example below is still
very temporary, but I could not get IE to drag the created box, when
firefox does it without problem.
Any hints? :)
The drag n' drop is straight from brainjar.com. Since their code works
for hidden/shown divs, I guess it all has to come from IE's lack of
DOM support and problems with it and the used method? Is there any
solution around this problem?
I'd really like to avoid turning boxes on/off (ie, block/hidden or
visible/invisible) because the potential number of them being present
in the future page can be enormous. The advantage of the createElement
method is that it allows for light pages and a lot of client-side
treatment.
Anyway, here's the code :)
<html>
<head>
<script type="text/javascript" language="javas cript">
function Browser() {
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userA gent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.s ubstr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.s ubstr(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();
function activatebox(id, posx,posy,width ,height,title,s rc) {
var mainid = document.getEle mentById("main" );
var boxid = "box" + id;
var myboxstyle = "left:" + posx + ";top:" + posy + ";width:" + width
+ "px;height: " + height + "px";
var myheaderstyle = "";
var myframestyle = "width:" + width + "px;height: " + height + "px;";
if (document.getEl ementById(boxid )) {
//z-index max
}
else {
mybox = document.create Element("div");
mybox.setAttrib ute("id",boxid) ;
mybox.className = "box";
if (browser.isIE) {
mybox.style.pos Left = posx;
mybox.style.pos Top = posy;
mybox.style.hei ght = height;
mybox.style.wid th = width;
}
else {
mybox.setAttrib ute("style",myb oxstyle);
}
mainid.appendCh ild(mybox);
boxheader = document.create Element("div");
boxheader.class Name = "boxheader" ;
boxheader.setAt tribute("id","b oxheader" + id);
if (browser.isIE) {
boxheader.style .posLeft = "";
}
else {
boxheader.setAt tribute("style" ,myheaderstyle) ;
}
boxheader.setAt tribute("onmous edown","dragSta rt(event,'" + boxid +
"')");
headertext = document.create TextNode(title) ;
boxheader.appen dChild(headerte xt);
mybox.appendChi ld(boxheader);
boxframe = document.create Element("iframe ");
boxframe.classN ame = "boxframe";
boxframe.setAtt ribute("id","bo xframe" + id);
boxframe.setAtt ribute("src",sr c);
boxframe.setAtt ribute("framebo rder","0");
boxframe.setAtt ribute("framesp acing","0");
boxframe.setAtt ribute("marginh eight","0");
boxframe.setAtt ribute("marginw idth","0");
if (browser.isIE) {
boxframe.style. width = width;
boxframe.style. height = height;
}
else {
boxframe.setAtt ribute("style", myframestyle);
}
mybox.appendChi ld(boxframe);
}
}
// from www.brainjar.com
var dragObj = new Object();
dragObj.zIndex = 0;
function dragStart(event , id) {
var el;
var x, y;
if (id)
dragObj.elNode = document.getEle mentById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.sr cElement;
if (browser.isNS)
dragObj.elNode = event.target;
// If this is a text node, use its parent element.
if (dragObj.elNode .nodeType == 3)
dragObj.elNode = dragObj.elNode. parentNode;
}
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.cl ientX + document.docume ntElement.scrol lLeft
+ document.body.s crollLeft;
y = window.event.cl ientY + document.docume ntElement.scrol lTop
+ document.body.s crollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Save starting positions of cursor and element.
dragObj.cursorS tartX = x;
dragObj.cursorS tartY = y;
dragObj.elStart Left = parseInt(dragOb j.elNode.style. left, 10);
dragObj.elStart Top = parseInt(dragOb j.elNode.style. top, 10);
if (isNaN(dragObj. elStartLeft)) dragObj.elStart Left = 0;
if (isNaN(dragObj. elStartTop)) dragObj.elStart Top = 0;
// Update element's z-index.
dragObj.elNode. style.zIndex = ++dragObj.zInde x;
// Capture mousemove and mouseup events on the page.
if (browser.isIE) {
document.attach Event("onmousem ove", dragGo);
document.attach Event("onmouseu p", dragStop);
window.event.ca ncelBubble = true;
window.event.re turnValue = false;
}
if (browser.isNS) {
document.addEve ntListener("mou semove", dragGo, true);
document.addEve ntListener("mou seup", dragStop, true);
event.preventDe fault();
}
}
function dragGo(event) {
var x, y;
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.cl ientX + document.docume ntElement.scrol lLeft
+ document.body.s crollLeft;
y = window.event.cl ientY + document.docume ntElement.scrol lTop
+ document.body.s crollTop;
}
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.elStar tLeft + x -
dragObj.cursorS tartX) + "px";
dragObj.elNode. style.top = (dragObj.elStar tTop + y -
dragObj.cursorS tartY) + "px";
if (browser.isIE) {
window.event.ca ncelBubble = true;
window.event.re turnValue = false;
}
if (browser.isNS)
event.preventDe fault();
}
function dragStop(event) {
// Stop capturing mousemove and mouseup events.
if (browser.isIE) {
document.detach Event("onmousem ove", dragGo);
document.detach Event("onmouseu p", dragStop);
}
if (browser.isNS) {
document.remove EventListener(" mousemove", dragGo, true);
document.remove EventListener(" mouseup", dragStop, true);
}
}
</script>
<link rel="stylesheet " href="gen.css" type="text/css"
media="all"></link>
</head>
<body>
<a href="#" onclick="javasc ript:activatebo x(2,100,150,160 ,430,'title2',' myframesrc');"> create
box en haut à gauche</a>
<div id="main">
<center>
<table border="0" cellspacing="0" cellpadding="0"
style="width:64 0px;margin:40px 0 0 0">
<tr>
<td width="100%" align="center">
<img src="centernav. jpg" id="centernav" >
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
I have a slight problem with IE, when everything works with firefox.
The goal is to _create_ boxes using the createElement method. And then
making it draggable with the mouse. The code example below is still
very temporary, but I could not get IE to drag the created box, when
firefox does it without problem.
Any hints? :)
The drag n' drop is straight from brainjar.com. Since their code works
for hidden/shown divs, I guess it all has to come from IE's lack of
DOM support and problems with it and the used method? Is there any
solution around this problem?
I'd really like to avoid turning boxes on/off (ie, block/hidden or
visible/invisible) because the potential number of them being present
in the future page can be enormous. The advantage of the createElement
method is that it allows for light pages and a lot of client-side
treatment.
Anyway, here's the code :)
<html>
<head>
<script type="text/javascript" language="javas cript">
function Browser() {
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userA gent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.s ubstr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.s ubstr(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();
function activatebox(id, posx,posy,width ,height,title,s rc) {
var mainid = document.getEle mentById("main" );
var boxid = "box" + id;
var myboxstyle = "left:" + posx + ";top:" + posy + ";width:" + width
+ "px;height: " + height + "px";
var myheaderstyle = "";
var myframestyle = "width:" + width + "px;height: " + height + "px;";
if (document.getEl ementById(boxid )) {
//z-index max
}
else {
mybox = document.create Element("div");
mybox.setAttrib ute("id",boxid) ;
mybox.className = "box";
if (browser.isIE) {
mybox.style.pos Left = posx;
mybox.style.pos Top = posy;
mybox.style.hei ght = height;
mybox.style.wid th = width;
}
else {
mybox.setAttrib ute("style",myb oxstyle);
}
mainid.appendCh ild(mybox);
boxheader = document.create Element("div");
boxheader.class Name = "boxheader" ;
boxheader.setAt tribute("id","b oxheader" + id);
if (browser.isIE) {
boxheader.style .posLeft = "";
}
else {
boxheader.setAt tribute("style" ,myheaderstyle) ;
}
boxheader.setAt tribute("onmous edown","dragSta rt(event,'" + boxid +
"')");
headertext = document.create TextNode(title) ;
boxheader.appen dChild(headerte xt);
mybox.appendChi ld(boxheader);
boxframe = document.create Element("iframe ");
boxframe.classN ame = "boxframe";
boxframe.setAtt ribute("id","bo xframe" + id);
boxframe.setAtt ribute("src",sr c);
boxframe.setAtt ribute("framebo rder","0");
boxframe.setAtt ribute("framesp acing","0");
boxframe.setAtt ribute("marginh eight","0");
boxframe.setAtt ribute("marginw idth","0");
if (browser.isIE) {
boxframe.style. width = width;
boxframe.style. height = height;
}
else {
boxframe.setAtt ribute("style", myframestyle);
}
mybox.appendChi ld(boxframe);
}
}
// from www.brainjar.com
var dragObj = new Object();
dragObj.zIndex = 0;
function dragStart(event , id) {
var el;
var x, y;
if (id)
dragObj.elNode = document.getEle mentById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.sr cElement;
if (browser.isNS)
dragObj.elNode = event.target;
// If this is a text node, use its parent element.
if (dragObj.elNode .nodeType == 3)
dragObj.elNode = dragObj.elNode. parentNode;
}
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.cl ientX + document.docume ntElement.scrol lLeft
+ document.body.s crollLeft;
y = window.event.cl ientY + document.docume ntElement.scrol lTop
+ document.body.s crollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Save starting positions of cursor and element.
dragObj.cursorS tartX = x;
dragObj.cursorS tartY = y;
dragObj.elStart Left = parseInt(dragOb j.elNode.style. left, 10);
dragObj.elStart Top = parseInt(dragOb j.elNode.style. top, 10);
if (isNaN(dragObj. elStartLeft)) dragObj.elStart Left = 0;
if (isNaN(dragObj. elStartTop)) dragObj.elStart Top = 0;
// Update element's z-index.
dragObj.elNode. style.zIndex = ++dragObj.zInde x;
// Capture mousemove and mouseup events on the page.
if (browser.isIE) {
document.attach Event("onmousem ove", dragGo);
document.attach Event("onmouseu p", dragStop);
window.event.ca ncelBubble = true;
window.event.re turnValue = false;
}
if (browser.isNS) {
document.addEve ntListener("mou semove", dragGo, true);
document.addEve ntListener("mou seup", dragStop, true);
event.preventDe fault();
}
}
function dragGo(event) {
var x, y;
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.cl ientX + document.docume ntElement.scrol lLeft
+ document.body.s crollLeft;
y = window.event.cl ientY + document.docume ntElement.scrol lTop
+ document.body.s crollTop;
}
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.elStar tLeft + x -
dragObj.cursorS tartX) + "px";
dragObj.elNode. style.top = (dragObj.elStar tTop + y -
dragObj.cursorS tartY) + "px";
if (browser.isIE) {
window.event.ca ncelBubble = true;
window.event.re turnValue = false;
}
if (browser.isNS)
event.preventDe fault();
}
function dragStop(event) {
// Stop capturing mousemove and mouseup events.
if (browser.isIE) {
document.detach Event("onmousem ove", dragGo);
document.detach Event("onmouseu p", dragStop);
}
if (browser.isNS) {
document.remove EventListener(" mousemove", dragGo, true);
document.remove EventListener(" mouseup", dragStop, true);
}
}
</script>
<link rel="stylesheet " href="gen.css" type="text/css"
media="all"></link>
</head>
<body>
<a href="#" onclick="javasc ript:activatebo x(2,100,150,160 ,430,'title2',' myframesrc');"> create
box en haut à gauche</a>
<div id="main">
<center>
<table border="0" cellspacing="0" cellpadding="0"
style="width:64 0px;margin:40px 0 0 0">
<tr>
<td width="100%" align="center">
<img src="centernav. jpg" id="centernav" >
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
Comment