[JS] Venstergrootte aanpassen aan inhoud - Softwareontwikkeling

dinsdag 6 april 2004 01:21

Acties:

Topicstarter

Ik heb een JavaScript pop-up venster waar een klein formulier in staat. Omdat dit venster als een soort dialog fungeert, leek het mij aardig om hem zo'n formaat te geven dat de invoerelementen er precies in passen. Dat is echter niet zo eenvoudig te doen omdat verschillende browsers form-elementen andere groottes geven (vooral die textarea is lastig) en bovendien de inhoud van het venster variabel is. De grootte van het venster bij het openen hardcoden is dus geen oplossing.

Nu had ik gedacht dit met JavaScript op te lossen (het venster wordt tenslotte toch al geopend met JavaScript) en wel door het formulier in een div-element te plaatsen en de grootte van het venster aan te passen op de grootte van dit div-element, via een onLoad-callback. Helaas werkt dit niet omdat ik de attributes van het div-element niet kan uitlezen zonder ze zelf eerst te initialiseren, terwijl ik nu juist de waarden wil gebruiken die de browser eraan gegeven heeft!

Hieronder staat een voorbeeldje, met een te groot (vooral te hoog) venster met daarin het div-element (voor het gemak met rode achtergrondkleur) .

Afbeeldingslocatie: http://hell.student.utwente.nl/temp/1081206604_dialog.png

Nu het doel en het probleem duidelijk zijn, komt mijn vraag: is het mogelijk om op de een of andere manier de grootte van een div-element (het rode gebied in de screenshot) op te vragen of is er een andere manier om de grootte van het venster te wijzigen zodat de inhoud er een beetje netjes in past?

dinsdag 6 april 2004 01:22

Acties:

disjfa

be

vaste scherm grootte of een procenten gebruik?

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 6 april 2004 01:41

Acties:

Soultaker

Topicstarter

Hoe bedoel je? (Je zin mist wat essentiële onderdelen zoals een onderwerp, persoonsvorm, etc.)

dinsdag 6 april 2004 07:27

Acties:

crisp

Devver

Pixelated

wat is er mis met clientHeight/offsetHeight/scrollHeight (densoods van je body, een div is niet echt noodzakelijk) of window.innerHeight/innerWidth (non-IE)?
Let wel op dat een resizeTo in sommige browsers de buitenmaat vergroot; je zal dan mbv het verschil van voor en na de resize nog een keer moeten resizen.

Intentionally left blank

dinsdag 6 april 2004 18:07

Acties:

Soultaker

Topicstarter

Het probleem met clientHeight/offsetHeight/scrollheight/innerHeight is dat ze inderdaad alleen een waarde hebben op het body-element en dus niet op mijn eigen div-element (clientHeight is daarop 0 en de andere attributes zijn undefined).

Het body-element is echter niet bruikbaar omdat die altijd even groot is als de inhoud van het hele venster (wat ook logisch is) en in ieder geval niet afhankelijk is van de inhoud ervan. Ik denk dus dat ik echt de (door de browser bepaalde) afmetingen van het div-element nodig heb, maar mijn probleem is dat ik niet weet hoe ik daar aan kan komen. Als ik die afmetingen heb lukt het resizen waarschijnlijk wel.

dinsdag 6 april 2004 18:20

Acties:

crisp

Devver

Pixelated

Je hebt denk ik ook de scrollHeight nodig (van je body dus - onload)

[ Voor 120% gewijzigd door crisp op 06-04-2004 19:00 ]

Intentionally left blank

dinsdag 6 april 2004 18:53

Acties:

T-MOB

Volgens mij denk je te moeilijk met javascript. Ook form elementen kun je prima op de pixel stylen....

code:

<html>
<head> 
 <title>Formulier</title>
  <style>
   textarea { width: 300px; height: 200px; }
  </style>
</head>

<body>
<textarea name="text">Type uw text hier</textarea>
</body>
</html>

Dit werkt bij mijn weten in alle browsers (ok, IE3 heeft er moeite mee

).

edit:
*T-MOB had de TS beter moeten lezen

:

Soultaker schreef op 06 april 2004 @ 01:21:
en bovendien de inhoud van het venster variabel is.

