Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Spry-Widget und Mouseover“

K

kaick

Guest

Hallo alle zusammen,

ich versuche gerade mit den Spry Widget´s eine Navigationsleiste zu erstellen. Klappt bisher auch ganz gut.

Leider bin ich absoluter Newbie.

Wie ihr aus dem nachfolgendem Code seht, habe ich es ja schon geschafft, dass beim Starten der Seite die Menü´s geschlossen sind.

Nun möchte ich beim mouseover dass das jeweilige Menü aufklappt.
Ich kann ja nach: <div class="CollapsiblePanelTab" tabindex="0"> den mouseover Befehl einfügen. Nur, welche weiteren Anweisungen folgen dann zum Aufklappen bei mouseover?

Hat jemand eine Idee?


Hier der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab1</div>
<div class="CollapsiblePanelContent">
<pre>
Inhalt1

Inhalt2

Inhalt3

Inhalt4

Inhalt5

Inhalt6

Inhalt7
</pre>
</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab2</div>
<div class="CollapsiblePanelContent">
<pre>
Inhalt1

Inhalt2

Inhalt3

Inhalt4

Inhalt5

Inhalt6

Inhalt7
</pre>
</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab3</div>
<div class="CollapsiblePanelContent">
<pre>
Inhalt1

Inhalt2

Inhalt3

Inhalt4

Inhalt5

Inhalt6

Inhalt7
</pre>
</div>
</div>
<div id="CollapsiblePanel4" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab4</div>
<div class="CollapsiblePanelContent">
<pre>
Inhalt1

Inhalt2

Inhalt3

Inahlt4

Inhalt5

Inhalt6

Inhalt7
</pre>
</div>
</div>
<div id="CollapsiblePanel5" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab5</div>
<div class="CollapsiblePanelContent">
<pre>
Inhalt1

Inhalt2

Inhalt3

Inhalt4

Inhalt5

Inhalt6

Inhalt7
</pre>
</div>
</div>
<div id="CollapsiblePanel6" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab6</div>
<div class="CollapsiblePanelContent">Inhalt</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen: false });
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen: false });
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen: false });
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen: false });
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen: false });
var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6", {contentIsOpen: false });
var CollapsiblePanel7 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel7", {contentIsOpen: false });
//-->
</script>
</body>
</html>
Zum Vergrößern anklicken....


Grüße

Ingo
 
Zuletzt bearbeitet:
jackprince

jackprince

xHTML & CSS Junkie

AW: Spry-Widget und Mouseover

als erstes überarbeite bitte deinen Beitrag und setze deinen Code in die HTML Quote tags.

Das solltest du dir bitte hier gleich angewöhnen.

... was das aufklappen angeht ...

Ganz grob gesagt wenn du das Event "Hover"/"Mouse Over" eintritt
musst du die Klasse ändern. Etwas ähnliches hab ich erst vor 1-2 Tagen
beschrieben. Da ging es darum auf klick ohne Neu Laden den Content
auszutauschen.

Was du machen musst um das jeweilige Menü erstmal anzuzeigen wäre
eben wie schon gesagt die Klasse zu ändern. Oder aber wenn ich mir das Ende
anseh den wert von false auf true ändern. ;)

Vielleicht hilft das schon etwas ...

Falls nicht editiere bitte wie gesagt noch deinen Beitrag und führe dir eventuell
folgenden Beitrag () zu Gemüte bevor du weiter fragst. ;)
 
K

kaick

Guest

AW: Spry-Widget und Mouseover

Hallo jackprince,

na da werde ich mich bei der nächsten Anfrage wohl ein bischen mehr Mühe geben müssen.

Obwohl: Copy and Paste sollte ja auch funktionieren.

Wenn ich nun am "Ende" den Wert von "false" auf "True" setze, dann wird ja mit geöffneten Menüs gestartet.

Soll heißen: Wenn nun der mouseover kommt müssen die Menüs ja erst zu und dann wieder geöffnet werden?

Wenn ich die .css/js ändere, dann gilt die Änderung ja für alle Widgets oder nicht?

Ich möchte aber selber entscheiden für jede navigation meiner Site.

Also, ich habe schon Stunden damit verbracht über google und co zu einer Lösung zu kommen.

Bisher kein Erfolg.

Aber: Bin ja auch ein Newbie in der trial and Error Phase

Grüße

Ingo
 
K

kaick

Guest

AW: Spry-Widget und Mouseover

So,

habe mein Problem wie folgt gelöst:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel" onmouseover="CollapsiblePanel1.open()" onmouseout="CollapsiblePanel1.close()">
<div class="CollapsiblePanelTab" tabindex="0">Tab1</div>
<div class="CollapsiblePanelContent">
<pre>
Inhalt1
 
Inhalt2
 
Inhalt3
 
Inhalt4
 
Inhalt5
 
