nicht angemeldet
Ladebalken mit CSS/JS wächst in die falsche Richtung
Hallo...
Folgendes, ich habe mir eine kleine Statusbar aus CSS und JS gebastelt.
Diese soll vertikal von unten nach oben wachsen - das ist auch der springende Punkt, sie will partout nur von oben nach unten wachsen statt umgekehrt.
So wird die Statusbar auf der Seite ausgegeben:
<div id="montiMeter"><p style="height:0%;"><span>0%</span></p></div>
Das Javascript modifiziert style="height:0%;" je nach dem welchen Wert ich uebergebe. In etwa so:
oLadebalken = document.getElementById("montiMeter").firstChild;
oLadebalken.firstChild.firstChild.nodeValue = oLadebalken.style.height = output(tot)+"%";
Mein CSS schaut wie folgt aus:
[code=css]
#montiMeter {
height: 150px;
width: 35px;
border: 1px solid #000;
background: #c0c0c0;
vertical-align:bottom;
position: fixed;
top: 380px;
left: 260px;
position: expression("absolute");
top: expression(parseInt(document.body.scrollTop + 380));
}
#montiMeter p {
margin-bottom:0px;
padding:0px;
height: 150px;
display: block;
background: #0f0;
font-size:10px;
font-weigth:bold;
color:black;
}
[/code]
Das ganze erzeugt Statt am unteren div rand angeklebt zu sein nur einen kleinen platz zum oberen div rand.
Geschweige denn dass der Balken nach oben waechst, ich kann mich drehen und wenden (margin-top/bottom auto, valign's und divers eltern div's) wie ich will der Balken waechst von oben nach unten.
Biiitte, wo steckt der Fehler... wahrscheinlich ne kleine Dummheit, aber ich bekomms einfach nicht hin.
Bedankt für answers,
Asto.
-
Yerf!
Das Problem dürfte sein, dass vertical-align:bottom; nur in Tabellenzellen zuverlässig funktioniert. Du könntest stattdessen mit position:absolut;bottom:0; arbeiten, da der umgebende DIV ja bereits positioniert ist.
Ansonsten solltest du die Expressions vor nicht IE Browsern verstecken, da dies CSS-Fehler produziert und die Attribute evtl. in einen ungültigen Zustand versetzt.
Gruß,
Harlequin
-
Hellou.
Yerf!
Das Problem dürfte sein, dass vertical-align:bottom; nur in Tabellenzellen zuverlässig funktioniert. Du könntest stattdessen mit position:absolut;bottom:0; arbeiten, da der umgebende DIV ja bereits positioniert ist.
Wäre schön gewesen wenn ich nicht schon ausgiebig versucht hätte mit position:absolute; zu arbeiten. Ich bekomme einfach nicht mehr hin als diese paar Pixel Platz zum oberen DIV Rand.
Ansonsten solltest du die Expressions vor nicht IE Browsern verstecken, da dies CSS-Fehler produziert und die Attribute evtl. in einen ungültigen Zustand versetzt.
Okay, danke für den Hinweis Harlequin. Ich werde das auf jeden Fall berücksichtigen.
Das andere Problemchen scheint sich wirklich nicht lösen zu lassen. Ich glaube irgendwie wirklich es gibt keinen Weg dieses <p> dazu zu bringen in die Höhe zu wachsen, also von unten nach oben.
Oder vielleicht doch? Es ätzt mit jedenfalls ziemlich an....
Asto.
-
hi,
Das andere Problemchen scheint sich wirklich nicht lösen zu lassen. Ich glaube irgendwie wirklich es gibt keinen Weg dieses <p> dazu zu bringen in die Höhe zu wachsen, also von unten nach oben.
Verändere nicht nur seine Höhe dynamisch, sondern auch sein margin-top - so dass beide zusammen immer die gewünschte Endhöhe ergeben.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Verändere nicht nur seine Höhe dynamisch, sondern auch sein margin-top - so dass beide zusammen immer die gewünschte Endhöhe ergeben.
Super Idee! So wird es klappen, nicht anders... THX!
Gruß,
Asto.
-
Verändere nicht nur seine Höhe dynamisch, sondern auch sein margin-top - so dass beide zusammen immer die gewünschte Endhöhe ergeben.
Wie gesagt, super Sache... Funktioniert auch ganz toll:
oLadebalken.firstChild.firstChild.nodeValue = oLadebalken.style.marginTop = Math.floor(150-((output(tot)/100)*150))+"px";
:-)
Was mich nun gerade aber Verrückt macht ist dass, jetzt die Prozent im <span> mit editiert werden.
<div id="montiMeter"><p style="height:0%; margin-top:0px;"><span>0%</span></p></div>
Auf meinem Ladebalken Steht nun also nicht mehr schön wie viel Prozent er geladen hat sondern wie viel Pixel margin-top er hat.
Des weiteren wird meine position:absolute; ignoriert
#montiMeter span {
position: absolute;
margin-top: 65px;
}Hört sich jetzt vielleicht wie Gemecker an... ist es auch! :p
*meckMeck* dummes JS!
Gruß...
-
*meckMeck* dummes JS!
Err... Ich meinte dummer Asto. *rolleyes*
oLadebalken.firstChild.firstChild = oLadebalken.style.marginTop = Math.floor(150-((output(tot)/100)*150))+"px";
Sorry, bin noch ziemlich lahm in JavaScript.
Und das mit dem position:absolute; ist ja auch nur logisch...
-
-
-
-