Meten hoogte pagina

Status
Niet open voor verdere reacties.
W

wouteronline55

Gebruiker
Lid geworden
29 dec 2005
Berichten
61
Beste Forumleden,

Ik heb binnen mijn project een aantal pagina's waarbij de hoogte variabel is. Met het oog op de opmaak is het bij een korte pagina beter om bepaalde onderdelen op een andere locatie te tonen.

Het maken van deze logica is opzich niet moeilijk, maar ik kan nergens een manier vinden waarmee ik kan bepalen hoe hoog de gegenereerde pagina is.

Bestaat er überhaupt wel een mogelijkheid (ook buiten PHP) om te meten hoe hoog een pagina is (in bv. pixels)?
 
Heeft weinig met PHP te maken, meer met JavaScript aangezien het client-side moet worden gecontroleerd ;)

Neem deze pagina eens door.

Tevens verplaatst naar JS
 
Klopt, waarschijnlijk moet ik het in de javascript hoek zoeken.

De link die je mij gegevens hebt klopt in principe wel, maar deze meet de grootte van de browser. Of de pagina nu 1 regel bevat of 150 regels lang is, de hoogte waarde blijft hetzelfde.

Ik ben dus op zoek naar een functie die mij verteld hoe hoog de pagina daadwerkelijk is en als je dus een <br><br> zou toevoegen aan een pagina, dan wordt de waarde ook hoger.
 
Via bovenstaande link heb ik deze code kunnen achterhalen:

HTML: 
<script>
if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}

document.write(
 "Window width = "+winW+"<br>"
+"Window height = "+winH
)
</script>

In Firefox blijft de hoogtewaarde (ondanks de hoogte van de pagina gelijk) en bij IE blijft de waarde altijd 0. De breedte-waarde wordt wel aangegeven.
 
wouteronline55 zei:
Via bovenstaande link heb ik deze code kunnen achterhalen:

HTML: 
<script>
if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}

document.write(
 "Window width = "+winW+"<br>"
+"Window height = "+winH
)
</script>

In Firefox blijft de hoogtewaarde (ondanks de hoogte van de pagina gelijk) en bij IE blijft de waarde altijd 0. De breedte-waarde wordt wel aangegeven.
Klik om te vergroten...


Dat is een waardeloos stuk script. Het gebruikt ook nog eens browserherkenning en werkt dus sowieso alleen in browsers gemaakt door Microsoft of Netscape.
PHP: 
function getScreenDimensions() {
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    return {h:window.innerHeight,w:window.innerWidth};
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    return {h:document.documentElement.clientHeight,w:document.documentElement.clientWidth};   
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    return {h:document.body.clientHeight,w:document.body.clientWidth};   
  }
    return null;
}

Deze is beter, je voegt deze functie toe in je script. Wanneer je dan de breedte nodig hebt gebruik je

PHP: 
getScreenDimensions().w

Wanneer je de hoogte nodig hebt gebruik je

PHP: 
getScreenDimensions().h


Even een voorbeeld. Je wil een div met dezelfde afmetingen als het 'scherm' (viewport) van de gebruiker:

PHP: 
var bigDiv = document.getElementById('bigDiv');

bigDiv.style.height = getScreenDimensions().h +'px';
bigDiv.style.width = getScreenDimensions().w +'px';

Het is alleen nog maar de vraag of dit ook echt is wat je wilde.
 
Laatst bewerkt:
De TS wilde niet de afmetingen van het scherm / viewport, maar de hoogte van het document.

Het hele BOM is hier dus overbodig, het gaat hier puur en alleen om het DOM.
 
ErikBooy007 zei:
De TS wilde niet de afmetingen van het scherm / viewport, maar de hoogte van het document.

Het hele BOM is hier dus overbodig, het gaat hier puur en alleen om het DOM.
Klik om te vergroten...

Dat klopt. Dus niet de grootte van het scherm, maar de hoogte van het document.

Iemand daar een oplossing voor?
 
PHP: 
    function getDocDimensions() {
    var dE = document.documentElement, dB = document.body;
        return {
            h:Math.max(Math.max(dB.scrollHeight,dE.scrollHeight),Math.max(dB.offsetHeight,dE.offsetHeight),Math.max(dB.clientHeight,dE.clientHeight)),
            w:Math.max(Math.max(dB.scrollWidth,dE.scrollWidth),Math.max(dB.offsetWidth,dE.offsetWidth),Math.max(dB.clientWidth,dE.clientWidth))                                                              
        }        
    }

