Jump to content

Ie Errors With Css On Appended Elements


clonetrooper9494
 Share

Recommended Posts

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

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?

Edited by CloneTrooper9494
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...