Entwickler-Ecke
Programmiersprachen (Client) - [JS]div ausblenden
Marco D. - Fr 26.10.07 20:32
Titel: [JS]div ausblenden
Ich habe ein div mit der id 'first_tile'. Dieses möchte ich verkleinern, also ihm die Höhe 0 geben.
Quelltext
1:
2:
3:
4:
| function HideFirstTile() {
document.getElementById('first_tile').height = 0;
alert(document.getElementById('first_tile').height);
} |
Es wird auch 0 ausgegeben, aber das div ist unverändert. Was tun?
Danny87 - Fr 26.10.07 20:52
0 ist doch unsichtbar oder?
warum probierstes net mit visibility = "hidden"; (oder so) ?
Gruss
Daniel
Christian S. - Fr 26.10.07 21:58
Hallo!
Zum Ausblenden kannst Du entweder machen:
myDiv.style.display = 'none'; (Groß- und Kleinschreibung prüfen, bin nicht sicher)
oder Du schaust mal, was passiert, wenn Du die Eigenschaften offsetHeight bzw. clientHeight setzt. Weiß gerade nicht, welche es war, aebr ich meine die Erste.
Grüße
Christian
Marco D. - Sa 27.10.07 11:00
Ich möchte, dass das div nach und nach verkleinert wird in seiner Höhe. Dazu würde ich in Intervallen die Höhe verringern, aber an letzterem scheitert es. Einfaches Ausblenden habe ich schon hinbekommen. ;)
BenBE - Sa 27.10.07 11:07
Was hälst Du davon, einfach den Div mit maxheight (vom IE<7 IIRC nicht supported) die Maximal-Höhe zu verringern und im letzten Schritt statt 0 anzugegeben einfach das Element auszublenden?
Marco D. - Sa 27.10.07 15:44
@BenBe: Mach ich gerne. ;) Wie ändere ich die Maximalhöhe denn im JS? Die entsprechende CSS-'Anweisung' heißt ja max-height, aber einen Gedankenstrich im JS-Code kann man ja wohl vergessen.
GTA-Place - Sa 27.10.07 15:51
Marco D. - Sa 27.10.07 16:16
Okay, mit maxHeight ist das div dann zwar sehr klein, aber der Inhalt (ul) bleibt trotzdem zu sehen. Wäre aber schöner, wenn dieser dann auch weg wäre. :gruebel:
Danniolo - Sa 27.10.07 16:24
Muss es selbstgebaut sein? Wenn nicht, dann kann ich nur dieses tolle Framework hier empfehlen:
http://mootools.net
Marco D. - Sa 27.10.07 16:30
Ja, ich möchte es selber bauen. :P
Marco D. - Sa 27.10.07 16:45
Quelltext
1:
2:
3:
4:
| function HideFirstTile() {
document.getElementById('first_tile').style.maxHeight = '10px';
document.getElementById('first_tile_content').style.height = '10px';
} |
Ich wollte die ul mit der id 'first_tile_content' auch verkleinern. Mit style.maxHeight hat es nicht geklappt, mit style.height auch nicht. Was kann ich noch tun?
Marco D. - Sa 27.10.07 17:28
Ich brauche die Höhe eines divs. Wie bekomme ich das raus?
Quelltext
1:
| alert(document.getElementById('first_tile').style.height); |
gibt keinen Wert zurück.
GTA-Place - Sa 27.10.07 18:01
Google hilft meist auch bei Javascript :-P
H?HE DIV JAVASCRIPT -> offsetHeight;
Marco D. - So 28.10.07 14:48
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
| function HideFirstTile() {
var first_tile = document.getElementById('first_tile');
alert(first_tile.style.maxHeight);
alert(first_tile.offsetHeight);
//hier findet keine Übertragung der Werte statt
first_tile.style.maxHeight = first_tile.offsetHeight;
alert(first_tile.style.maxHeight);
alert(first_tile.offsetHeight);
timeout_id = setInterval('DecreaseFirstTile();',500);
} |
Bin jetzt schon erheblich weiter gekommen. Das einzige Problem ist nur noch, dass die Eigenschaft style.maxHeight nicht den Wert von offsetHeight annimmt. Das zeigen mir die Überprüfungen der Werte durch Ausgabe mithilfe von alert. Wenn ich style weglasse und nur maxHeight schreibe, werden die Werte angenommen, aber es ändert sich grafisch nichts, da es ja eigentlich style.maxHeight sein muss.
Marco D. - So 28.10.07 15:46
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
| var timeout_id = 0;
function HideFirstTile() {
var first_tile = document.getElementById('first_tile');
first_tile.style.maxHeight = first_tile.offsetHeight + 'px';
document.getElementById('first_tile_content').style.display = 'none';
document.getElementById('first_tile_archive').style.display = 'none';
timeout_id = setInterval('DecreaseFirstTile();',2000);
}
function DecreaseFirstTile() {
var first_tile = document.getElementById('first_tile');
var maxHeight_string = first_tile.style.maxHeight;
var maxHeight_int = maxHeight_string.substring(0,maxHeight_string.length - 2);
if (maxHeight_int >= 10) {
maxHeight_int -= 10;
first_tile.style.maxHeight = maxHeight_int + 'px';
}
else {
//first_tile.style.display = 'none';
clearInterval(timeout_id);
}
} |
Bin wieder alleine weiter gekommen. style.maxHeight wollte immer noch ein 'px' hinten dran haben.
Das div wird jetzt verkleinert, allerdings sehe ich keine Verzögerung. Ich habe den Intervall auf 2000ms gestellt. Das div ist 160 px hoch. Alle 2 Sekunden werden somit 10 px weggenommen. Das dürfte doch wohl zu sehen sein. Aber wenn ich das Ereignis auslöse, wird das div sofort kleiner. Man sieht keine allmähliche Verkleinerung. Woran liegt das? Ich arbeite das erste mal mit setInterval und ClearInterval.
GTA-Place - So 28.10.07 15:55
 Marco D. hat folgendes geschrieben: |
