Javascript in XHTML

[Fred-Erik]

Hallo,

Op deze en deze pagina's van mijn website wil ik wat javascript laden. Op de eerste pagina om dubbele scrollbalken te voorkomen door een div automatisch te verkleinen adhv. de resolutie enzo, en bij de tweede pagina hetzelfde bij een iframe, en om de knoppen een een goede kleur te voorzien.

Het probleem is: hoe krijg ik die javascript geladen in mijn XHTML document? Als ik het als extern bestand doe laten IE7 en Firefox de pagina's helemaal niet zien, alleen de achtergrond (Chrome en Opera werken wel gewoon). Als ik het inline laad op de standaard html-manier werkt alles gewoon, maar is het niet XHTML valid. En als ik er <![CDATA[-tags omheen zet laad geen een browser de scripts.

Iemand een idee? Alvast bedankt.

[disjfa]

Wat gaat er mis als het extern is? Bugfix eens.

Opera heeft verder ook netjes een bubbele scrollbalk. Ik zou geen gekke scripts gebruiken en gewoon je browser gebruiken waarvoor die gemaakt is.

[Verwijderd]

Fred-Erik schreef op woensdag 05 november 2008 @ 14:55:
Het probleem is: hoe krijg ik die javascript geladen in mijn XHTML document? Als ik het als extern bestand doe laten IE7 en Firefox de pagina's helemaal niet zien, alleen de achtergrond (Chrome en Opera werken wel gewoon). Als ik het inline laad op de standaard html-manier werkt alles gewoon, maar is het niet XHTML valid. En als ik er <![CDATA[-tags omheen zet laad geen een browser de scripts.

Je verstuurt de pagina's met MIME type tex/html. Je website redert dus als HTML. Derhalve is het niet nodig (misschien zelfs schadelijk) om Javascript code te escapen met <![CDATA[ ... ]]>.

Mocht je ooit overgaan op XHTML (MIME type application/xhtml+xml) dan zal je Javascript zeker niet werken; document.write wordt door XHTML officieel niet ondersteund.

[ Voor 10% gewijzigd door Verwijderd op 05-11-2008 15:04 ]

[Fred-Erik]

@disjfa: Hier heb ik dezelfde pagina neergezet met het javascriptje extern geladen. Open maar eens in IE7 of Firefox (3.0 hiero), dan laat-ie alleen de achtergrond zien.

De JS is bedoeld om als je een reso van 1024x768 of lager hebt, je dan niet een scrollbalk van de pagina, én een scrollbalk van die div krijgt, want dubbele scrollbalken zijn imho niet echt mooi. Heeft dus niks met de browserkeuze te maken.

@Niels Sijm: dus eigenlijk ziet elke browser mijn pagina als html? Maar ik gebruik wel <br/> ipv <br> enzo, en dat gaat wel goed. Officieel moet ik dus het MIME-type veranderen in application/xhtml+xml, maar dan werkt document.write niet meer. Wat is het alternatief dan, naast alles naar html omzetten?

[ Voor 25% gewijzigd door Fred-Erik op 05-11-2008 15:10 ]

[AtleX]

document.write + XHTML = error.

[Fred-Erik]

Ik heb hier even geprobeerd het MIME-type te veranderen, en zoals verwacht werkt het niet. Maar als ik hier het MIME-type verander, zou het toch moeten werken? Want deze Javascript gebruikt geen document.write.

En ja, de script werkt normaal wel, dus dat is niet het probleem.

[ Voor 9% gewijzigd door Fred-Erik op 05-11-2008 15:26 ]

[disjfa]

xhtml is zo labiel dat script wel afgesloten moet worden met een </script> ipv een />

[Sebazzz]

Waarom ondersteun je resoluties lager dan 800 x 600? De meeste mensen draaien XP of hoger, dus een resolutie van 800x600 of hoger. Dan heb je dat document.write helemaal niet nodig.

En daarnaast: application/xhtml+xml accepteert IE niet, die probeert dan de pagina te downloaden als bestand. Bij de rest van de browsers werkt het wel. XHTML is geweldig, maar zolang IE het niet ondersteunt wordt het niks

[Fred-Erik]

It's ALIVE! Bedankt, disjfa, dat werkte.

En maakt het nu uit of ik als MIME-type text/html of application/xhtml+xml kies? Want als ik de javascript extern laad, werkt het allemaal naar behoren in FF, IE7, Opera en Chrome, of ik nu text/html of application/xhtml+xml gebruik. Kan in application/xhtml+xml beter als MIME-type gebruiken als ik wel document.write gebruik?

[disjfa]

Maakt niet uit aangezien browsers toch alles happen. Maar je liegt nu wel als je gaat kijken naar wat je wilt. Maar ik denk niet dat je je druk maakt wat je aan het doen bent als het maar werkt. Je scrollbar script wernt namelijk ook niet helemaal lekker.

Maar dat moet je allemaal natuurlijk zelf uitzoeken.

[Fred-Erik]

@Sebazzz: ik ondersteun helemaal niks lager dan 800x600. Ik ondersteun 1024x768 en hoger. Horizontaal klopt het dan allemaal wel, maar als je de hoogte van de pagina niet automatisch aanpast (probeer deze maar eens in 1024x768 te openen), dan krijg je twee scrollbalken: de rechtse is nutteloos en verwarrend, en wil ik dus niet hebben. Ik heb twee checks in m'n scriptje zitten: eentje die checkt of je 1024 als schermresolutie hebt, die de hoogte van de pagina dan wat inperkt, en eentje die de browserrendergrootte checkt, zodat mensen met IE7 en Google Toolbar (weinig schermruimte dus) ook geen dubbele scrollbalken hebben.

*scrollbalken = verticale scrollbalken

@disjfa: hoe suggereer jij dan dit ik dit gedoe 'netjes' oplos?

[ Voor 6% gewijzigd door Fred-Erik op 05-11-2008 15:45 ]

[crisp]

document.write is sowieso niet nodig; wat je kan doen is bijvoorbeeld de body class aanpassen op basis van resolutie, en dan zoiets in je gewone css bestand zetten:

Cascading Stylesheet:

.res600 #inhoud {
  height:455px;
}

.res600 .grootte1 {
  height:405px;
}

.res600 #beleid {
  height:375px;
}

Verder: IE ondersteund geen XHTML met application/xml+xhtml mimetype en zal dat voorlopig ook niet gaan ondersteunen. De keuze HTML versus XHTML is er eigenlijk een die je moet maken op basis van het antwoord op de vraag: "heb ik specifieke features van XHTML nodig?" Als het antwoord daarop "nee" is kan je net zo goed HTML gebruiken, XHTML is immers niets anders dan HTML in een XML jasje.

[Fred-Erik]

Oké, bedankt. Class veranderen is idd een betere oplossing, scheelt me ook weer twee css-bestanden.

Ik dacht dat een voordeel van XHTML was dat het sneller rendert omdat het stricter is als HTML. Maar voor compatibiliteit is het dus het handigst overal gewoon HTML van te maken? XHTML met MIME-type text/html is dus eigenlijk niet 'kloppend', en XHTML met het goede MIME-type wordt niet ondersteund door IE. Dan lijkt het me idd het makkelijkst alles HTML te maken.

[RobIII]

Fred-Erik schreef op woensdag 05 november 2008 @ 15:55:
Ik dacht dat een voordeel van XHTML was dat het sneller rendert omdat het stricter is als HTML.

Verkeerd gedacht Daarbij: bij een correcte XHTML implementatie in een browser zou de eerste de beste minieme fout een compleet niet-renderende pagina (moeten) opleveren (ofwel: gewoon een harde error zonder dat je ook maar iets van de pagina ziet). Dan weet ik wel wat ik liever heb

Heel dat XHTML is me al lange tijd een doorn in het oog; er zijn zo veel mensen die het gebruiken maar dan puur 'omdat iedereen het doet' of 'omdat het hip is' of 'omdat het de opvolger van HTML is' of dat soort onzin. De ene procent van de gevallen waar XHTML wél toegevoegde waarde c.q. nut heeft zul je me niet over horen maar voor de rest ... bah. Het staat overigens al een tijdje op mijn TODO lijstje om eens een informatief stukje over te schrijven op mijn blog maar ik heb meer TODO's en ben momenteel ook nog erg druk met andere zaken

Als je hip wil zijn gebruik je HTML 5

[ Voor 9% gewijzigd door RobIII op 05-11-2008 18:47 ]

[Sebazzz]

RobIII schreef op woensdag 05 november 2008 @ 16:00:
[...]

Als je hip wil zijn gebruik je HTML 5

Wederom jammer van de browser support.

Maar die elementen in HTML5 zijn wel sappig <progress>, <meter>, <video>, <audio>
Ik kijk ernaar uit!

[Fred-Erik]

quote: crisp

wat je kan doen is bijvoorbeeld de body class aanpassen op basis van resolutie

Ehm, nu een beetje domme vraag waarschijnlijk, maar waarom werkt dit niet?

code:

if (document.documentElement.clientHeight < 600) { document.body.className = 'res600'; }

icm. dit in style.css:

code:

.res600 #inhoud {
  height:460px;
}

.res600 .grootte1 {
  height:410px;
}

.res600 #beleid {
  height:380px;
}

[crisp]

Fred-Erik schreef op woensdag 05 november 2008 @ 18:31:
[...]

Ehm, nu een beetje domme vraag waarschijnlijk, maar waarom werkt dit niet?

Omdat je je javascript al in je <head> sectie inlaadt en hij daar ook uitgevoerd wordt; op dat moment bestaat de body nog niet in je DOM

[Fred-Erik]

Omdat je je javascript al in je <head> sectie inlaadt en hij daar ook uitgevoerd wordt; op dat moment bestaat de body nog niet in je DOM

Bedankt.