clonetrooper9494 Posted June 15, 2009 Share Posted June 15, 2009 I have made a script that creates windows that you can drag and drop, resize, and 'mini-mize'. The script also has a button to create more windows when you click it. The only problem is that IE displays JS errors, and does not create the elements with any styling. It is setting the class attribute to 'widget' but it isn't working! This only happens in IE, any one know why?Here is the source and link: <html><head><title>Social Portal</title><style>body *{line-height:1.32em;}.widget{background-color:white;z-index:1;position:absolute;top:50px;border:1px solid black;width:350px;height:250px;min-width:100px;min-height:100px;max-width:70%;max-height:70%;padding:-1px;}.widget .body{overflow:auto;height:100%;}.widget .header{border:1px solid black;position:absolute;left:-1px;top:-20px;border-bottom:0px solid grey;width:100%;height:18px;background-color:white;}.widget .header .name{height:18px;overflow:hidden;width:100%;}.widget .header .name .hide{text-align:center;background-color:#7EACFF;position:absolute;right:18;top:0;height:18px;width:18px;}.widget .header .name .exit{text-align:center;background-color:#FF6600;position:absolute;right:0;top:0;height:18px;width:18px;}.widget .body .resize{text-align:center;//background-color:#008B00;background-image:url('circle.php');position:absolute;right:-13px;bottom:-13px;height:26px;width:26px;z-index:-1;}.widget .body textarea{width:100%;height:100%;margin:0;padding:0;border:0px;background-color:transparent;}</style><script>///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////var IE = document.all?true:false;if (!IE) document.captureEvents(Event.MOUSEMOVE)document.onmousemove = move;var mode;var marker;var tempX = 0;var tempY = 0;var tempX2 = 0;var tempY2 = 0;var tempX3 = 0;var tempY3 = 0;var tempX4 = 0;var tempY4 = 0;var display = new Array();var zindex = 0;var wincount = 1;function toggle_display(that,parent){ if(document.getElementById(that).style.display == "none") { document.getElementById(parent).style.minHeight="100px"; document.getElementById(that).style.display="block"; document.getElementById(parent).style.height=display[that]+"px"; } else { document.getElementById(parent).style.minHeight="0"; display[that] = document.getElementById(that).clientHeight; document.getElementById(that).style.display="none"; document.getElementById(parent).style.height="3px"; }}function move(e){if(IE){tempX = event.clientX + document.body.scrollLeft;tempY = event.clientY + document.body.scrollTop;}else{tempX = e.pageX;tempY = e.pageY;} handle = document.getElementById(marker);if(mode == 'resize'){handle.style.width = (tempX3 + tempX - tempX4)+'px';handle.style.height = (tempY3 + tempY - tempY4)+'px';}if(mode == 'move'){handle.style.left = (tempX - tempX2)+'px';handle.style.top = (tempY - tempY2)+'px';}return true;}function mark(that,tmp_mode){mode = tmp_mode;marker = that;tempX2 = tempX - document.getElementById(marker).offsetLeft;tempY2 = tempY - document.getElementById(marker).offsetTop;tempX3 = document.getElementById(marker).offsetWidth;tempY3 = document.getElementById(marker).offsetHeight;tempX4 = tempX;tempY4 = tempY;}function tofront(that){that.style.zIndex = 15;//that.style.border = "1px solid #3399FF";that.style.backgroundColor = "rgb(250,250,255)";}function toback(that){that.style.zIndex = 0;//that.style.border = "1px solid black";that.style.backgroundColor = "white";}function createWin(){/*var parent1 = document.getElementById('parent1');var child = document.createElement("div");var subchild = document.createTextNode("Div #: "+divcount);child.appendChild(subchild);child.setAttribute('id','div'+divcount);child.setAttribute('onclick','removeRow(this)');parent1.appendChild(child);wincount++;*/var parentdiv = document.getElementById('windows');var widget = document.createElement("div");widget.setAttribute('id','widget'+wincount);widget.setAttribute('class','widget');widget.setAttribute('onmouseover','tofront(this)');widget.setAttribute('onmouseout','toback(this)'); var header = document.createElement("div"); header.setAttribute('class','header'); var name = document.createElement("div"); name.setAttribute('class','name'); name.setAttribute('onmousedown',"mark('widget"+wincount+"','move')"); var name_text = document.createTextNode("Title"); var hide = document.createElement("div"); hide.setAttribute('class','hide'); hide.setAttribute('onmousedown',"toggle_display('body"+wincount+"','widget"+wincount+"')"); var hide_text = document.createTextNode("-"); var exit = document.createElement("div"); exit.setAttribute('class','exit'); exit.setAttribute('onmousedown',"removeWin('widget"+wincount+"')"); var exit_text = document.createTextNode("X"); var body = document.createElement("div"); body.setAttribute('class','body'); body.setAttribute('id','body'+wincount); var resize = document.createElement("div"); resize.setAttribute('class','resize'); resize.setAttribute('onmousedown',"mark('widget"+wincount+"','resize')"); var textarea = document.createElement("textarea");body.appendChild(resize); body.appendChild(textarea); name.appendChild(name_text); hide.appendChild(hide_text); exit.appendChild(exit_text); name.appendChild(hide); name.appendChild(exit);header.appendChild(name); widget.appendChild(header); widget.appendChild(body); parentdiv.appendChild(widget); wincount++;}function removeWin(that){that = document.getElementById(that);that.parentNode.removeChild(that);}///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</script></head><body onmouseup="mark('null','null')"><div id="output" onclick="createWin()">Add Window</div><div id="windows"></div></body></html> Try it in both IE and another browser:http://www.clonedrone.com/php-lab/installa...indow_test2.php Link to comment Share on other sites More sharing options...
justsomeguy Posted June 15, 2009 Share Posted June 15, 2009 Set both the "class" and "className" attributes, not just "class". IE uses className. Link to comment Share on other sites More sharing options...
clonetrooper9494 Posted June 16, 2009 Author Share Posted June 16, 2009 Thanks JustSomeGuy!but now the JS isn't working; "Error: Object Required"... but on line 177(where the error is occurring), it says "tempX2 = tempX - document.getElementById(marker).offsetLeft;" and all of those variables are set earlier in my script! What does it mean by Object required?Should I make a new topic for this problem?Also, I only have IE 7... does it work with IE 8? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 16, 2009 Share Posted June 16, 2009 That type of error usually means that document.getElementById(marker) is undefined, that's the object it's usually talking about. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.