Autor Zpráva
ServIT
Profil
Dobrý den,
Vytvářím ( je to spíše hraní si a ladění, pro pozdější využití) "plovoucí okno".. a nějak mě to zlobí.

Můj postup (zhruba) :
var doc_body = document.getElementsByTagName('body')[0];
var envelope = document.createElement('div');
var iTable = document.createElement('table');
doc_body.appendChild(envelope);
envelope.appendChild(iTable);
envelope.setAttribute("id","chkobjenvelope");
with (envelope.style) {
    .... mimo jiné nastavení okraje
}
with (iTable.style) {
    ....mimo jiné nastavení okraje
}


stejným způsobem nakrmím tabulku řádkama a buňkama

výsledkem by měl být obdélnik, jehož vnitřní tabulka vzbuzuje svým horním řádkem zdání lišty se zavíracím tlačítkem, a spodní řádek zase vypadá jako stavový řádek normálního okna. Uprostřed je zobrazovaný obsah.

Mozilla docela chápe, co po ní takto napsaný kód chce, okno se dá táhnout, zavřít, prostě funguje to. Jak už ale bývá zvykem, co zvládne firefox, tam Explorer kulhá (mám jen verzi 6, ostatní jsem nezkoušel).
Dokonce i Konqueror (3.5) to vykreslí, a to už mi tedy bere dech!

Je jasné, že někde dělám chybu, protože IE zrovna moc neznám, abych doplnil svůj výklad, IE vykreslí pouze ten <div>, vnucené styly divu chápe, ale tam jeho práce taky skončí. Tabulka a její obsah se nezobrazí. Zkoušel jsem postup vytváření tohoto složeného objektu odzdola (do řádků jsem nacpal buňky, řádky do tabulky, tabulku do divu a div do dokumentu, stejně tak naopak - div do dokumentu, tabulku do divu, do tabulky řádky, do řádků buňky, ale chová se to stále stejně.

Má prosím někdo s tímto jevem zkušenosti a nakopl by mě správným směrem?
předem díky
Milan
Chamurappi
Profil
Reaguji na ServITa:
document.getElementsByTagName('body')[0]
Proč ne document.body?

envelope.setAttribute("id","chkobjenvelope")
Proč ne envelope.id = "chkobjenvelope"? Doporučuji používat standardní vlastnosti HTML DOMu.

with (envelope.style)
Nedoporučuji používat with.
Nedoporučuji pracovat s objektem style, měň třídy.

Je jasné, že někde dělám chybu
To je asi tak jediné, co lze z tvého popisu jednoznačně vyvodit. Chyba bude spíš v CSS než v JS. Doporučuji vyvíjené věci průběžně testovat ve vícero prohlížečích, předejdeš nepříjemným překvapením na konci vývoje.

Prosím o odkaz na živou ukázku.
ServIT
Profil
Omlouvám se za zdržování, další hodinka hledání mě zanesla na http://www.webmasterworld.com/javascript/3614377.htm

a tam to řeší skoro stejně, a funguje jim to!!!

jediný rozdíl je v tom, že v tabulce mají tbody element, což jsem taky zkusil, a je po problému...

Konec dobrý , všechno dobré...
Děkuji za připomínky ke kódu, mezitím jsem si váš příspěvek pročetl i s komentáři, a trošku ten svůj kód překopal ...

ještě se musím hodně učit :)
milan
Chamurappi
Profil
Reaguji na ServITa:
jediný rozdíl je v tom, že v tabulce mají tbody element, což jsem taky zkusil, a je po problému
Element <tbody> má v HTML nepovinné obě značky (počáteční i koncovou), jeho imaginární pozice se odvozuje z kontextu, takže je víceméně přikován ke každé tabulce.

Konec dobrý, všechno dobré...
Příště ale k popisu problému nezapomeň dodat ukázku, s ní bude konec vynikající.
ServIT
Profil
Element <tbody> má v HTML nepovinné obě značky (počáteční i koncovou), jeho imaginární pozice se odvozuje z kontextu, takže je víceméně přikován ke každé tabulce.

To jsem si myslel taky, proto mě vůbec netrklo, že by DOM model IE jeho definici explicitně vyžadoval ... No, lidstvo je zase o něco dál :D

Milan
ServIT
Profil
No a aby jste nebyli ošizeni o ten zdroják (ale varuju, je to fakt jen rozpracovaný kód), tak přikládám ..

Teď již se vše zobrazuje správně, ale, v IE mi trochu zlobí přemísťování toho divu. Mělo by to fungovat jako s klasickým oknem, ale občas se mi rozhodí synchronizace, s myší a okno plave v uctivé vzdálenosti od kurzoru. ale zkouším to přes pomalé VNC, čili možná je chyba tam ... a možná by to chtělo si pohrát (alespoň v případě IE se skutečnou pozici kurzoru, příp. celý ten pohybovací kód předělat...

V ukázce jsou taky odkazy na externí struktury, (detekce prohlížeče a pod.), ale mělo by bát pochopitelné její využití.
Za připomínky budu jen rád. s tím přístupem ke stylu prvku ale asi nic dělar nebudu (Chamurappi :)), protože to prostě funguje dobře, a dají se pomocí toho plynule měnit jednotlivé vlastnosti.

