Guest mathfeel Posted November 25, 2005 Share Posted November 25, 2005 I have the following code: ...var div_thmbnl_cont = [];var div_thmbnlimg = [];var a_thmbnl = [];var img_thmbnl = [];var div_thmbnldscp = [];var txt_dscp = [];var thumbnailcontainer_style = { width : 190, height : 310, border_size : 3, left_gap : 50, left_zero : 20, top_gap : 30, top_zero : 30 };var col_num = 4;function thumbnail_dom(){ var cnt = 0; var div_thmbnls = document.getElementById("Thumbnails"); for (var i = 0; i < artarr.length; i++){ //<div class="thumbnailcontainer"> // <div class="thumbnailimage"><a href="IMG_2770.JPG"><img class="thumbnail" src="IMG_2770.JPG" /></a></div> // <div class="thumbnaildscp">Lake Tahoe 小溪</div> //</div> div_thmbnl_cont[cnt] = document.createElement("div"); div_thmbnl_cont[cnt].setAttribute("class","thumbnailcontainer"); // DEBUG: window.alert(stylestr); // div_thmbnl_cont[cnt].style.position = "absolute"; div_thmbnl_cont[cnt].style.left = (Math.floor((cnt%col_num)*(thumbnailcontainer_style.width+thumbnailcontainer_style.left_gap))+thumbnailcontainer_style.left_zero) +"px"; div_thmbnl_cont[cnt].style.top = (Math.floor(cnt/col_num)*(thumbnailcontainer_style.height+thumbnailcontainer_style.top_gap)+thumbnailcontainer_style.top_zero) +"px"; /* thumbnail image */ div_thmbnlimg[cnt] = document.createElement("div"); div_thmbnlimg[cnt].setAttribute("class","thumbnailimage"); a_thmbnl[cnt] = document.createElement("a"); a_thmbnl[cnt].setAttribute("href",artarr[i].filename); img_thmbnl[cnt] = document.createElement("img"); img_thmbnl[cnt].setAttribute("class","thumbnail"); img_thmbnl[cnt].setAttribute("src","thumbnails/"+artarr[i].filename); img_thmbnl[cnt].style.width = '100%'; a_thmbnl[cnt].appendChild(img_thmbnl[cnt]); div_thmbnlimg[cnt].appendChild(a_thmbnl[cnt]); /* Description */ div_thmbnldscp[cnt] = document.createElement("div"); div_thmbnldscp[cnt].setAttribute("class","thumbnaildscp"); txt_dscp[cnt] = document.createTextNode(artarr[i].title + " (" + artarr[i].size + ")"); /* Put together */ div_thmbnldscp[cnt].appendChild(txt_dscp[cnt]); div_thmbnl_cont[cnt].appendChild(div_thmbnlimg[cnt]); div_thmbnl_cont[cnt].appendChild(div_thmbnldscp[cnt]); div_thmbnls.appendChild(div_thmbnl_cont[cnt]); cnt = cnt + 1; } div_thmbnls.style.width = (col_num*(thumbnailcontainer_style.width+thumbnailcontainer_style.left_gap)+thumbnailcontainer_style.left_zero)+"px"; div_thmbnls.style.height = (Math.ceil(cnt/col_num)*(thumbnailcontainer_style.height+thumbnailcontainer_style.top_gap)+thumbnailcontainer_style.top_zero)+"px";} which basically read a object array (artarr) and then dispay the corresponding thumbnail.This piece runs perfectly in Firefox, but in IE it looks terrible because it wouldn't format according to the CSS file (the reason I am setting bunch of 'class' attributes).It's not like IE can't link the CSS file either, because any style I applied to <BODY> seems to work perfectly well...What's going on? Link to comment Share on other sites More sharing options...
hacknsack Posted November 25, 2005 Share Posted November 25, 2005 Maybe this will give you better performance in IE.Does not use "setAttribute()", set the className instead. <script type="text/javascript"> function mkDiv(){ var iDiv = document.getElementById('insert_here'); var str = "This is a test, does it work?"; nwDiv = document.createElement('DIV'); nwDiv.className = "highlight"; textNode = document.createTextNode(str) nwDiv.appendChild(textNode); iDiv.appendChild(nwDiv); } window.onload = mkDiv; </script> </head> <body> <div id="insert_here"> </div> Thanks, Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now