Anfängerfrage: Javascript behaviors (grow/shrink) von Dreamweaver

Lamak · 07. Okt. 2016

Hallo!
ich bin neu in diesem Forum und Javascript Anfänger. Habe folgendes Problem. Habe Icons auf der Webseite als Slices, den ich Behavior vergrössern/verkleinern zugewiesen habe. Maus drüber und schon vergrössert sich der Icon und schiebt die anderen zur Seite. Ziemlich cool. onMouseOver und onMouseOut Ereignis für das Verkleinern. Alles ist gut, aber wenn man zufällig auf den Randbereich von diesem Slice mit der Mauszeiger geht dan zittert und spinnt der Icon weil onMouseOver un oNmouse Out sich fast überlagern.
Gibt es eine Möglichkeit eine Art zeitliche Unterbrechung zwischen den zwei Zuständen in den Javascript einzubauen?
Als Alternative vielleicht könnte man auf den onMouseOut Erreignis verzichten und einen Timer oder so einbauen z.B. nach 3 Sekunden verkleinert sich das Bild von alleine, shrink behavior wird dann ausgeführt

andreax · 08. Okt. 2016

Ja du könntest den MouseOver Event mit setTimeout kurz aussetzen lassen.
nicht getestet

PHP:

evo.addEventListener('mouseover',mausDrauf);
evo.addEventListener('mouseout',mausRaus);

function mausDrauf(){ console.log( 'ich bin drauf');}

function mausRaus()
{ 
evo.removeEventListener('mouseover',mausDrauf);//Listener entfernen
setTimeout(function(){evo.addEventListener('mouseover',mausDrauf);},2000);//und nach 2 Sekunden wieder binden.
}

Lamak · 08. Okt. 2016

Danke!
Wo kann ich den Code einbinden. Alleine mit der Logik kriege ich es nicht hin.

Der Ausschnitt aus meinem Code:

HTML:

</script>
</head>
<body onload="MM_preloadImages('slicy/f10.jpg','slicy/f4.jpg','slicy/f7.jpg','slicy/f5.jpg','slicy/f8.jpg','slicy/f9.jpg','slicy/f6.jpg','slicy/f2.jpg','slicy/f3.jpg','slicy/f.jpg','slicy/f11.jpg')">
<table border="0" cellpadding="0" cellspacing="0" width="1100">
<!-- fwtable fwsrc="website.png" fwpage="Projekte" fwbase="Projekte.jpg" fwstyle="Dreamweaver" fwdocid = "522891311" fwnested="1" -->
  <tr>
   <td colspan="7"><img name="Projekte_r1_c1" src="http://forum.jswelt.de/images/Projekte_r1_c1.jpg" width="1100" height="52" border="0" id="Projekte_r1_c1" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="14"><img name="Projekte_r2_c1" src="http://forum.jswelt.de/images/Projekte_r2_c1.jpg" width="85" height="1148" border="0" id="Projekte_r2_c1" alt="" /></td>
   <td><img src="http://forum.jswelt.de/images/Projekte_r2_c2.jpg" alt="" name="Projekte_r2_c2" width="127" height="91" border="0" id="Projekte_r2_c2" onmouseover="MM_swapImage('Projekte_r2_c2','','slicy/f10.jpg',1);MM_effectGrowShrink(this, 1000, '127px', '276px', false, false, false)" onmouseout="MM_swapImgRestore();MM_effectGrowShrink(this, 1000, '276px', '127px', false, false, false)" /></td>

Lamak · 08. Okt. 2016

Danke!
Wo kann ich den Code einfügen? Alleine mit der Logik kriege ich es nicht hin.

Ausschnitt aus meinem Code:

HTML:

<td><img src="http://forum.jswelt.de/images/Projekte_r2_c2.jpg" alt="" name="Projekte_r2_c2" width="127" height="91" border="0" id="Projekte_r2_c2" onmouseover="MM_swapImage('Projekte_r2_c2','','slicy/f10.jpg',1);MM_effectGrowShrink(this, 1000, '127px', '276px', false, false, false)" onmouseout="MM_swapImgRestore();MM_effectGrowShrink(this, 1000, '276px', '127px', false, false, false)" /></td>

andreax · 09. Okt. 2016

Das kann ich anhand dieser paar Codezeilen nicht einschätzen.
Kannst du das nicht irgendwo rauslegen zur besseren Einsicht?
versuchen wir es mal so ohne Gewähr

