Scriptaculous, Div Animation, IE Problem

moveax1 · 17.10.2008, 23:22

Hi zusammen,

ich hab ein kleines Problem mit Scriptaculous und dem Internet Explorer.
Und Zwar geht es darum das ich <div> Elemente in einem Menu animieren möchte.
Das Menü hat folgenden Aufbau (weiter oben werden per CSS die Farbattribute vergeben):

Code:

<div id="menu">
	<div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" id="entry">sample</div>
	<div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" id="entry">sample</div>
	<div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" id="entry">sample</div>
</div>

Und so sieht das Skript aus:

Code:

<script>
<!--

var active = false;
function menumorphstart(entry)
{
	if(active == false)
	{
		entry.morph('background-color:#0099FF; border-color: #00ff00; color: #fff;', {duration: 0.1});
	}
	active = true;
	return false;
}
function menumorphstop(entry)
{
	active = false;
	entry.morph('background-color: #fff; border-color:#0099ff; color:#0099ff;', {duration: 0.1});
	return false;
}
-->
</script>

Im Firefox funktioniert das ganze wunderbar nur der Internet Explorer schmeisst eine Fehlermeldung für die Zeile in denen der Morph Effekt aufgerufen wird, dass das aufrufende Objekt die Methode nicht unterstützt.

Leider bin ich nur ein JavaScript Amateur und finde den Fehler nicht selber, meiner Ansicht nach sieht der Code in Ordnung aus, deswegen hoffe ich darauf dass jemand mit mehr scriptaculous Erfahrung mir einen Hint geben kann.

Vielen Dank im vorraus
moveax

nikosch · 17.10.2008, 23:26

Ich bin kein scriptaculous Auskenner, aber

Zitat:

<div id="menu">
<div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" id="entry">sample</div>
<div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" id="entry">sample</div>
<div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" id="entry">sample</div>
</div>

mehrere ID Attribute mit dem gleichen Wert sind eindeutig falsch.

moveax1 · 17.10.2008, 23:29

gibt es den einen anderen Weg um alle div Elemente innerhalb von dem <div> mit der ID menu mit einem Eintritts und Austrittseffekt zu belegen?

Manko10 · 17.10.2008, 23:31

Hallo,

wie wäre es mit dem Attribut class?

moveax1 · 17.10.2008, 23:40

Code:

<div id="menu">
    <div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" class="entry">sample</div>
    <div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" class="entry">sample</div>
    <div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" class="entry">sample</div>
</div>

Ich hab das ganze auf Class umgestellt nur der IE meckert immer noch und möchte die Effekte nicht ausführen.
Ist es evtl der falsche Weg die Effekte direkt über die Event Attribute aufzurufen?

EDIT: achja jeder Entry soll unabhängig voneinander animiert werden

Manko10 · 17.10.2008, 23:46

Das kann ich dir als script.aculo.us-Nichtkenner leider nicht sagen. Bei jQuery oder ExtJS könnte ich dir da schon eher helfen.
Aber was ich dir sagen kann, ist, dass du deinen HTML-Code nicht so mit EventHandlern vollmüllen solltest. Benutze lieber addEventListener() (oder was immer script.aculo.us und prototype da bieten), um Elementen Events zuzuweisen.

Beitrag editiert:
[…] Vielleicht hilft dir das: http://www.prototypejs.org/api/funct...sEventListener

nikosch · 18.10.2008, 00:21

Zitat:

Benutze lieber addEventListener() (oder was immer script.aculo.us und prototype da bieten), um Elementen Events zuzuweisen.

In einer ruhigen Minute siehe auch:
http://www.php.de/tutorials/44167-js...tenmodell.html (JS: Einführung - Javascript im Schichtenmodell)

agrajag · 18.10.2008, 04:00

Hi,
du kannst nicht einfach die Morph-Methode aufrufen, da das Objekt die morph-Methode nicht kennt. Die wird erst dynamisch hinzugefügt, wenn du Element.extend() oder $() aufrufst.
Also statt:

Code:

entry.morph(...)

solltest du

Code:

$(entry).morph(...)

oder

Code:

new Effect.morph(entry, ....)

aufrufen.

