ugrás a tartalomhoz

lekerekitett sarkok + DOM manipuláció

teamtom · 2005. Szep. 1. (Cs), 10.59
A következő problémával kapcsolatban várom a segítségeteket:

Extra tag-ek használatával (lásd: http://www.webreference.com/programming/css_borders/index.html)
építettem flexibilis lekerekített sarkú dobozokat.

Ez tök jól működik, de a plusz tag-ek (<b></b>) miatt nem szép.

DOM/DHtml manipulációval futásidőben létrehozhatók a szükséges tag-ek, a helyzet itt bonyolódik el.

FF és Opera8 alatt tökéletesen, elvárásaim szerint működik a következő javascript:
function roundedCorners() {
	var divs = document.getElementsByTagName('div');
	var rounded_divs = [];
	// az összes "tesztbox" osztályú div megkeresése 
	for (var i = 0; i < divs.length; i++) {
		if (/\btesztbox\b/.exec(divs[i].className)) {
			rounded_divs[rounded_divs.length] = divs[i];
		}
	}
	
	for (var i = 0; i < rounded_divs.length; i++) {
		var original = rounded_divs[i];
		var originalscontent = rounded_divs[i].childNodes[1];
		original.removeChild(originalscontent); // az IE itt akad el;
		// az eredeti tartalom törlése
		while (original.firstChild!=null) {
			original.removeChild(original.firstChild); 
		}
		
		var bfelette1 = document.createElement('b');
		bfelette1.className='b1';
		var bfelette2 = document.createElement('b');
		bfelette2.className='b2';
		var bfelette3 = document.createElement('b');
		bfelette3.className='b3';
		var bfelette4 = document.createElement('b');
		bfelette4.className='b4';
		var balatta1 = document.createElement('b');
		balatta1.className='b5';
		var balatta2 = document.createElement('b');
		balatta2.className='b4';
		var balatta3 = document.createElement('b');
		balatta3.className='b3';
		var balatta4 = document.createElement('b');
		balatta4.className='b2';
		var balatta5 = document.createElement('b');
		balatta5.className='b1';
		
		original.appendChild(bfelette1)
		original.appendChild(bfelette2)
		original.appendChild(bfelette3)
		original.appendChild(bfelette4)
		
		original.appendChild(originalscontent);
		
		original.appendChild(balatta1)
		original.appendChild(balatta2)
		original.appendChild(balatta3)
		original.appendChild(balatta4)
		original.appendChild(balatta5)
	}
}
window.onload = roundedCorners;
A legkevésbé sztenderd böngésző az első .removeChild() sornál
vagyis itt: original.removeChild(originalscontent);
Type Mismatch hibajelzéssel elakad.
Azért gondolom, hogy itt, mert ha enterekkel lejjebb viszem ettől a sortól, a hibaüzenet helye is "lejjebb megy".

Én tudom rosszul, vagy az IE?
Mi a megoldás?
Hiába az elegáns(abb) megoldás, ha az IE (piaci részesedése) miatt nem használhatom. :(

Köszönettel: teamtom
‹ Onmouseoverre másik kép változzon CSS navigációs sáv IE alatti hibája ›
 ■
1

Egy tipp

sajt · 2005. Szep. 2. (P), 12.21
Probald meg az original-t atnevezni mondjuk eredetire.
--
Ámon Tamás - http://amon.hu
2

Lekerekitett sarkok + DOM manipuláció megoldása

teamtom · 2005. Szep. 2. (P), 17.12
Megtaláltam a hibát, illetve a megoldást:

a fenti szkript 13. sorában:
var originalscontent = rounded_divs[i].childNodes[1];
a második gyermek node-ot (.childNodes[1]) választottam ki, mint az eredeti tartalom csomópontját (eköré kerülnek az extra tag-ek), mivel a Firefox DOM inspectorában azt találtam, hogy e node elé és mögé egy-egy text-node bekerül a forráskód indentálása miatt

az IE valószínűleg nem kezeli extra node-ként ezeket, mert amikor az originalscontent-et nem feltételezett sorszámával, hanem az osztálynevével azonosítva képeztem, már az IE is megtalálta.
Tehát a 13. sor definicióját az alábbival kell helyettesíteni:
for (var j = 0; j < rounded_divs[i].childNodes.length; j++) {
   if (rounded_divs[i].childNodes[j].className=="tesztboxcont")) {
      var originalscontent = rounded_divs[i].childNodes[j];
   }
}