function myWindow(titstring) {
	var doc_body = document.getElementsByTagName('body')[0];
	var outputdiv = null;
	var iTable;
	var title = titstring;
	var cMessage = null;
	var cTitle   = null;
	var cClose   = null;

	var titleBgColor    = '#63AAE4';
	var titleColor      = 'white';
	var messageBgColor  = '#EFEFEF';
	var messageColor    = 'black';

	var mouse_X = null;
	var mouse_Y = null;
	var deltaX;
	var deltaY;

	var divleft = 200;
	var divtop = 200;

	this.showoutput = function() {
		outputdiv = getoutputdiv();
		writeLog(check_obj(outputdiv));
		cMessage.innerHTML = 'Misto pro výstup';
		doc_body.appendChild(outputdiv);
		outputdiv.style.display = 'block';
	}

	this.setTitle = function(myTitle) {
		if (myTitle) {
			cTitle.innerHTML = myTitle;
		} else {
			cTitle.innerHTML = '';
		}
	}

	this.setContent = function(myContent) {
		if (myContent) {
			cMessage.innerHTML = myContent;
		} else {
			cMessage.innerHTML = '';
		}
	}

	this.addcontent = function(myContent) {
		if (myContent) {
			cMessage.innerHTML = cMessage.innerHTML+myContent;
		}
	}

	var getoutputdiv = function() {
		//obalující div
		var envelope = document.createElement('div');
		envelope.id = 'chkobjenvelope';
		with (envelope.style) {
			position        = 'absolute';
			width           = '400px';
			height          = '250px';
			top             = divtop +'px';
			left            = divleft+'px';
			border          = '1px solid blue';
			padding         = '0px';
//			display         = 'none';
		}

		// vnitřní tabulka
		iTable = document.createElement('table');
		with (iTable.style) {
			width   = '100%';
			height  = '100%';
			border  = '1px solid red';
			margin  = '1px';
			padding = '0px';
		}
		tbo = document.createElement('tbody');

		// upper row
		var tRow = document.createElement('tr');
		// main row
		var mRow = document.createElement('tr');
			mRow.height = '100%';
		//bottob row
		var bRow = document.createElement('tr');
	// cell with title

		cTitle = document.createElement('td');
		//set-up properties
		with (cTitle.style){
			backgroundColor = titleBgColor;
		 	color 					= titleColor;
		 	fontWeight 			= 'bold';
//		 	width           = '100%';
		}
		cTitle.width = '100%';
		cTitle.onmousedown = titleActivate;
		cTitle.onmouseup   = titleDeActivate;
		cTitle.innerHTML = title;

		//cell with close "button"
		cClose = document.createElement('td');
		with (cClose.style) {
		 	backgroundColor = 'red';
		 	color           = 'white';
		 	fontWeight			= 'bold';
		 	fontSize				= '14px';
		}
		cClose.innerHTML = 'X';
		cClose.onclick = closew;
		
		// cell with message
		cMessage = document.createElement('td');
		cMessage.colSpan = '2';
		cMessage.height = '100%';
		with (cMessage.style) {
			width = '100%';
			color = messageColor;
			backgroundColor = messageBgColor;
		}

		// cell with "status"
		var cStatus = document.createElement('td');
		cStatus.colspan = '2';
		
		
		envelope.appendChild(iTable);
		iTable.appendChild(tbo);
		tbo.appendChild(tRow);
		tbo.appendChild(mRow);
		tbo.appendChild(bRow);
		
		tRow.appendChild(cTitle);
		tRow.appendChild(cClose);
		mRow.appendChild(cMessage);
		bRow.appendChild(cStatus);
		return envelope;
	}

	var movethis = function(e){
		var OffsetX;
		var OffsetY;
		var newtop;
		var newleft;
		if (client_env.browser_name == 'Explorer') {
			OffsetX = window.event.offsetX;
			OffsetY = window.event.offsetY;
			} else {
			OffsetX = e.pageX;
			OffsetY = e.pageY;
		}
		if (mouse_X == null) {
			mouse_X = OffsetX;
			mouse_Y = OffsetY;
			return;
		}
		deltaX = OffsetX - mouse_X;
		deltaY = OffsetY - mouse_Y;

		newleft = divleft + deltaX
		outputdiv.style.left = newleft + 'px';
		mouse_X = OffsetX; divleft = newleft;

		newtop = divtop + deltaY;
		outputdiv.style.top = newtop+'px';
		mouse_Y = OffsetY; divtop = newtop;
		cMessage.innerHTML = outputdiv+'<br /> pozice X = '+deltaX+' a pozice Y = '+deltaY;

	}

	var titleActivate = function() {
		cTitle.style.backgroundColor = 'white';
		cTitle.style.color = 'black';
		document.onmousemove = movethis;
	}

	var titleDeActivate = function() {
		cTitle.style.backgroundColor = titleBgColor;
		cTitle.style.color = titleColor;
		document.onmousemove = null;
		mouse_X = null;
		mouse_Y = null;
	}

	var closew = function() {
		doc_body.removeChild(outputdiv);
	}
}
Aichi
Profil
Shrnutí a potvrzení. Pokud chcete v IE pracovat s tabulkou, musí mít vždy tbody. Tedy přidávat řádky jde pouze do tbody, thead a tfoot, ne přímo do table.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: