Autor |
Beitrag |
Marco D.
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
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
      
Beiträge: 688
Windows 10 Pro 64bit
Sprachen: HTML, PHP, JavaScript, Delphi || IDE: RAD Studio 10.1 Berlin Starter, WeBuilder
|
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)
|
Verfasst: 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
_________________ Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".
|
|
Marco D. 
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
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
      
Beiträge: 8721
Erhaltene Danke: 191
Win95, Win98SE, Win2K, WinXP
D1S, D3S, D4S, D5E, D6E, D7E, D9PE, D10E, D12P, DXEP, L0.9\FPC2.0
|
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. 
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
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
      

Beiträge: 5248
Erhaltene Danke: 2
WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
|
Verfasst: Sa 27.10.07 15:51
Quelltext
_________________ "Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)
|
|
Marco D. 
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
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. 
_________________ 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
|
Verfasst: Sa 27.10.07 16:24
Muss es selbstgebaut sein? Wenn nicht, dann kann ich nur dieses tolle Framework hier empfehlen:
mootools.net
|
|
Marco D. 
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
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. 
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
Verfasst: 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?
_________________ 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. 
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
Verfasst: 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.
_________________ 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
      

Beiträge: 5248
Erhaltene Danke: 2
WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
|
Verfasst: Sa 27.10.07 18:01
Google hilft meist auch bei Javascript HÖHE DIV JAVASCRIPT -> offsetHeight;
_________________ "Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)
|
|
Marco D. 
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
Verfasst: 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.
_________________ 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. 
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
Verfasst: 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.
_________________ 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
      

Beiträge: 5248
Erhaltene Danke: 2
WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
|
Verfasst: So 28.10.07 15:55
_________________ "Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)
|
|
Marco D. 
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
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
      

Beiträge: 5248
Erhaltene Danke: 2
WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
|
Verfasst: 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.
_________________ "Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)
|
|
Marco D. 
      
Beiträge: 2750
Windows Vista
Delphi 7, Delphi 2005 PE, PHP 4 + 5 (Notepad++), Java (Eclipse), XML, XML Schema, ABAP, ABAP OO
|
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
      

Beiträge: 5248
Erhaltene Danke: 2
WIN XP, IE 7, FF 2.0
Delphi 7, Lazarus
|
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)
|
|
|