Inhalt6
 
Inhalt7
</pre>
</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel" onmouseover="CollapsiblePanel2.open()" onmouseout="CollapsiblePanel2.close()">
<div class="CollapsiblePanelTab" tabindex="0">Tab2</div>
<div class="CollapsiblePanelContent">
<pre>
Inhalt1
 
Inhalt2
 
Inhalt3
 
Inhalt4
 
Inhalt5
 
Inhalt6
 
Inhalt7
</pre>
</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel" onmouseover="CollapsiblePanel3.open()" onmouseout="CollapsiblePanel3.close()">
<div class="CollapsiblePanelTab" tabindex="0">Tab3</div>
<div class="CollapsiblePanelContent">
<pre>
Inhalt1
 
Inhalt2
 
Inhalt3
 
Inhalt4
 
Inhalt5
 
Inhalt6
 
Inhalt7
</pre>
</div>
</div>
<div id="CollapsiblePanel4" class="CollapsiblePanel" onmouseover="CollapsiblePanel4.open()" onmouseout="CollapsiblePanel4.close()">
<div class="CollapsiblePanelTab" tabindex="0">Tab4</div>
<div class="CollapsiblePanelContent">
<pre>
Inhalt1
 
Inhalt2
 
Inhalt3
 
Inahlt4
 
Inhalt5
 
Inhalt6
 
Inhalt7
</pre>
</div>
</div>
<div id="CollapsiblePanel5" class="CollapsiblePanel" onmouseover="CollapsiblePanel5.open()" onmouseout="CollapsiblePanel5.close()">
<div class="CollapsiblePanelTab" tabindex="0">Tab5</div>
<div class="CollapsiblePanelContent">
<pre>
Inhalt1
 
Inhalt2
 
Inhalt3
 
Inhalt4
 
Inhalt5
 
Inhalt6
 
Inhalt7
</pre>
</div>
</div>
<div id="CollapsiblePanel6" class="CollapsiblePanel" onmouseover="CollapsiblePanel6.open()" onmouseout="CollapsiblePanel6.close()">
<div class="CollapsiblePanelTab" tabindex="0">Tab6</div>
<div class="CollapsiblePanelContent">Inhalt</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen: false });
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen: false });
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen: false });
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen: false });
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen: false });
var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6", {contentIsOpen: false });
var CollapsiblePanel7 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel7", {contentIsOpen: false });
//-->
</script>
</body>
</html>

Leider taucht nun ein weiteres Problem auf:

Beim Mouseover verschiebt sich der Content ja nach unten, und somit greift dann der mouseout. Ich muss also eine Verzögerung einbauen, in der der User die Maus dann wieder auf den Content Bewegen kann.

Nur Wie?

Grüße

Ingo
 
jackprince

jackprince

xHTML & CSS Junkie

AW: Spry-Widget und Mouseover

ich würde einfach schauen das du keinen mouseout als trigger benutzt sondern eben wenn du auf ein anderes element gehst wieder mouseover für das neue element nutzt und in der funktion zum öffnen dann das alte elemt wieder schliesst.
 
K

kaick

Guest

AW: Spry-Widget und Mouseover

@jackprince

Das Problem ist doch wie folgt:

Du hast ein Menü. Sagen wir mal mit 5 - 6 TAB-Meüs.

Solange wie Du von "oben" an die Menüs gehst, solange ist beim mouseover nach dem Öffnen des Contents der Tab an genau der gleichen stelle wie zuvor. Soll heißen, der TAB verschiebt sich nicht.

Nun kommt aber der User und fährt mit seiner Maus über den ersten Eintrag. Wil aber eigentlich den zweiten Eintrag.

Das erste Menü geht auf, der User "zeigt" nun auf den Zweiten. Der Zweite Eintrag wird geöffnet. Suuppeerr!!!!.

Aber der erste wird aufgrund mouseout geschlossen.

Mit dem Ergebnis, das sich der TAB des zweiten Eintrags nun nach oben verschiebt und der User mit seiner Maus nun u. U. auf den 5. Eintrag zeigt, der dann geöffnet wird.

Das Problem liegt hier in der vertikalen Ausrichtung des Menüs. in einer horizontalen Ausrichtung sehe ich das Problem nicht.

Mein Plan wäre nun also dem User hier Zeit zu geben, um die Maus auf den eigentlich ausgewählten Eintrag verschieben zu können (Delay).

Bei Deinem Plan ist doch der Effekt der gleiche. Weil bei dem von Dir genannten schließen des Contents der mouseover u. U. and anderer Stelle wieder den mouseover auslöst. Oder sehe ich dass falsch.

Grüße

Ingo
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 95 (Mitglieder: 1, Gäste: 94)

Statistik des Forums

Themen
174.479
Beiträge
2.577.999
Mitglieder
65.966
Neuestes Mitglied
Привет
Oben