Autor | Zpráva | ||
---|---|---|---|
ServIT Profil |
#1 · Zasláno: 17. 8. 2009, 09:11:06
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 |
#2 · Zasláno: 17. 8. 2009, 09:38:09
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 |
#3 · Zasláno: 17. 8. 2009, 10:08:54 · Upravil/a: ServIT
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 |
#4 · Zasláno: 17. 8. 2009, 10:15:00
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 |
#5 · Zasláno: 17. 8. 2009, 10:20:25
„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 |
#6 · Zasláno: 17. 8. 2009, 10:59:04 · Upravil/a: ServIT
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 |
#7 · Zasláno: 17. 8. 2009, 11:21:22
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.
|
||
Časová prodleva: 15 let
|
0