[css/javascript] uitschuiven van div-layer

[Tjeerd]

Heb uiteraard al wat lopen zoeken op GoT, maar kom niet echt iets tegen waar ik wat aan heb.

Ik heb een div-layer van 450 pixels breed en een hoogte van uiteindelijk 500 pixels.
Ik wil dat de layer als het ware naar beneden toe groeit, dus de beginheight moet iets van 1 zijn en uiteindelijk moet hij op een height komen van 500 pixels.

code:

Stukje uit m'n JavaScript code, die de layer moet uitschuiven als het ware:

function beweeg () 
{
  step = 10;

  if ( document.getElementById('myself').style.height < 500 ) 
  {
    
    document.getElementById('myself').style.height += step;
    setTimeout("beweeg()", 30);
  }

}

Stukje uit CSS, zeg maar de div-layer:
#myself {
        margin: 0px; padding: 5px;
        position: absolute;
        top: 10%;
        left: 25%;
        width: 450px;
        height: 10px;
        border: 1px solid #000000;
        font-family: verdana;
        font-size:11px;
        color:#ffffff;
        filter: alpha(opacity=100);
        background:#3055a7;
}

HTML-code:
<div id="myself">
bla bla bla
bla bla
</div>

Ik druk dus eerst op een link op de pagina en die href roept de javascript-code aan (beweeg()), waarna dus de div-layer moet uitschuiven.

Maar, dit werkt dus niet , hij komt niet 1s de lus binnen, omdat de height niet voldoet aan < 500 (wat ik dus al niet snap, maar heb een vermoeden dat de vergelijking niet goed gaat, agz de height een waarde truggeeft met +px erbij).


Help...

[Apollo_Futurae]

* Apollo_Futurae pakt zijn pitchershandschoen en gooit dit topic flink hard richting thuisplaat....
zou hij over de schutting komen?

[ACM]

P&W -> W&G

[Tjeerd]

Probleem al opgelost:

code:

function beweeg () 
{
  step = 10;

  if ( document.getElementById('myself').style.pixelHeight < 500 ) 
  {
    
    document.getElementById('myself').style.pixelHeight += step;
    setTimeout("beweeg()", 30);
  }

}

Oplossing is pixelHeight element gebruiken, die geeft een int terug met het aantal pixels. Nu werkt het probleemloos

In de CSS is het wel handig om overflow: auto; te zetten, agz de div-layer height dan gewoon op 1 kan beginnen (ivm tekst die in de div kan staan).

[Thijsmans]

Ik heb ook een keer zo'n probleem gehad, uren tegenaan gekeken, maar bij bepaalde waarden returnt hij ' px' erachteraan

[crisp]

Jammer dat pixelHeight een MS-uitvinding is en dus geen standaard CSS attribuut; onder Mozilla gaat dit dus niet werken...

[Tjeerd]

crisp schreef op 10 september 2002 @ 22:53:
Jammer dat pixelHeight een MS-uitvinding is en dus geen standaard CSS attribuut; onder Mozilla gaat dit dus niet werken...

True, maar weet je een alternatief dan?

[crisp]

Ja, eventueel 'px' eraf halen en parsen naar een integer, of vanaf het begin af geen 'px' in de stijl meegeven...

[[eNeRGy]]

waarom niet gewoon offsetHeight ?

[crisp]

Waarom niet met een global aangezien je toch weet waarmee je begint (elke keer offsetHeight uitlezen kost ook weer performance):

JavaScript:

var height = 10;
var step = 10;
function beweeg () {

  height += step;
  document.getElementById('myself').style.height = height + 'px';
  if ( height < 500 ) setTimeout('beweeg()', 30);

}

[drm]

crisp:
Waarom niet met een global aangezien je toch weet waarmee je begint (elke keer offsetHeight uitlezen kost ook weer performance):

JavaScript:

var height = 10;
var step = 10;
function beweeg () {

  height += step;
  document.getElementById('myself').style.height = height + 'px';
  if ( height < 500 ) setTimeout('beweeg()', 30);

}

Als je 't dan toch over performance gaat hebben kun je ook beter setInterval gebruiken dan elke keer opnieuw een timeout zetten, en de pointer naar 't element in een var opslaan, ipv elke keer opnieuw getElementById aan te roepen.

JavaScript:

var interval = null, el = null, height = 0;
var start = 10;
var stop = 500;

var STEPS = 10, SPEED = 30;

function init () {
   el = document.getElementById('myself');
   interval = setInterval ( 'beweeg()', SPEED ):
   height = start;
}

function beweeg () {
  if ( height >= stop ) {
      clearInterval ( interval );
      interval = null;
      return;
  }
  height += STEPS;
  el.style.height = height + 'px';
}

en dan natuurlijk <body onload="init ()">

^</miereneuk>

[crisp]

drm schreef op 11 september 2002 @ 09:31:
[...]

<knip>
^</miereneuk>

Laat dan el meteen naar document.getElementById('myself').style.height verwijzen
^</antfuck>

offtopic:
heb jij nog een stukje log van gisteravond? Mijn logging stond uit

[drm]

crisp:
Laat dan el meteen naar document.getElementById('myself').style.height verwijzen
^</antfuck>

Naar .style dan. .style.height gaat niet werken. Krijg je een kopie, geen reference. heb je niet zoveel aan
^</mierenift>

[crisp]

drm schreef op 11 september 2002 @ 09:55:
[...]

Naar .style dan. .style.height gaat niet werken. Krijg je een kopie, geen reference. heb je niet zoveel aan
^</mierenift>

oh ja, true
_{maar heb je nog een stukje log?}

[drm]

offtopic:
heb 't hele stuk vanaf dat jij begon over Master of Popups, totdat ik naar bed ga iig opgeslagen lijkt me wel ongeveer alles