| style.maxHeight wollte immer noch ein 'px' hinten dran haben. |
Grad wollte ich es sagen :-/.
| Marco D. hat folgendes geschrieben: |
| Das div wird jetzt verkleinert, allerdings sehe ich keine Verzögerung. |
Wenn du HideFirstTitle als erstes aufrufst, wird natürlich das <div> sofort versteckt. Du musst a) das Intervall außerhalb diese Funktion deklarieren oder b) DecreaseFirstTitle aufrufen und darin einen Timeout setzen und zwar wie folgt:
Quelltext
1:
| window.setTimeout('DecreaseFirstTile()', 2000); // Ruft alle 2s die Funktion auf. |
Marco D. - So 28.10.07 16:09
Erstmal danke für deine Hilfe :!:
| GTA-Place hat folgendes geschrieben: |
| Wenn du HideFirstTitle als erstes aufrufst, wird natürlich das <div> sofort versteckt. |
Wird es nicht. Wo denn?
| GTA-Place hat folgendes geschrieben: |
| Du musst a) das Intervall außerhalb diese Funktion deklarieren oder b) DecreaseFirstTitle aufrufen und darin einen Timeout setzen und zwar wie folgt:window.setTimeout('DecreaseFirstTile()', 2000); // Ruft alle 2s die Funktion auf. |
Kann ich atm nichts mit anfangen. Was ist denn an meinem Code falsch?
Gewollter Ablauf:
Also es wird per Mausklick auf einen Link HideFirstTile aufgerufen. Dann soll durch setInterval die Funktion DecreaseFirstTile alle 2 Sekunden aufgerufen werden und jedesmal die Höhe des divs um 10 Pixel verringern. Wenn die Höhe des divs kleiner als 10 Pixel ist, dann soll es ausgeblendet werden und die ganze Aktion durch clearInterval beendet werden.
GTA-Place - So 28.10.07 16:24
Ahso, das sind ja mehrere <div>, okay, dann müsste es so funktionieren:
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
| function HideFirstTile() {
var first_tile = document.getElementById('first_tile');
first_tile.style.maxHeight = first_tile.offsetHeight + 'px';
document.getElementById('first_tile_content').style.display = 'none';
document.getElementById('first_tile_archive').style.display = 'none';
window.setTimeout('DecreaseFirstTile();', 2000);
}
function DecreaseFirstTile() {
var first_tile = document.getElementById('first_tile');
var maxHeight_string = first_tile.style.maxHeight;
var maxHeight_int = maxHeight_string.substring(0,maxHeight_string.length - 2);
if (maxHeight_int >= 10) {
maxHeight_int -= 10;
first_tile.style.maxHeight = maxHeight_int + 'px';
window.setTimeout('DecreaseFirstTile();', 2000);
}
else {
//first_tile.style.display = 'none';
}
} |
Ich finde in dem Fall setTimeout sinnvoller.
Marco D. - So 28.10.07 16:43
Was ich daran nicht verstehe: Die erste Funktion ruft alle 2 Sek. die zweite auf. Die zweite Funktion ruft sich dann auch wieder alle 2 Sekunden auf. Das ergibt doch eine Endlosschleife :!: Oder wie ist das gemeint?
GTA-Place - So 28.10.07 16:47
Nein. setTimeout ruft nach 2 Sekunden die 2. Funktion auf und macht dann nie wieder etwas. setTimeout entspricht etwa sleep(); abgesehen davon, dass man als Parameter eine Funktion übergeben kann, die nach der Pause aufgerufen wird.
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!