Noch zwei kleine Vorschläge am Rande:
Statt die CSS-Angaben zu denen "gemorpht" werden soll direkt ins JavaScript zu wursteln, kannst du morph() auch einen CSS-Klassen-Namen übergeben, zu dem gemorpht werden soll.
Und um die hässlichen onmouseover/out Attribute nicht im HTML stehen zu haben kannst du mit Element.observe("mouseover", ...) deinen Event-Handler hinzufügen. Und wozu brauchst du "active"?

Also irgendwie so, (nur als grobes Beispiel):

Code:

$('menu').down().each( function(it) { // oder $$('#menu .entry').each()
  $(it).observe('mouseover', function(){
    $(this).morph('...');
  });
});

moveax1 · 18.10.2008, 11:22

erstmal vielen Dank für die Antworten. Mit meiner Methode wurde das Event mit jeder Bewegung über den Elemt ausgelöst und der Rechner war am Ende ein wenig ausgelastet, also hab ich über die Variable einen erneuten Start unterbunden.

Eure Code Beispiele und Links werde ich gleich direkt sichten /ausprobieren

moveax1 · 19.10.2008, 02:11

So ich dachte mir ich Poste mal meine Lösung falls irgendwann nochmal jemand eine ähnliches Problem hat:

Code:

<div id="menu">
	<div class="entry">sample</div>
	<div class="entry">sample</div>
	<div class="entry">sample</div>
</div>
<script src="prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="scriptaculous.js" type="text/javascript" charset="utf-8"></script>
<script>

var entries = $$('.entry');

for (var i=0; i<entries.length; i++) {
	entries[i].observe('mouseover', morphstart);
	entries[i].observe('mouseout', morphstop);
}

function morphstart(event) {
	var element = event.element();
	element.morph('background-color:#0099FF; border-color: #00ff00; color: #fff;', {duration: 0.1});
}

function morphstop(event) {
	var element = event.element();
	element.morph('background-color: #fff; border-color:#0099ff; color:#0099ff;', {duration: 0.1});
}



</script>

Problem bei obigen Beispielen und meinen Ansätzen waren unter anderem das Observe eine Methode von Event ist und das die Selektoren $ und $$ ein bischen anders funktionieren als ich dachte.

Ein wenig nützliche Dokumentation die ich im Netz gefunden habe:

Prototype JavaScript framework: API.Prototype API Documentation
phrogz.net - /js/

Das ganze konnte ich aber auch nur mit Hilfe des ##javascript Channels im Freenode lösen, der übrigens auch Anfängern gegenüber recht aufgeschlossen ist

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
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Sessions Problem	StephenKing	PHP Tipps 2008	3	16.10.2007 08:30
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
[Erledigt] Problem bei Massenmails versenden mit der Funktion mail		PHP-Fortgeschrittene	3	19.01.2005 13:36
[Erledigt] Problem mit Übergabe einer Klasse in PHP4		PHP-Fortgeschrittene	10	08.01.2005 21:00
Problem mit Weiterleitung		PHP Tipps 2004-2	16	22.12.2004 17:49
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34
[Erledigt] Problem mit Timestamp!		PHP Tipps 2004	24	08.06.2004 19:51
Login Problem		PHP Tipps 2004	4	04.06.2004 18:46
foreach problem	mAy^daY	PHP Tipps 2004	3	02.06.2004 20:29

17.10.2008, 23:22
moveax1 Erfahrener Benutzer Registriert seit: 27.09.2008 Beiträge: 316 PHP-Kenntnisse: Fortgeschritten	Scriptaculous, Div Animation, IE Problem Hi zusammen, ich hab ein kleines Problem mit Scriptaculous und dem Internet Explorer. Und Zwar geht es darum das ich <div> Elemente in einem Menu animieren möchte. Das Menü hat folgenden Aufbau (weiter oben werden per CSS die Farbattribute vergeben): Code: <div id="menu"> <div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" id="entry">sample</div> <div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" id="entry">sample</div> <div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" id="entry">sample</div> </div> Und so sieht das Skript aus: Code: <script> <!-- var active = false; function menumorphstart(entry) { if(active == false) { entry.morph('background-color:#0099FF; border-color: #00ff00; color: #fff;', {duration: 0.1}); } active = true; return false; } function menumorphstop(entry) { active = false; entry.morph('background-color: #fff; border-color:#0099ff; color:#0099ff;', {duration: 0.1}); return false; } --> </script> Im Firefox funktioniert das ganze wunderbar nur der Internet Explorer schmeisst eine Fehlermeldung für die Zeile in denen der Morph Effekt aufgerufen wird, dass das aufrufende Objekt die Methode nicht unterstützt. Leider bin ich nur ein JavaScript Amateur und finde den Fehler nicht selber, meiner Ansicht nach sieht der Code in Ordnung aus, deswegen hoffe ich darauf dass jemand mit mehr scriptaculous Erfahrung mir einen Hint geben kann. Vielen Dank im vorraus moveax


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

