[JS]div ausblenden

Marco D. · Verfasst: Fr 26.10.07 20:32

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?

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

Danny87 · Verfasst: Fr 26.10.07 20:52

0 ist doch unsichtbar oder?
warum probierstes net mit visibility = "hidden"; (oder so) ?

Gruss
Daniel

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

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

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Marco D. · Verfasst: 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.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

BenBE · Verfasst: 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?

_________________

Anyone who is capable of being elected president should on no account be allowed to do the job.
Ich code EdgeMonkey - In dubio pro Setting.

Marco D. · Verfasst: 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.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

GTA-Place · Verfasst: Sa 27.10.07 15:51

markieren

Quelltext

1:	style.maxHeight

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)

Marco D. · Verfasst: 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:

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

Danniolo · Beiträge: 693

Muss es selbstgebaut sein? Wenn nicht, dann kann ich nur dieses tolle Framework hier empfehlen:

mootools.net

Marco D. · Verfasst: Sa 27.10.07 16:30

Ja, ich möchte es selber bauen.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

Marco D. · Verfasst: Sa 27.10.07 16:45

markieren

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?

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

Marco D. · Verfasst: Sa 27.10.07 17:28

Ich brauche die Höhe eines divs. Wie bekomme ich das raus?

markieren

Quelltext

1:	alert(document.getElementById('first_tile').style.height);

gibt keinen Wert zurück.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

GTA-Place · Verfasst: Sa 27.10.07 18:01

Google hilft meist auch bei Javascript :-P

HÖHE DIV JAVASCRIPT -> offsetHeight;

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)

Marco D. · Verfasst: So 28.10.07 14:48

markieren

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.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

Marco D. · Verfasst: So 28.10.07 15:46

markieren

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.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

GTA-Place · Verfasst: 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:

markieren

Quelltext

1:	window.setTimeout('DecreaseFirstTile()', 2000); // Ruft alle 2s die Funktion auf.

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)

Marco D. · Verfasst: 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.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

GTA-Place · Verfasst: So 28.10.07 16:24

Ahso, das sind ja mehrere <div>, okay, dann müsste es so funktionieren:

markieren

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.

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)

Marco D. · Verfasst: 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?

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

GTA-Place · Verfasst: 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.

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme