[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
Modulinhalt sichtbar machen und positionieren - REDAXO Forum
Hallo,

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

Modulinhalt sichtbar machen und positionieren

20. Sep 2005, 18:16

Hallo,

ich baue gerade eine Seite in Redaxo, die folgendermaßen aussieht: Oben ist die Navigation, links der Contentbereich und rechts eine Sidebar. (Siehe Link: http://www.pucherbeppler.de/index.php). Die ganze Seite ist in CSS und XHTML aufgebaut.

Problem ist folgendes: Normalerweise zeige ich in der Sidebar immer einen Artikel gleichen Namens, der in jeder Kategorie angelegt wird. Nun brauche ich aber für die Kategorie "Leistungen" ein Modul für eine "interaktive" Liste. In diesem Modul gibt es einmal ein Feld REX_VALUE[1], in dem der Text für den jeweiligen Listenpunkt steht (jeder Listenpunkt ist ein eigenes Slice und wird im Content-Bereich angezeigt) sowie ein Feld REX_VALUE[2], in dem ein erläuternder Text untergebracht wird. Nun möchte ich es gerne so haben, dass beim onMouseover über dem Listenpunkt der REX_VALUE[2] des jeweiligen Slice in der Sidebar eingeblendet wird. Und zwar so, dass die Mitte des eingeblendeten Textes mit der des Mauszeigers übereinstimmt, die Höhe des Textes ist variabel. Dazu kommt noch, dass sich die Höhe der Seite dem Inhalt des Beschreibungstextes anpassen muss, z.B. wenn man mit der Maus über den letzten Listenpunkt fährt. Wie kann ich das erreichen? Mein Problem ist, dass ja der Inhalt der Sidebar in einem anderen Artikel generiert wird als der Inhalt des Contents. Weiss jemand Rat?
Zuletzt geändert von fsiebert1977 am 21. Sep 2005, 19:28, insgesamt 1-mal geändert.
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

Re: Modulinhalt per JavaScript sichtbar machen und positioni

21. Sep 2005, 08:39

Hej,

ich habe mir deinen Post mehrmals durchgelesen was du aber mit
fsiebert1977 hat geschrieben:Nun möchte ich es gerne so haben, dass beim onMouseover über dem Listenpunkt der REX_VALUE[2] des jeweiligen Slice in der Sidebar eingeblendet wird. Und zwar so, dass die Mitte des eingeblendeten Textes mit der des Mauszeigers übereinstimmt, die Höhe des Textes ist variabel.
meinst, habe ich nicht verstanden. Welche Mitte? Es gibt so viele. Vertikale, Horizontale, absolute, Reich der Mitte, Mitten drin, ab durch die Mitte, der Zweck heiligt die Mittel .. ? Spass bei Seite

Am besten wäre es wahrscheinlich, wenn du das mal mit Bildern veranschaulichen könntest.

Thomas

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

21. Sep 2005, 10:05

Hi Thomas,

hast recht, das war ungenau. Guckst du hier: http://spitz.softloop.biz/seite_2.html. Das ist zwar ein Entwurf für eine andere Seite, aber das gleiche Prinzip. Links haben wir eine listenhafte Darstellung und rechts eine Sidebar, in welcher Zusatzinformationen sichtbar werden, wenn man mit dem Mauszeiger über die einzelnen Listenpunkte fährt. Mir ist auch klar geworden, dass der Sidebarinhalt sich immer vertikal innerhalb der Sidebar zentrieren sollte, unhabhängig von der Mausposition. Sonst kann es nämlich sein, dass wenn man über den letzten Listenpunkt fährt, der Sidebarinhalt unten abgeschnitten wird. Oder fällt dir noch was besseres ein? Wie findest du dieses Prinzip?
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

21. Sep 2005, 10:13

Hej,

ich fasse nochmal zusammen:

- Linkliste im Contentbereich
- Bei MouseOver soll REX_VALUE[2] in der Sidebar erscheinen
- Der Beginn aller Sidebarinhalte soll obenwie bei dir das Bild der Brücke erscheinen

ist das richtig?

Thomas

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

21. Sep 2005, 10:26

tbaddade hat geschrieben: - Linkliste im Contentbereich
Ist korrekt.
tbaddade hat geschrieben: - Bei MouseOver soll REX_VALUE[2] in der Sidebar erscheinen
Stimmt, allerdings habe ich wie im ersten Beitrag erwähnt das Problem, dass der Content-Bereich und die Sidebar zwei unterschiedliche Divs sind, innerhalb derer die Artikel ausgegeben werden. Und REX_VALUE[2] kommt aus dem Content-Artikel.
tbaddade hat geschrieben: - Der Beginn aller Sidebarinhalte soll obenwie bei dir das Bild der Brücke erscheinen
Nicht zwangsläufig, da die Höhe wie gesagt variabel ist, sprich die vertikale Mitte des Sidebarinhalts ist immer auf der gleichen y-Position gemessen an der aktuellen Höhe des Browserfensters.
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

21. Sep 2005, 10:47

Hej,

nur mal so ne Idee, ob sie sich bewährt weiss ich nicht.

Du hast ein weiteres Template für Leistungen. Dort hast die die Blöcke Content und Siebar nicht drin.

Unter Leistungen legst du für jede Leistung einen Artikel an. Im Startartikel machst du eine Artikelliste die den Namen (Link) und den Inhalt (Sidebar) enthält. Hier müssen dann wiedrum deine Blöcke Content und Sidebar auftauchen.

Da du das ja mit ner Schleife alles ausliest, solltest du jedem Artikelinhalt eine eigene Selektor-Id mitgeben. Mit visbility machst du dann den Inhalt der Sidebar sichtbar bzw. unsichtbar.

Thomas

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

21. Sep 2005, 11:11

Hi Thomas,

danke für deine Hilfe.

Die Möglichkeit hatte ich auch schon mal angedacht. Das Problem ist nur, dass ich diese interaktive Liste auch gerne irgendwo in einem Artikel mit dem Standardtemplate einbinden können möchte. Ich glaube, das zwingt mich dazu, es irgendwie mit Modulen zu lösen.

Kann man dem Browser nicht einfach per JavaScript sagen, dass er REX_VALUE[2] in dem div id="#sidebar" auszugeben hat? Ich habe da schon etwas im Internet gestöbert aber keine einfache Möglichkeit gefunden. Das Problem ist nämlich, dass ja in REX_VALUE[2] durchaus weitere Block- und Inline-HTML-Elemente enthalten sein können. Und ich habe eigentlich keine Lust, REX_VALUE[2] nach Elementen zu durchsuchen und dann mit appendChild o.ä. die Baumstruktur zu erweitern - das dürfte relativ aufwändig werden.
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

21. Sep 2005, 11:17

Hej,

Javascript würde ich in diesem Fall überhaupt nicht nutzen wollen. Was ist, wenn der User JS abgeschaltet hat? Dann kommt er nicht mehr an die Info.

Thomas

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

21. Sep 2005, 11:28

Dann kann ich aber auch kein MouseOver benutzen und auch den Sidebar-Inhalt nicht vertikal zentrieren, da er ja eine variable Höhe hat. CSS bietet in diesem Fall keine Lösung. Accessibility-mässig hast du allerdings recht.
Gruß Florian
www.softloop.biz

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

21. Sep 2005, 15:03

Ok, ich verzichte lieber auf JavaScript. Ich denke, man sollte es nur dort einsetzen, wo die Basisfunktionalität auch ohne JavaScript gegeben ist, d.h. nur ergänzend.

Habe mir jetzt überlegt, dass man den Text auch unter den Listenpunkten einblenden könnte. Mein Ausgabemodul sieht momentan so aus:

Code: Alles auswählen

<p class="ilist"><a href="#" >REX_VALUE[1]</a><span>REX_HTML_VALUE[2]</span></p>
Und das dazugehörige CSS so:

Code: Alles auswählen

p.ilist {
	margin: 0 0 1em 0;
	padding-left: 0px;
}

p.ilist span {
	display: none;
	padding-left: 20px;
}

p.ilist a {
	background: transparent url("../pics/logo_liste.gif") no-repeat left center;
	padding-left: 20px;
}

p.ilist a:hover {
	background: transparent url("../pics/logo_liste_over.gif") no-repeat left center;
}
Jetzt müsste ich im Modul bei Klick auf den Link das entsprechende <span> auf <span style="display: block"> setzen. Wie kann ich das machen? Ich bräuchte doch wahrscheinlich eine Variable (z.B. "$active"), der ich den Wert true oder false zuweise, oder? Man müsste nur die Variablen wahrscheinlich sliceabhängig unterscheiden, denke ich. Gibt es sowas wie eine Slice-ID? Dann könnte man die ja an den Variablennamen anhängen. Wie würdest du das lösen?
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

21. Sep 2005, 19:19

Hej,

wenn du den Text unterhalb des Links anzeigen lassen willst, dann springt deine Liste. Das ist ein unschöner Effekt. Warum nicht bei hovern des Links eine Box mit dem Inhalt über den jewiligen Link anzeigen?

Thomas

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

21. Sep 2005, 19:20

PS Dein Title ist nun nicht mehr aussagekräftig. Vielleicht kannst du ihn verändern, damit andere User nicht vor "JS" zurückschrecken.

Thomas

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

21. Sep 2005, 19:29

Hab den Titel abgeändert. Wie willst du eine Box beim Hovern anzeigen ohne JS?
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

21. Sep 2005, 19:33

Hej,

per CSS :-)

Thomas

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

21. Sep 2005, 19:38

ja, aber wie? Ich kann doch nicht bei a:hover einstellen, dass ein anderes Element sichtbar wird, oder?
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

21. Sep 2005, 19:56

fsiebert1977 hat geschrieben:ja, aber wie? Ich kann doch nicht bei a:hover einstellen, dass ein anderes Element sichtbar wird, oder?
kann man und es funktioniert sogar..

möchtest du die lösung gleich oder möchtest du selbst probieren?

Thomas

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

21. Sep 2005, 19:58

wenn du mir einen tipp gibst, kann ich es auch gerne selbst probieren, ich hab nämlich keinen blassen Schimmer, wie das funktionieren soll. Schön, mal wieder was dazuzulernen ;)
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

