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?
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/
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/
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
Modulinhalt sichtbar machen und positionieren
Zuletzt geändert von fsiebert1977 am 21. Sep 2005, 19:28, insgesamt 1-mal geändert.
Gruß Florian
www.softloop.biz
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
Re: Modulinhalt per JavaScript sichtbar machen und positioni
Hej,
ich habe mir deinen Post mehrmals durchgelesen was du aber mit
Am besten wäre es wahrscheinlich, wenn du das mal mit Bildern veranschaulichen könntest.
Thomas
ich habe mir deinen Post mehrmals durchgelesen was du aber mit
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 Seitefsiebert1977 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.
Am besten wäre es wahrscheinlich, wenn du das mal mit Bildern veranschaulichen könntest.
Thomas
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
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?
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
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
Ist korrekt.tbaddade hat geschrieben: - Linkliste im Contentbereich
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: - Bei MouseOver soll REX_VALUE[2] in der Sidebar 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.tbaddade hat geschrieben: - Der Beginn aller Sidebarinhalte soll obenwie bei dir das Bild der Brücke erscheinen
Gruß Florian
www.softloop.biz
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
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
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
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
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.
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
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
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
www.softloop.biz
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
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:
Und das dazugehörige CSS so:
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?
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>
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;
}
Gruß Florian
www.softloop.biz
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
Hab den Titel abgeändert. Wie willst du eine Box beim Hovern anzeigen ohne JS?
Gruß Florian
www.softloop.biz
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
ja, aber wie? Ich kann doch nicht bei a:hover einstellen, dass ein anderes Element sichtbar wird, oder?
Gruß Florian
www.softloop.biz
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
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
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
Du hast bestimmt schon genug geknobelt für heute.
Probier das mal aus:
CSS
Html
Thomas
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>
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
Hi Thomas,
vielen Dank für die Hilfe. Ich hab dein Beispiel etwas abgewandelt und in die Seite eingebaut.
CSS:
Modul:
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?
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;
}
Code: Alles auswählen
<p class="ilist"><a href="#">REX_VALUE[1]<span>REX_HTML_VALUE[2]</span></a></p>
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
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
zu 1/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?
ändere deine Schreibweise:
Code: Alles auswählen
background-image: url("../pics/logo_liste.gif");
background-position: left center;
background-repeat:no-repeat;
indem du die Texte höher positionierst.
Thomas
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
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...
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
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
-
- Beiträge: 168
- Registriert: 9. Feb 2005, 20:51
- Wohnort: Bad Nauheim
- Kontaktdaten: Website
bei mir geht es nicht mit IE, wie ich es auch drehe und wende.
Mein CSS:
Modul wie gehabt:
Firefox und Safari funzen perfekt! Woran kann das nur liegen?! IE macht mich noch wahnsinnig...
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;
}
Code: Alles auswählen
<p class="ilist"><a href="#">REX_VALUE[1]<span>REX_HTML_VALUE[2]</span></a></p>
Gruß Florian
www.softloop.biz
www.softloop.biz
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website