[JS] Overflow en Scrollheight DIV in Mozilla

Pagina: 1
Acties:

  • slm
  • Registratie: Januari 2003
  • Laatst online: 25-06 12:45
Ik wil een DIV layer direct onder een andere DIV layer krijgen waarbij de bovenste DIV een overflow: visible property heeft. Geen probleem wanneer de tekst niet overloopt, maar dus wel als dat wel het geval is. Beide layers zijn (bewust) absoluut gepositioneerd.

Vereenvoudigde situatie:
code:
1
2
3
4
5
6
7
<div id="mLayer" style="position:absolute; width:190px; height:600px; 
left: 5; top: 5; background-color: #FFFFFF; layer-background
-color: #FFFFFF; border: 1px solid #000000; 
overflow: visible;etc">    (content)     </div>

<div id="sLayer" style="position:absolute; width:190px; height:19px; 
top: 580px;etc">     (content)     </div>


Probleem 1: Achtergrondkleur overflow
Als content van mLayer overflowt dan is de background van mLayer slechts tot 600px wit gekleurd. Ik heb op w3c gezien dat dat eigenlijk zo de bedoeling is, maar de mijne niet iig. MSIE doet het (gezien wat ik wil) wel goed en kleurt dus ook de overflow wit. Mozilla dus niet. Is er een oplossing of workaround voor Mozilla?

Ik kan wel de tekst in deze DIV een achtergrondkleur geven door een aparte style, maar dit geeft ook niet het gewenste effect.


Probleem 2: Repositioneren van sLayer
mLayer krijgt dynamisch content toegewezen. Deze content kan dus binnen of buiten de initele dimensies komen. Als ik de scrollheight opvraag van deze DIV, krijg ik in MSIE de ware hoogte (inclusief overflow), maar in Mozilla krijg ik alleen de hoogte zoals ingesteld in height.
Ik kan natuurlijk document.body.scrollHeight gebruiken, maar voldoet niet helemaal als ik meerdere DIVS op een pagina heb die buiten hun initiele hoogte overflowen. Is hier een andere oplossing voor?

Op dit moment repositioneer ik zo de layer:
code:
1
2
3
4
5
6
<script language="JavaScript">
var mLyr = document.getElementById("mLayer");
var sLyr = document.getElementById("sLayer");
var x = mLyr.scrollHeight;
sLyr.style.top = x + "px";
</script>


Noot: het is niet de bedoeling dat de DIVS een scrollbar krijgen, dus overflow moet eigenlijk op visible blijven staan.

Ik heb overigens gezocht met Google, gekeken op w3c en gezocht hier op GOT, maar kennelijk wil iedereen dat zijn divje scrollt ipv de hele pagina en heb ik dus uiteindelijk weinig nuttigs gevonden.

[ Voor 4% gewijzigd door slm op 15-09-2003 16:29 ]

To study and not think is a waste. To think and not study is dangerous.


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:21

crisp

Devver

Pixelated

Je wilt niet dat je content overflowed, maar gewoon dat je div groter wordt bij meer content (wat IE dus doet). Je zou dan voor mozilla in plaats van height:190px min-height:190px kunnen gebruiken.
Wat betreft het herpositioneren van je 2e div: zet ze gewoon in een container.

Intentionally left blank


  • slm
  • Registratie: Januari 2003
  • Laatst online: 25-06 12:45
Min-height werkt perfect in Mozilla, maar niet in MSIE. Ik had er zelf nog niet aan gedacht, dus dank hiervoor. Kan het wel oplossen door de layers dynamisch weg te schrijven (Een voor IE en een ander voor Moz).

Container: probleem is dat de 2e div een minimale offset moet hebben, dus niet altijd direct onder div1, maar alleen als div1 overflowt.

To study and not think is a waste. To think and not study is dangerous.


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:21

crisp

Devver

Pixelated

slm schreef op 15 September 2003 @ 16:45:
Min-height werkt perfect in Mozilla, maar niet in MSIE. Ik had er zelf nog niet aan gedacht, dus dank hiervoor. Kan het wel oplossen door de layers dynamisch weg te schrijven (Een voor IE en een ander voor Moz).
Of verschillende stylesheets; een beetje javascript doet inderdaad wonderen hier.
Container: probleem is dat de 2e div een minimale offset moet hebben, dus niet altijd direct onder div1, maar alleen als div1 overflowt.
Maar de scrollheight opvragen zal nu waarschijnlijk wel werken :)

Intentionally left blank


  • slm
  • Registratie: Januari 2003
  • Laatst online: 25-06 12:45
...wacht even...

als ik die vaste height weghaal in Moz en vervang door min-height, geeft scrollHeight wél de juiste hoogte. Had ik nog niet gechecked, maar het klopt nu wel.

Problem solved.

(Mag wat mij betreft een slotje op nu)

To study and not think is a waste. To think and not study is dangerous.


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:21

crisp

Devver

Pixelated

slm schreef op 15 September 2003 @ 17:01:
...wacht even...

als ik die vaste height weghaal in Moz en vervang door min-height, geeft scrollHeight wél de juiste hoogte. Had ik nog niet gechecked, maar het klopt nu wel.

Problem solved.

(Mag wat mij betreft een slotje op nu)
top

en opgeloste topics zetten we meestal niet op slot hoor, die zakken vanzelf wel af ;)

Intentionally left blank

Pagina: 1