21. Sep 2005, 20:11

Hej,

Der Tipp: <a href="#">Link<span>Inhaltstext</span></a>

Thomas

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

21. Sep 2005, 20:22

Du hast bestimmt schon genug geknobelt für heute.

Probier das mal aus:

CSS

Code: Alles auswählen

a#test {
	position:relative;
}
a#test span {
	display:none;
}
a#test:hover {
	cursor:default;
}
a#test:hover #fenster {
	display:block; 
	position:absolute; 
	top:0; 
	left:100px; 
	padding:20px;
	width:200px; 
	height:100px; 
	background-color:#eee;
	text-decoration:none;
}

Html

Code: Alles auswählen

<a id="test" href="#">Its Showtime <span id="fenster">Funktioniert das ganze überhaupt?</span></a>
Thomas

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

22. Sep 2005, 11:18

Hi Thomas,

vielen Dank für die Hilfe. Ich hab dein Beispiel etwas abgewandelt und in die Seite eingebaut.

CSS:

Code: Alles auswählen

p.ilist {
	position: relative;
	margin: 0 0 1em 0;
	padding-left: 0px;
}

p.ilist a {
	background: transparent url("../pics/logo_liste.gif") no-repeat left center;
	padding-left: 20px;
}

p.ilist a span {
	display: none;
}

