[Erledigt] jQuery liest höhe nicht aus

Willfri · 26.11.2011, 12:29

Hallo,

ich habe ein Problem mit einem Code.
Also wenn ich auf das Div mit der Klasse 'messages' klick, öffnet sich der Div mit der Klasse 'text'. Wenn ich jetzt wieder auf den Ersten Div klicke, schließt sich der 2 Div auch wieder, wenn ich aber das 3 mal auf den ersten Div klicke, dann öffnet sich der 2 Div nicht mehr richtig. Mein Problem liegt in der 4 Zeile. Bei den ersten beiden Klicks hat die Variable den Wert z.B. 60 und nach dem dritten mal nur noch den Wert 0.

javascript:

Code:

<script type="text/javascript">
jQuery(document).ready(function(e) {
	jQuery('.messages').click(function(e) {
		var height = jQuery('.text').css('height');
		if(jQuery('.text').css('opacity') == 0.0) {
			jQuery('.text').css('height', '0px').fadeIn(0).animate({height: height, opacity: '1.0', paddingBottom: '5px', paddingTop: '5px'}, 500).css('height', height);
		} else {
			jQuery('.text').animate({height: '0px', opacity: '0.0', paddingBottom: '0px', paddingTop: '0px'}, 500).css('height', height);
		}
	});
});
</script>

und hier HTML:

Code:

<div style="width: 612px;">
<div class="messages" style="background-color: #666666; width: 600px; padding: 5px; -moz-border-radius: 5px; border: 2px solid #DDDDDD;">
<table width="600">
	<tr>
		<td>Betreff: Das ist ein Test</td>
		<td align="right" width="80">26.11.2011</td>
		<td rowspan="2" width="3" style="border-right: 1px solid #444444;"></td>
		<td align="right" width="20">X</td>
	</tr>
	<tr>
		<td><small>von: Benutzer</small></td>
		<td align="right">10:41</td>
		<td align="right">-></td>
	</tr>
</table>
</div>
<div class="text" style="background: #999999; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; padding: 0px 5px 0px 5px; width: 580px; margin: 0px auto 0px; opacity: 0.0; display: none;">
Blabalbla, hier ist dann der Text.<br />lalalalalal
</div>
</div>
</div>

Ich hoffe ihr könnt mir helfen.

mfg Willfri

rudygotya · 26.11.2011, 12:39

http://api.jquery.com/stop/
Vor .animate aufrufen, beide Parameter auf true setzen.

Willfri · 26.11.2011, 13:14

Hab ich gemacht, der Fehler ist immer noch da. Mein Problem ist ja, dass die Zeile hier:

Code:

var height = jQuery('.text').css('height');

nicht mehr den Style abfragt, obwohl er ja gestetzt wurde.

rudygotya · 26.11.2011, 15:38

Zeig doch mal ein online beispiel / ein bsp auf http://jsfiddle.net

Motto des heutigen Samstags ist leider : Visualisieren > Denken, Liegen bleiben >>> bewegen

Willfri · 26.11.2011, 18:22

Hier ist der Link zum Beispiel -> http://jsfiddle.net/qxNyU/

rudygotya · 26.11.2011, 18:40

Check nicht gegen die opacity, benutze .is und :visible
fadeIn(0) durch show(0) ersetzen, braucht weniger Rechenleistung, dafür, dass du was anzeigen willst.
Bau das .stop(true, true) ein.
Du kalkulierst die Höhe des Textes onclick. Macht nach dem Verstecken wenig sinn. Nimm das aus dem Click Handler raus und in den ready-scope rein.

Wenn du jQuery als einzige js-lib einsetzt, verwend am besten den $-shortcut. Falls du im noconflict-Modus arbeitest, bastel dir einfach ein closure a la:

PHP-Code:

  
(function ( $ ) {
// hier deinen code rein
$(function () {
// ...

});

})( window.jQuery );

grüße

Basti

P.S.: ich bin erst 2 mal aufgestanden

Willfri · 26.11.2011, 19:21

-Verstehe ich nicht, wie ich das einbauen muss
-hab ich
-wo soll ich das einbauen?
-ich möchte nach dem ausblenden die Höhe ja wieder zurücksetzen, damit beim nächsten klick die Höhe wieder ausgelesen wird.

Und zuletzt ich benutze mehrere js-lib. Daher muss ich jQuery statt $ nehmen.

Habs nochmal online gestellt -> http://jsfiddle.net/2UkRv/1/

EDIT: So hab jetzt mal was gemacht und es funktioniert, FAST. Ich verstehe den sinn nicht hinter warum es jetzt (fast) geht. Link: http://jsfiddle.net/BNrD6/
Ich habe jetzt nur das hier hingemacht und es funktioniert, bis auf den 1 klick alles richtig.

Code:

        jQuery('.text').css('height', '20%');

EDIT: Juhuuuuuu, ich habs. Ich habe wo jetzt

Code:

        jQuery('.text').css('height', '20%');

steht, dass 20% in '' gemacht. also so:

Code:

        jQuery('.text').css('height', '');

und es funktioniert.

Trotzdem vielen Dank rudygotya!!!

nikosch · 29.11.2011, 18:44

Zitat:

Falls du im noconflict-Modus arbeitest, bastel dir einfach ein closure a la:

DOM-Ready bildet bereits ein Closure für den jQuery-Handler. Die Docs nenn diesen Beispielcode:

Code:

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});

rudygotya · 29.11.2011, 19:05

edit: komplett drüber gelesen, sry. Wußte ich so noch nicht.

nikosch · 29.11.2011, 19:08

Kein Grund, sich zu entschuldigen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JQuery Ajax PHP Aktualisierung	thiagojonas	PHP Einsteiger	3	25.10.2011 23:22
jQuery UI Tabs komplett mit AJAX laden und letzt gewählten Tab wählen	K00S	JavaScript, Ajax und mehr	6	10.09.2011 13:54
3 div mit css auf gleiche höhe bringen?	KarlJ	HTML, Usability und Barrierefreiheit	5	31.07.2011 22:28
Einsatz von Milestones (jQuery)	dreamcatcher	JavaScript, Ajax und mehr	4	28.06.2011 12:07
PHP und jquery	mehlwurm	PHP Einsteiger	13	30.05.2011 23:09
jQuery, einem DOM-Knoten eine Payload anhängen	Chriz	JavaScript, Ajax und mehr	6	22.12.2010 15:31
jQuery - Text an Cursorposition einfügen	Koala	JavaScript, Ajax und mehr	5	11.11.2010 21:28
Bin noch ein Anfänger mit jquery bitte um hilfe	bomber007	JavaScript, Ajax und mehr	4	19.08.2010 23:34
[Erledigt] jQuery Slider - In eine Richtung sperren	Trainmaster	JavaScript, Ajax und mehr	2	08.08.2010 16:06
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jquery: dialogbox funktioniert nicht	Dreamwatcher	JavaScript, Ajax und mehr	16	22.07.2010 18:22
jQuery Navigationsanimation	khz	JavaScript, Ajax und mehr	9	06.12.2009 02:34
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.11.2011, 12:39
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	http://api.jquery.com/stop/ Vor .animate aufrufen, beide Parameter auf true setzen. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

26.11.2011, 13:14
Willfri Neuer Benutzer Registriert seit: 02.09.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	Hab ich gemacht, der Fehler ist immer noch da. Mein Problem ist ja, dass die Zeile hier: Code: var height = jQuery('.text').css('height'); nicht mehr den Style abfragt, obwohl er ja gestetzt wurde.

26.11.2011, 15:38
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Zeig doch mal ein online beispiel / ein bsp auf http://jsfiddle.net Motto des heutigen Samstags ist leider : Visualisieren > Denken, Liegen bleiben >>> bewegen __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

26.11.2011, 18:22
Willfri Neuer Benutzer Registriert seit: 02.09.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	Hier ist der Link zum Beispiel -> http://jsfiddle.net/qxNyU/

26.11.2011, 18:40
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Check nicht gegen die opacity, benutze .is und :visible fadeIn(0) durch show(0) ersetzen, braucht weniger Rechenleistung, dafür, dass du was anzeigen willst. Bau das .stop(true, true) ein. Du kalkulierst die Höhe des Textes onclick. Macht nach dem Verstecken wenig sinn. Nimm das aus dem Click Handler raus und in den ready-scope rein. Wenn du jQuery als einzige js-lib einsetzt, verwend am besten den $-shortcut. Falls du im noconflict-Modus arbeitest, bastel dir einfach ein closure a la: PHP-Code: `(function ( $ ) { // hier deinen code rein $(function () { // ... }); })( window.jQuery );` grüße Basti P.S.: ich bin erst 2 mal aufgestanden __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog Geändert von rudygotya (26.11.2011 um 18:45 Uhr).

26.11.2011, 19:21
Willfri Neuer Benutzer Registriert seit: 02.09.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	-Verstehe ich nicht, wie ich das einbauen muss -hab ich -wo soll ich das einbauen? -ich möchte nach dem ausblenden die Höhe ja wieder zurücksetzen, damit beim nächsten klick die Höhe wieder ausgelesen wird. Und zuletzt ich benutze mehrere js-lib. Daher muss ich jQuery statt $ nehmen. Habs nochmal online gestellt -> http://jsfiddle.net/2UkRv/1/ EDIT: So hab jetzt mal was gemacht und es funktioniert, FAST. Ich verstehe den sinn nicht hinter warum es jetzt (fast) geht. Link: http://jsfiddle.net/BNrD6/ Ich habe jetzt nur das hier hingemacht und es funktioniert, bis auf den 1 klick alles richtig. Code: jQuery('.text').css('height', '20%'); EDIT: Juhuuuuuu, ich habs. Ich habe wo jetzt Code: jQuery('.text').css('height', '20%'); steht, dass 20% in '' gemacht. also so: Code: jQuery('.text').css('height', ''); und es funktioniert. Trotzdem vielen Dank rudygotya!!! Geändert von Willfri (26.11.2011 um 19:51 Uhr).

29.11.2011, 19:05
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	edit: komplett drüber gelesen, sry. Wußte ich so noch nicht. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

29.11.2011, 19:08
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Kein Grund, sich zu entschuldigen __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --