[JS] Breedte van het scherm

[Kaastosti]

Okee, ik weet het, hier zijn honderden tutorials over te vinden, veel posts over en ze werken allemaal... behalve bij mij (zoals gewoonlijk).

Ik test op NetScape 6, dat werkt. Ik test op IE6, dat werkt niet. Bij het uitvoeren van onderstaande code houdt alles op (done, but with errors on page) en krijg ik de rest van de code ook niet meer.

JavaScript:

function getBrowserSize(){
    if (parseInt(navigator.appVersion)>3) {
        if (navigator.appName=="Netscape") {
            winW = window.innerWidth;
        }
        if (navigator.appName.indexOf("Microsoft")!=-1) {
            alert('MS');
            var winW = document.body.offsetWidth;
        }
    }
    else{
        winW = 0;
    }
    document.write("Window width = "+winW);
}
getBrowserSize();

De alert 'MS' krijg ik, dus hij komt in dat gedeelte. Ik heb verscheidene dingen geprobeerd in plaats van offsetWidth, namelijk:

document.screen.width;
document.body.width;
document.body.clientWidth;

Deze heb ik van een aantal tutorialsites geplukt. In Netscape geen problemen, alles IE dus... ik zit hier al een tijdje mee te prutsen en krijg het maar niet aan de gang. Waar zit de fout?

[crisp]

Je kan de breedte van de body pas opvragen op het moment dat er ook daadwerkelijk een body is
Je moet de functie dus pas aanroepen als de pagina aangemaakt is...

[Kaastosti]

Aha Ik vermoede zoiets... het is te logisch, thx!

Maar nou kom ik een probleem tegen wat te maken heeft met verschil van laden van javascript tussen netscape en IE. Mijn oplossing hiervoor is een functie 2x (bah, ik weet 't) declareren, zodat zowel Netscape als IE 'm op de goede momenten herkent.

Het probleem hierbij is, dat mijn huidige functie gebruik maakt van de body van de html. IE laadt echter eerst alle bestanden (en variabelen) en gaat daarna pas kijken wat er gedaan moet worden. Daardoor probeert deze een breedte te krijgen van een body die op dat moment nog niet bestaat.

Is het mogelijk om ergens anders de breedte van te krijgen? Dit gebeurd, als ik de manier van laden van IE begrijp, voordat er verder iets van html als body, div oid geladen is. Het moet dus iets zijn wat er sowieso is, zoals bijv. de window zelf.

Nou ben ik aan het zoeken geslagen op allerlei JS pagina's, maar de daar aangedragen mogelijkheden resulteren niet in een breedte. Bij een alert er van blijft deze 'undefined'

[ Voor 91% gewijzigd door Kaastosti op 22-04-2003 14:24 ]

[Verwijderd]

als je nou gewoon dat script aanroept als de pagina geladen is, zoals crisp al zei, dan kan je gewoon van alles wat je wilt de breedte opvragen.

[Fatamorgana]

Gewoon zoals gezegd: in de body onload="getBrowserSize()"

[Kaastosti]

Alleen lijkt IE z'n scripts al aan te roepen en uit te voeren op het moment dattie ze tegenkomt in de header. Ook in die scripts zijn die functies nodig. Het onLoad() in de body heeft op die manier geen zin dus...

[crisp]

Kaastosti schreef op 22 April 2003 @ 16:20:
Alleen lijkt IE z'n scripts al aan te roepen en uit te voeren op het moment dattie ze tegenkomt in de header. Ook in die scripts zijn die functies nodig. Het onLoad() in de body heeft op die manier geen zin dus...

IE (en elke andere JS-capable browser) zal een functie aan gaan roepen op het moment dat hij een aanroep vind buiten een event-handler. Binnen een event-handler zal de functie pas aangeroepen worden op het moment dat dat event getriggered wordt. Voor het onload-event is dat nadat de hele pagina geladen is.
Wellicht ben je vergeten de losse getBrowserSize(); uit je <script> sectie weg te halen?

[Kaastosti]

Nee dat is het niet.. hier een beknopte schets van de situatie:

JavaScript:

index.html
[header]
  function getBrowserSize (returned breedte van de window)
  function getColumnWidth (returned de breedte n.a.v. browsersize)
  <script menuscript.js> (bevat alle techniek, functies etc.)
  <script menuitems.js> (bevat de array met menuitems en menuafmetingen)
[/header]
[body]
  function getBrowserSize (returned breedte van de window)
  getColumnWidth(getBrowserSize()) (dus eerste aanroep van de functie getBrowserSize)
  new Menu("menu", array); (aanroep voor bouwen van het menu)
[/body]

menuitems.js
var breedte = getBrowserSize(); (hier loopt ie op stuk)
var item_width = getColumnWidth(breedte); (deze werkt dus automatisch ook niet)

De breedte is in menuitems.js nodig, omdat het menu zelf een layer is, die dus niets met de tabel van doen heeft. Voor beiden moet dus onafhankelijk de breedte worden berekend en neergezet.

Bij een alert(breedte) onder het toekennen van getBrowserSize() aan breedte, krijg ik nog steeds 'undefined', terwijl de declaratie van de functie ook binnen de body gedaan is.

[ Voor 3% gewijzigd door Kaastosti op 22-04-2003 16:32 ]

[Verwijderd]

ja, maar je body is nog niet af op dat moment, je kan pas breedtes gaan uitlezen op het moment dat de onload gefired wordt.

je kan dus de functies uit je menuitems.js die je layer positioneren pas gaan aanroepen nadat het document geladen is

[Kaastosti]

Dat klopt, aangezien er gebruik wordt gemaakt van de body. Die is er idd pas als de index.html klaar is met laden. In Netscape werkt dit dan ook best. Ik krijg bij IE echter het idee dat er nogal rottig met javascript om wordt gegaan...

[crisp]

Ik weet nog wel een ranzige hack:

HTML:

<html>
<head>
<title>test</title>
</head>
<body>
<div id="dummy" style="width: 100%">&nbsp;</div>
<script type="text/javascript">
document.write(document.getElementById('dummy').offsetWidth);
document.getElementById('dummy').style.display = 'none';
</script>
</body>
</html>

enig ander alternatief is het opbouwen van je menu pas na het laden van de pagina te doen; je zult dan met createElement of innerHTML dingen weg moeten gaan schrijven in je body, of in ieder geval dan pas breedte-afhankelijke zaken gaan regelen.

Het hele probleem is dat IE de innerWidth/innerHeight property van het window object niet kent itt echte browsers.

Als je dingen trouwens breedte-afhankelijk maakt, houdt je dan ook rekening met resizen van de browser?

[ Voor 56% gewijzigd door crisp op 22-04-2003 16:47 ]

[Kaastosti]

En dat is precies het probleem... daar probeer ik dus met behoorlijk ranzige code toch omheen te werken

[Verwijderd]

ik snap niet dat je zo moeilijk zit te doen eigenlijk het is niet moeilijker als een functie:

PHP:

function createMenu() {
//lees de breedtes uit die je wilt hebben en donder je hele menu in de innerhtml van een menu div die je al hebt
var menuMuk = 'lalalaaaa menuhtml';
document.getElementById('menu').innerHTML = menuMuk;
//pas eventueel nog wat dingen als breedtes en hoogtes aan
}

en dan in je body onload en onresize deze functie aanroepen:

HTML:

<body onload = "createMenu();" onresize="createMenu();">
<div id="menu">hier komt het menu</div>
</body>

edit mbt hieronder: er komt dus _helemaal geen_ functie aanroep in de head of de body, maar pas onload, dan is alles bekend

en omdat ik me af begin te vragen hoever je js kennis eigenlijk reikt: www.w3schools.com, wellicht steek je nog wat op onder js, dhtml en dom

[ Voor 56% gewijzigd door Verwijderd op 22-04-2003 16:58 ]

[Kaastosti]

Het probleem is denk ik dat de functie om de grootte van de browser te checken, zowel in de html als in de js gebruikt wordt. Als ik die in de js _ook_ nog een keer zet, is volgens mij de body daar niet meer bekend...

In de html is getBrowserSize en getColumnSize nodig om de breedte van de <td> te regelen n.a.v. de totale breedte van het scherm.

In de js is getBrowserSize en getColumnSize nodig om de breedte van het menu te regelen n.a.v. de totale breedte van het scherm.

Deze functies zijn nu in de html gedefinieerd en werken niet meer in de javascript file. Als ik ze daar aanroep, werkt het simpelweg niet meer. Geen menu meer op het scherm iig. Daar zit 'm het probleem.

En nee, ik doe geen aanroep (meer) van die functies in de header. Het moge duidelijk zijn dat javascript niet mijn favoriete taal is, geef mij maar php / java... helaas is voor een dergelijk menu javascript de enige optie

[ Voor 69% gewijzigd door Kaastosti op 22-04-2003 17:00 ]

[RM-rf]

ik zie in je 'schets' twee keer de funtie getBrowserWidth gedefinieerd worden

maak daar één keer van en waarschijnlijk zijn een boel van je problemen opgelost:
volgens mij kan je ook van document.body gewoon de hooget opvragen als deze nog niet afgesloten is:

code:

function getWinWidth()
{
   b = (document.documentElement) ? document.documentElement : document.body
   return (window.innerWidth) ? window.innerWidth : b.offsetWidth
}

werkt volgens mij gewoon (gebruik een soortgelijke functie en roep deze volgens mij ook gewoon ook voor het load-event aan, in een stat-scriptje)

de methode is beter omdat checken op navigator.userAgent wat minder is, dan direct checken of een waarde bestaat.
de documentElement lostte wat problemen op in msie6 en validerende XHTML1.1 strict

[Kaastosti]

Het probleem is op dit moment niet het aanroepen van de functies, maar het beschikbaar zijn van variabelen in een js bestand. In de index.html wordt de functie getBrowserSize() aangeroepen, die returned een variabele en die var wordt gebruikt voor de tabel. Dat werkt, dus dat is de helft van het verhaal en tevens het bewijs dat de functie in dit geval werkt (buiten beschouwing gelaten of het de mooiste/snelste oplossing is).

De breedte van het menu wordt echt in menuitems.js berekend met dezelfde functie, die dus gedefinieerd wordt in de index.html. Het probleem hierbij is, dat de variabele die bij de eerste aanroep aangemaakt is, niet beschikbaar is in het js bestand. Ook de functie werkt niet, aangezien er in het js bestand geen body beschikbaar is. Ik kan hier uiteraard nog documentElement voor proberen, je weet maar nooit.

Ik heb wel even gekeken hoe beide browsers de bestanden laden, en dit komt overeen. Eerst wat er aangegeven wordt in de header van de html (de js files), en daarna de body.