p.ilist a:hover {
	background: transparent url("../pics/logo_liste_over.gif") no-repeat left center;
}

p.ilist a:hover span {
   display: block;
   position: absolute;
   top: 0;
   left: 470px;
   padding: 0;
   width: 170px;
   height: auto;
   color: black;
}
Modul:

Code: Alles auswählen

<p class="ilist"><a href="#">REX_VALUE[1]<span>REX_HTML_VALUE[2]</span></a></p>
Hier kannst du dir das Ergebnis anschauen: http://www.pucherbeppler.de/index.php?a ... =5&clang=0

Jetzt habe ich nur noch 2 Probleme:
1. wird die Sache in IE noch nicht richtig dargestellt
2. Wie kann ich verhindern, dass bei den unteren Listenpunkten der Text aus der Seite rausläuft?
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

22. Sep 2005, 11:47

fsiebert1977 hat geschrieben: Jetzt habe ich nur noch 2 Probleme:
1. wird die Sache in IE noch nicht richtig dargestellt
2. Wie kann ich verhindern, dass bei den unteren Listenpunkten der Text aus der Seite rausläuft?
zu 1/
ändere deine Schreibweise:

Code: Alles auswählen

   background-image: url("../pics/logo_liste.gif");
   background-position: left center;
   background-repeat:no-repeat;
zu 2/
indem du die Texte höher positionierst.

Thomas

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

22. Sep 2005, 12:01

zu 1/

Das ist nicht mein Problem. Die Listenpunkte werden mit der Shorthandnotation ja auch in IE richtig angezeigt. Nur der Text im <span>-Bereich fehlt...
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

22. Sep 2005, 12:09

Bei mir wird der Span angezeigt, wenn ich die CSS-Schreibweise ändere. Mit der Kurzschreibweise klappt es im IE nicht.

Thomas

fsiebert1977
Beiträge: 168
Registriert: 9. Feb 2005, 20:51
Wohnort: Bad Nauheim
Kontaktdaten: Website

22. Sep 2005, 15:29

bei mir geht es nicht mit IE, wie ich es auch drehe und wende.

Mein CSS:

Code: Alles auswählen

.ilist {
	margin: 0 0 1em 0;
	padding-left: 0px;
}

.ilist a {
/*	background: transparent url("../pics/logo_liste.gif") no-repeat left center;*/
	background-image: url("../pics/logo_liste.gif");
   background-position: left center;
   background-repeat:no-repeat;
	padding-left: 20px;
}

.ilist a span {
	display: none;
}

.ilist a:hover {
/*	background: transparent url("../pics/logo_liste_over.gif") no-repeat left center;*/
	background-image: url("../pics/logo_liste_over.gif");
   background-position: left center;
   background-repeat:no-repeat;
}

.ilist a:hover span {
	display: block;
   position: absolute;
   top: 195px;
   left: 500px;
   padding: 0;
   width: 170px;
   color: black;
}
Modul wie gehabt:

Code: Alles auswählen

<p class="ilist"><a href="#">REX_VALUE[1]<span>REX_HTML_VALUE[2]</span></a></p>
Firefox und Safari funzen perfekt! Woran kann das nur liegen?! IE macht mich noch wahnsinnig...
Gruß Florian
www.softloop.biz

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

22. Sep 2005, 15:58

Du hast nicht alle Werte übernommen, die ich geschrieben hatte.


.ilist a {
position:relative;

.ilist a:hover {
cursor:default;

das mal rein und testen.

Thomas

Zurück zu „Allgemeines [R3]“