En dan

PHP: 
getDocDimensions().h
 
Ook deze code geeft bij verschillende paginalengte's, steeds dezelfde waarde...

Of ik heb hem niet goed geïmplementeerd?

HTML: 
<script>
function getDocDimensions() {
    var dE = document.documentElement, dB = document.body;
        return {
            h:Math.max(Math.max(dB.scrollHeight,dE.scrollHeight),Math.max(dB.offsetHeight,dE.offsetHeight),Math.max(dB.clientHeight,dE.clientHeight)),
            w:Math.max(Math.max(dB.scrollWidth,dE.scrollWidth),Math.max(dB.offsetWidth,dE.offsetWidth),Math.max(dB.clientWidth,dE.clientWidth))                                                
        }        
    } 
</script>

HTML: 
<script>
document.write(getDocDimensions().h)
</script>
 
Heb je dit

PHP: 
<script>
document.write(getDocDimensions().h)
</script>

Helemaal onderaan de pagina staan? Je moet die code namelijk pas aanroepen als de hele pagina geladen is.

Als je hem ergens bovenaan zet, worden de dimensies al opgevraagd terwijl de pagina nog aan het opbouwen is.
 
Je hebt gelijk. Bedankt, dit werkt perfect!

Ik nog wel even 2 vragen:

- Door het invoeren van de functie is de opmaak (vanuit een CSS) helemaal weggevallen. Ik vermoed dat het te maken heeft de "document.body". Kan ik dit omzeilen?
- Aangezien ik een noob ben op het gebied van Javascript: hoe kan ik de variabelen getDocDimensions().h omzetten naar een PHP variabele?

In ieder geval bedankt tot zover!
 
  1. Het zou helpen als je je pagina online kan laten zien, maar ik ga ervan uit dat het komt omdat je gebruik maakt van document.write. Dat is niet echt de manier om java ouput toe te passen. Je kan bijvoorbeeld beter een DIV gebruiken om de informatie mee in je pagina te zetten:

    HTML: 
    <div id='hoogte'></div>

    en dan in Javascript:

    PHP: 
    document.getElementById('hoogte').innerHTML = getDocDimensions().h
  2. Dat kan op verscheidene manieren, zonder AJAX kan je bijvoorbeeld de waarde in een hidden input-field in een form zetten.

    HTML: 
    <input type='hidden' id='hoogte'></div>

    en dan in Javascript

    PHP: 
    document.getElementById('hoogte').value = getDocDimensions().h

    Dan kan je het form verzenden naar een PHP pagina.
 
Bedankt voor je reactie.

Het is eigenlijk de bedoeling dat de waarde van het javascript (de hoogte van een pagina), op diezelfde pagina wordt gebruikt door een PHP script. Dus deze moet (op diezelfde pagina) teruggestuurd worden naar de server.

Jij noemt Ajax... zou jij een voorbeeld kunnen geven?
 
Wat je kunt doen is het volgende. Onderaan je pagina zet je:

PHP: 
if(getDocDimensions().h < 1000){
    window.location.href = 'jepaginanaam.php?h=' + getDocDimensions().h;
}

Dan kun je met PHP elke keer als de pagina geladen wordt, kijk of er een lage pagina meegegeven wordt.

PHP: 
if(isset($_GET['h'])){
    if($_GET['h'] < 1000 && ctype_digit($_GET['h'])){
        // Geef aan dat de lage layout gebruikt moet worden;
        include('small_template.php');
    } else {
        include('large_template.php');
    }
} else {
    include('large_template.php');
}

Iets in die geest.

Overigens moet je dan zorgen dat je normaal gesproken large_template laadt en dat de hoogte check in die file staat. Die check mag niet uitgevoerd worden als small_template.php gebruikt wordt. Dan kom je in een oneindige loop.
 
Laatst bewerkt:
Nadeel bij deze oplossing is natuurlijk wel dat elke pagina opnieuw geladen wordt. Er is geen oplossing dat dit achter de schermen gebeurt?
 
Laatst bewerkt door een moderator:
Gebruik je AJAX :rolleyes:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan