Toon posts:

[css/js] max-width van divje

Pagina: 1

Acties:

38 views sinds 30-01-2008
Reageer

maandag 10 maart 2003 12:04

Acties:

Verwijderd

Topicstarter

ik kan me niet voorstellen dat dit nog nooit is langsgeweest, maar ik kan het niet vinden...

ik heb een divje dat content moet laten zien over de hele breedte, tenzij de breedte groter wordt dan 760. ik zou natuurlijk alles in een frame kunnen mikken, maar ik wil nou juist eens proberen het zonder frames te doen. Met css lukt het me niet, daarom wil ik bij resize de breedte van de div checken dmv js, en dan evt de breedte aanpassen. nu krijg ik echter in js als breedte 100% terug, en geen waarde in pixels.

mijn vraag is:
kan dit toch met css (en hoe?) en/of hoe krijg ik px terug van js ipv %?

code:

<HTML>
<HEAD>
<TITLE>bla</TITLE>

<script language='JavaScript'>
function checkBreedte () {
    breedte = (document.getElementById('mainField').style.width);
    if (breedte > 540) {
        breedte = 540;
    }
    document.getElementById('mainField').style.width = breedte;
}
</script>

</HEAD>

<BODY onResize='checkBreedte()'>
<div id='mainField' style='position: absolute; top: 20px; padding-left: 220px; width: 100%;'>
    Dit is een dummy-tekst. Hiervan wordt gebruik gemaakt wanneer de
echte tekst nog niet bekend is. Ook kan een dummy-tekst worden gebruikt om 
alinea's te simuleren. Dit is een dummy-tekst. Hiervan wordt gebruik gemaakt
wanneer de echte tekst nog niet bekend is. Ook kan een dummy-tekst worden
gebruikt om alinea's te simuleren. Dit is een dummy-tekst. Hiervan wordt gebruik
gemaakt wanneer de echte tekst nog niet bekend is.
</div>

</BODY>
</HTML>

[ Voor 17% gewijzigd door Verwijderd op 10-03-2003 12:10 . Reden: lay-out ]

maandag 10 maart 2003 12:09

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

code:

1	document.getElementById('mainField').offsetWidth

wil je wel helpen.

een goede CSS-oplossing hiervoor ken ik ook niet

edit:
..maar is er natuurlijk wel:

code:

1	max-width: 520px

http://www.w3schools.com/css/pr_dim_max-width.asp

is volgens mij wel enkel Opera en Mozilla, msie-ondersteuning ontbreekt

[ Voor 49% gewijzigd door RM-rf op 10-03-2003 12:12 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

maandag 10 maart 2003 12:16

Acties:

Verwijderd

Topicstarter

max-width had ik al geprobeerd, werkt niet in IE. het is een site voor een aannemer, dus weinig kans op opera en mozilla bezoekers...

offsetWidth werkt inderdaad. nu moet ik het allen nog even aanpassen zodat de breedte kleiner wordt dan 760 als je venster kleiner is...

maandag 10 maart 2003 12:33

Acties:

Verwijderd

Topicstarter

zo werkt het goed met IE; in principe werkt het ook voor NN, alleen werkt daar padding-left in de style niet goed...
ik houd me overigens aanbevolen voor een goede css oplossing!

code:

<script language='JavaScript'>
function checkBreedte () {
    breedte = (document.getElementById('mainField').offsetWidth);
    maxBreedte = 760;
    if (window.innerWidth) {
        vensterBreedte = window.innerWidth;
    }
    if (document.body.clientWidth) {
        vensterBreedte = document.body.clientWidth;
    }
    if (vensterBreedte < maxBreedte) {
        maxBreedte = vensterBreedte;
    }
    breedte = maxBreedte;
    document.getElementById('mainField').style.width = breedte;
}
</script>

maandag 10 maart 2003 13:05

Acties:

Bosmonster

*zucht*

En zoiets werkt niet?

code:

<div style="width:760px">
    <div>
    bladiebla content bladibla
    </div>
</div>

[ Voor 78% gewijzigd door Bosmonster op 10-03-2003 13:07 ]

maandag 10 maart 2003 13:41

Acties:

Verwijderd

Topicstarter

als ik dan het venster verklein krijg ik een horizontale scrollbar ipv dat m'n divje schaalt

maandag 10 maart 2003 15:37

Acties:

Verwijderd

Het klopt inderdaad dat MSIE de CSS properties max/min-width en max/min-height niet ondersteunt, en je bent inderdaad niet de eerste die zich hier aan ergert.

Daarom ook $_/-\o_$ voor de maker van dit script: gewoon de CSS properties gebruiken en gaan

Hiermee moet het wel lukken denk ik zo

Pagina: 1

Reageer