Habe nicht gewusst das du dem dreamweaver die Logik überlässt der schreibt alles inline in die tags das ist Total unflexibel .
und wie du hier siehst was reinquetschen wird immer komplizierter und wenn du so wenig JS Kenntnis hast
solltest du einfach das Flackern in Kauf nehmen, und auf deine Weise weitermachen.

PHP:

<td>
<img src="http://forum.jswelt.de/images/Projekte_r2_c2.jpg" alt="" name="Projekte_r2_c2" width="127" height="91" border="0" id="Projekte_r2_c2"  />
</td>
<!-- wichtig alle inline Eventlistener müssen aus dem Imagetag raus -->
<!-- lege per Hand einen Script-Bereich an und platziere ihn direkt vor dem schließenden body tag  -->

<script>
var shrinkImg = document.getElementById('Projekte_r2_c2');

shrinkImg.addEventListener('mouseover',mausDrauf);
shrinkImg.addEventListener('mouseout',mausRaus);

function mausDrauf(e){
    MM_swapImage('Projekte_r2_c2','','slicy/f10.jpg',1);
    MM_effectGrowShrink(e.target, 1000, '127px', '276px', false, false, false);
}

function mausRaus(e){
    MM_swapImgRestore();
    MM_effectGrowShrink(e.target, 1000, '276px', '127px', false, false, false);
    shrinkImg.removeEventListener('mouseover',mausDrauf);//Listener entfernen 
    setTimeout(function(){shrinkImg.addEventListener('mouseover',mausDrauf);},2000);//und nach 2 Sekunden wieder binden. 
     //kann sein das  schon 1000 oder 500 ms genügen muss man austesten um so weniger um so besser

}
</script>
</body>

- - - Aktualisiert - - -

Am besten weiterhelfen kann man dir wenn du den gesamten Code zeigen würdest.
Man weis so ja gar nicht wo denn die shrink Funktionen herkommen.
Das jpg ist auch nicht besonders aussagekräftig.

Lamak · 09. Okt. 2016

Hier ist der ganze Code
ich habe die Szene stark reduziert und es sind nur 2 eingefärbten Divs. Wenn man etwas schnell zwischen den beiden mit der Maus fährt flackern die wie verrückt

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	left:62px;
	top:42px;
	width:100px;
	height:113px;
	z-index:1;
	background-color: #99CC33;
}
#apDiv {
	position:absolute;
	left:257px;
	top:47px;
	width:100px;
	height:107px;
	z-index:1;
	background-color: #CCCC66;
}
-->
</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
{
	Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter});
}
//-->
</script>
</head>

<body>
<div id="apDiv2" onmouseover="MM_effectGrowShrink(this, 1000, '100px', '200px', false, false, false)" onmouseout="MM_effectGrowShrink(this, 1000, '200px', '100px', false, false, false)"></div>
<div id="apDiv" onmouseover="MM_effectGrowShrink(this, 1000, '100px', '200px', false, false, false)" onmouseout="MM_effectGrowShrink(this, 1000, '200px', '100px', false, false, false)"></div>
</body>
</html>

Da ist noch die SpryEffects.js Datei. Ist sie für die Lösung relevant?

andreax · 09. Okt. 2016

Das ist ja doch besser als ich vermutet habe .Code und Ansicht sind ja ganz gut getrennt.
Das Scripttag hab ich nach unten verschoben weil so sicher ist das das ganze Dokument vor der Scriptausführung geladen ist.
Ich hab an die Divs eine Klasse vergeben dann musst du wenn du neue Divtags einfügst nur diese Klasse eintragen und damit wird
es auch gleich an die Beiden Listener gebunden, die in der For-Schleife vergeben werden.
mal sehen so könnte es klappen. ich selber kann's nicht testen weil ich keinen Dreamweaver mehr habe und verwende.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	left:62px;
	top:42px;
	width:100px;
	height:113px;
	z-index:1;
	background-color: #99CC33;
}
#apDiv {
	position:absolute;
	left:257px;
	top:47px;
	width:100px;
	height:107px;
	z-index:1;
	background-color: #CCCC66;
}
-->
</style>


</head>

<body>

<div class="shrk" id="apDiv2" ></div>
<div class="shrk" id="apDiv" ></div>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
{
	Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter});
}

var shrinkdiv = document.querySelectorAll('.shrk');//alle divs mit Klasse shrk in shrinkdiv sammeln

for(var i = 0;i<shrinkdiv.length;i++) //an alle 
{
shrinkdiv[i].addEventListener('mouseover',mausDrauf);
shrinkdiv[i].addEventListener('mouseout',mausRaus);
}

function mausDrauf(e){

    MM_effectGrowShrink(e.target, 1000, '100px', '200px', false, false, false)
}

function mausRaus(e){

    MM_effectGrowShrink(e.target, 1000, '200px', '100px', false, false, false);
    e.target.removeEventListener('mouseover',mausDrauf);//Listener entfernen  so müsste das Flackern aufhören weil kein mouseover mehr ausgeführt wird.
    setTimeout(function(){e.target.addEventListener('mouseover',mausDrauf);},2000);//und nach 2 Sekunden wieder binden.
     //kann sein das  schon 1000 oder 500 ms genügen muss man austesten um so weniger um so besser

}


//-->
</script>
</body>
</html>

kkapsner · 10. Okt. 2016

Du hast hier ein konzeptionelles Problem, das man mit Technik nicht lösen kann. Und auch die setTimeout-"Lösung" wird nicht 100%ig befridigend sein, da es dann passieren kann, dass mehrere Bilder vergrößert dargestellt werden, obwohl du mit der Maus über keine einzigen bist.

Ich würde die Bilder einfach nicht austauschen, sondern das größere darüber anzeigen lassen (position: absolute), so dass sich der Inhalt nicht neu anordnet. Das größere kannst du dann ausblenden, wenn du mit der Maus da rausfährst. Das ist zwar etwas mehr Arbeit, da du die Position, wo das neue <img> angezeigt werden soll, ausrechnen musst, aber das Ergebniss wird viel befriedigender sein.

PS: Außerdem würde ich Dreamweaver nicht verwenden...

andreax · 10. Okt. 2016

@kkapsner das setTimeout war nur mal das erste woran ich dachte weil sich wie es aussieht die Listener in die Quere kommen.
Hier ist ein Versuch ohne DW mit Transitions ist sicher nicht eins zu eins aber dabei gibt es kein Flackern
könnte eventuell eine Alternative sein. das Srcipt aber noch sehr rudimentär.

Lamak · 10. Okt. 2016

Die Umsetzung des Scripts fällt mir schwer weil ich die Gramatik des Scripts nicht beherrsche und es nicht flexibel anpassen kann.
In der Form hat es leider nicht funktioniert.
Wie wäre es wenn (unter ist der Code mit nur einem farbigen Rechteck) man anstatt von mouseout irgendein Timer setzt so dass nach 5 Sekunden ohne Mausereignisse direkt die shrink funktion aufgerufen wird?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:142px;
	top:119px;
	width:195px;
	height:211px;
	z-index:1;
	background-color: #00CC99;
}
-->
</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
{
	Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter});
}
//-->
</script>
</head>

<body>
<div id="apDiv1" onmouseover="MM_effectGrowShrink(this, 1000, '100%', '200%', false, false, false)" onmouseout="MM_effectGrowShrink(this, 1000, '390px', '195px', false, false, false)"></div>
</body>
</html>

andreax · 10. Okt. 2016

Wie wäre es wenn (unter ist der Code mit nur einem farbigen Rechteck) man anstatt von mouseout irgendein Timer setzt so dass nach 5 Sekunden ohne Mausereignisse direkt die shrink funktion aufgerufen wird?

Versuch das mal das wäre was du beschreibst .
Maus Drüber das Ding skaliert 1 Sekunde dann bleibt es 5 Sekunden in diesem Zustand und dann ohne zutun
wieder zurück. wie das aber dann wirkt wenn man über ein Tag nach dem anderen schneller als 5 Sec den mouseover auslöst? dann gehen die alle auf und liegen zeitweilig übereinander oder verschieben sich .

Code:

<div id="apDiv1" onmouseover="mausDrauf();window.setTimeout(function(){MM_effectGrowShrink(this, 1000, '390px', '195px', false, false, false);},2000);},6000" </div>

Lamak · 10. Okt. 2016

andreax · 10. Okt. 2016

ach hab ich andersrum gesehn.
das mausDrauf hatte ich vergessen zu löschen weil das brauchte ich um die Zeile zu testen.
is nur c&p Fehler da gehört die MM_effectGrowShrink Function an diese Stelle.

das setTimer war ja anstelle von mouseout bei mouseover startet der MM_effekt dann startet auch der Timer der nach 6 Sekunden
dand die MM_Effekt vom mouseout startet

Hier die Codzeile wartet nun nach dem mouseout 5sek und startet dann die Aktion.

Code:

<div id="apDiv1" onmouseover="MM_effectGrowShrink(this, 1000, '100%', '200%', false, false, false)" onmouseout="setTimeout(function(){MM_effectGrowShrink(this, 1000, '390px', '195px', false, false, false);},5000);"></div>

welche Version ist der DW den du benutzt?

Lamak · 10. Okt. 2016

mit den 5 Sekunden scheint es zu funktionieren. nur zu der Aktion Schrumpfen kommt es nicht sondern Meldung von Webseite:
Spry.Effect ERR: Spry.Effect.getStyleProp: TypeError: Die Eigenschaft "position" eines undefenierten oder Nullverweises kann nicht abgerufen werden.
Ich nutze Dreamweaver CS3

- - - Aktualisiert - - -

Super!

Mit MM_swapImgRestore() hat diese Verzögerung funktioniert

Jetzt bleibt die Frage nur warum es mit der
MM_effectGrowShrink(this, 1000, '390px', '195px', false, false, false)
Fehlermeldung gibt
?

andreax · 10. Okt. 2016

der Fehler sagt das er das div nicht findet versuch mal das this beim mouseout Listener mit event.target zu ersetzten .
und wenn das auch nicht funkt dann versuchen wir Folgendes

Code:

<div id="apDiv1" onmouseover="MM_effectGrowShrink(this, 1000, '100%', '200%', false, false, false)" onmouseout="var  me = this; setTimeout(function(){MM_effectGrowShrink(me, 1000, '390px', '195px', false, false, false);},5000);"></div>

Lamak · 10. Okt. 2016

irgendwie funktioniert doch nicht

kann man denn auf den mouse event komplett verzichten?

<td><img src="images/Projekte_r2_c2.jpg" alt="" name="Projekte_r2_c2" width="127" height="91" border="0" id="Projekte_r2_c2" onmouseover="MM_effectGrowShrink(this, 1000, '127px', '254px', true, false, false);MM_swapImage('Projekte_r2_c2','','slicy/f10.jpg',1)"
'setTimeout(function(){MM_swapImgRestore();},2000)'

So funktioniert sicher nicht aber irgendwie ähnlich mit dem Umschalten nach einer gewissen Zeit? ohne onmouseout?

vom Konzept würde es mit der zeitlichen Umschaltung auch gut passen

andreax · 10. Okt. 2016

ok so wird das nix wenn das so aufgebaut wird muss man den gesamten Code in jedes img Tag schreiben und selbst wenns funktionieren sollte bei einer Änderung am Script muss man dann jedes Tag einzeln anpassen.
du weist ja nun wie man setTimeout einsetzt probier mal eine Weile rum .

Wenns möglich wäre nimm die Version die geflackert hat veröffentliche diese und stell sie in einen extra Ordner auf einen Server
damit man einen Überblick erhält und mit der Konsole Ereignisse ausgeben und ausloten kann wo der Kern des Problemes liegt.

Ich befürchte mit dem hin und herschieben von Codeschnipsel kommen wir nicht ans Ziel.

Lamak · 10. Okt. 2016

andreax · 10. Okt. 2016

Lamak schrieb:
theoretisch wenn man den Eventlistener für die Dauer des timeouts irgendwie ausmacht könnte es das Problem endgültig lösen?

das haben wir doch ganz am Anfang gemacht : )

schau ein paar Posts zurück und versuche es so umzusetzen wie du es verstehst.

Lamak schrieb:
Danke für deine Hilfe andreax

Gerne Geschehen
danke für dein Like

Lamak · 11. Okt. 2016

Wie ist es mit hoverIntent jQuery Plug-in?
Habe zufällig im Netz darauf gestoßen

Laut Beschreibung klingt es nach einer Lösung

Anfängerfrage: Javascript behaviors (grow/shrink) von Dreamweaver

New member

andreax

Guest

New member

New member

andreax

Guest

New member

andreax

Guest

Super Moderator

andreax

Guest

New member

andreax

Guest

New member

andreax

Guest

New member

andreax

Guest

New member

andreax

Guest

New member

andreax

Guest

New member