Het ligt er een beetje aan hoe variabel de inhoud is (moet je ook in de breedte kunnen variëren). Een variabele hoogte zou ik namelijk zowieso vermijden omdat je weleens boven de 580 pixels uit zou kunnen komen. Dan zul je dus zowieso ruimte moeten inbakken voor een evt scrollbalk.
Zelf gebruik ik dan ook een vaste breedte en hoogte voor mijn popups. Dan maar scrollen als het te lang wordt.....

[ Voor 50% gewijzigd door T-MOB op 06-04-2004 19:11 ]

Regeren is vooruitschuiven

dinsdag 6 april 2004 19:25

Acties:

Soultaker

Topicstarter

Alle afmetingen handmatig instellen is ook een optie, maar er zitten wat nadelen aan. Ik vind het juist prettig dat de browser zelf bepaalt wat de beste grootte is voor allerlei verschillende elementen (bijvoorbeeld een input-veld met lengte 10). Bedenk ook dat de inhoud van het venster door PHP gegenereerd wordt en er een aantal verschillende formulieren in komen te staan, die allemaal een andere grootte hebben. Al die afmetingen handmatig bepalen is dus tijdrovend werk.

Een belangrijker punt is dat de grootte van fonts en dergelijke niet vast staat. In Firefox kan ik aardig inzoomen/uitzoomen en dan worden de formulierelementen een stuk groter/kleiner, zodat de tekst er nog een beetje fatsoenlijk in past. Als ik alle elementen een vaste grootte geef dan verlies ik die functionaliteit en dat is omwille van de accesibility niet zo prettig. Hoewel het dus een bruikbare 'last resort' is zou ik het liever direct goed oplossen.

De tip van crisp werkt gelukkig uitstekend. De scrollWidth en scrollHeight attributes doen precies wat ik wil, mits ik ze niet op het body-element gebruik (dat geeft in Internet Explorer nog steeds geen goede grootte) maar op het div-element, zoals ik van plan was.

Ik heb het nu dus opgelost met onderstaande functie, die aangeroepen wordt in de onLoad-handler:

JavaScript:

function resize()
{
    element = document.getElementById('content');
    window.resizeTo(element.scrollWidth, element.scrollHeight);
    if(window.innerWidth)
    {
        // Mozilla-based browsers
        window.resizeBy(
            element.scrollWidth - window.innerWidth,
            element.scrollHeight - window.innerHeight );
    }
    else
    {
        // Internet Explorer
        window.resizeBy(
            element.scrollWidth - document.body.offsetWidth,
            element.scrollHeight - document.body.offsetHeight);
    }
}

De resulterende pop-up ziet er dan bijvoorbeeld zo uit in Firefox (expres wat ingezoomed om dat te laten zien):

Afbeeldingslocatie: http://hell.student.utwente.nl/temp/1081272273_dialog.png

Bedankt voor de tips!

dinsdag 6 april 2004 19:39

Acties:

crisp

Devver

Pixelated

Ik denk zelfs dat je resizeTo eruit kan - ik had zelf nooit bedacht dat er ook een resizeBy was dus heb altijd moeilijk lopen doen

dit zou mi ook moeten werken:

JavaScript:

function resize() {
  var el = document.getElementById('content');
  window.resizeBy(
    el.scrollWidth - (document.body.offsetWidth || window.innerWidth),
    el.scrollHeight - (document.body.offsetHeight || window.innerHeight) );
}

[ Voor 61% gewijzigd door crisp op 06-04-2004 19:42 ]

Intentionally left blank

dinsdag 6 april 2004 19:39

Acties:

Verwijderd

n Mozilla heb je ook zoiets als:
window.sizeToContent()
Raad eens wat dat zou betekenen?

Ik weet niet of je er wat aan hebt, maar dan weet je het iig.

dinsdag 6 april 2004 23:10

Acties:

Soultaker

Topicstarter

Klopt; die hele resizeTo()-regel kan eruit! Dat had ik zelf natuurlijk moeten kunnen verzinnen.

De functie valt dan inderdaad te versimpelen tot de versie die crisp geeft.

Het bestaan van sizeToContent() in Mozilla is leuk, maar op zichzelf niet afdoende, aangezien de correcte werking onder Internet Explorer een vereiste is (met een marktaandeel van 85% wereldwijd en waarschijnlijk meer dan 90% onder de gebruikers van deze applicatie). Dan vind ik de huidige oplossing die voor beide soorten browsers op soortgelijke manier werkt toch net wat mooier (met een beetje mazzel werkt het ook onder Konqueror en Opera, maar eerlijk gezegd kan vooral de tweede me niet heel veel schelen).