17.10.2008, 23:29
moveax1 Erfahrener Benutzer Registriert seit: 27.09.2008 Beiträge: 316 PHP-Kenntnisse: Fortgeschritten	gibt es den einen anderen Weg um alle div Elemente innerhalb von dem <div> mit der ID menu mit einem Eintritts und Austrittseffekt zu belegen?

17.10.2008, 23:31
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Hallo, wie wäre es mit dem Attribut class? __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

17.10.2008, 23:40
moveax1 Erfahrener Benutzer Registriert seit: 27.09.2008 Beiträge: 316 PHP-Kenntnisse: Fortgeschritten	Code: <div id="menu"> <div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" class="entry">sample</div> <div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" class="entry">sample</div> <div onmouseover="menumorphstart(this)" onmouseout="menumorphstop(this)" class="entry">sample</div> </div> Ich hab das ganze auf Class umgestellt nur der IE meckert immer noch und möchte die Effekte nicht ausführen. Ist es evtl der falsche Weg die Effekte direkt über die Event Attribute aufzurufen? EDIT: achja jeder Entry soll unabhängig voneinander animiert werden Geändert von moveax1 (17.10.2008 um 23:46 Uhr).

17.10.2008, 23:46
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Das kann ich dir als script.aculo.us-Nichtkenner leider nicht sagen. Bei jQuery oder ExtJS könnte ich dir da schon eher helfen. Aber was ich dir sagen kann, ist, dass du deinen HTML-Code nicht so mit EventHandlern vollmüllen solltest. Benutze lieber addEventListener() (oder was immer script.aculo.us und prototype da bieten), um Elementen Events zuzuweisen. Beitrag editiert: […] Vielleicht hilft dir das: http://www.prototypejs.org/api/funct...sEventListener __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems” Geändert von Manko10 (17.10.2008 um 23:54 Uhr).

18.10.2008, 04:00
agrajag Moderator Registriert seit: 02.10.2006 Beiträge: 3.820 PHP-Kenntnisse: Fortgeschritten	Hi, du kannst nicht einfach die Morph-Methode aufrufen, da das Objekt die morph-Methode nicht kennt. Die wird erst dynamisch hinzugefügt, wenn du Element.extend() oder $() aufrufst. Also statt: Code: entry.morph(...) solltest du Code: $(entry).morph(...) oder Code: new Effect.morph(entry, ....) aufrufen. Noch zwei kleine Vorschläge am Rande: Statt die CSS-Angaben zu denen "gemorpht" werden soll direkt ins JavaScript zu wursteln, kannst du morph() auch einen CSS-Klassen-Namen übergeben, zu dem gemorpht werden soll. Und um die hässlichen onmouseover/out Attribute nicht im HTML stehen zu haben kannst du mit Element.observe("mouseover", ...) deinen Event-Handler hinzufügen. Und wozu brauchst du "active"? Also irgendwie so, (nur als grobes Beispiel): Code: $('menu').down().each( function(it) { // oder $$('#menu .entry').each() $(it).observe('mouseover', function(){ $(this).morph('...'); }); }); __________________ Today you...Tomorrow me. Geändert von agrajag (18.10.2008 um 04:17 Uhr).

18.10.2008, 11:22
moveax1 Erfahrener Benutzer Registriert seit: 27.09.2008 Beiträge: 316 PHP-Kenntnisse: Fortgeschritten	erstmal vielen Dank für die Antworten. Mit meiner Methode wurde das Event mit jeder Bewegung über den Elemt ausgelöst und der Rechner war am Ende ein wenig ausgelastet, also hab ich über die Variable einen erneuten Start unterbunden. Eure Code Beispiele und Links werde ich gleich direkt sichten /ausprobieren