| Autor |
Nachricht |
-
LiamDucray
|
 22.10.2013 um 18:51 (UTC)
Titel: [erledigt] techn. Frage zu Akkordeon-Menü + Seitenwechsel |
|
|
Hallo allerseits. Mich interessiert, ob etwas techn. möglich ist, und wenn ja, wie.
Kurz & knapp der Aufbau:
Hauptseite meiner Website ist "NEWS" - dort findet man meist Updates der Seite "LYRIK"
Die Seite "LYRIK" ist in aufklappbare Kategorien unterteilt, mithilfe des Akkordeon-Systems:
http://find-templates.de.tl/akkordeon.htm
Soweit alles gut.
Nun sind einige Worte in den NEWS verlinkt. Die einzelnen Gedichte per direktwahl, das funzt perfekt. Aber auch die jeweilige Kategorie ist verlinkt, das sieht im Code wiefolgt aus:
[...]
6 weitere Gedichte der Kategorie <a target="_self" href="http://liamducray.de.tl/Lyrik.htm">Humor, Wortspiel, Dada</a> sind nun online!
[...]
Ein Klick auf die Kategorie verlinkt also per einfachem Code direkt auf die Seite LYRIK.
Nun die Frage:
Ist es möglich, in diesen Code im NEWS-Extra noch einzubauen, dass man sich beim Klick auf den Kategorie-Link nicht nur auf der Seite LYRIK wiederfindet, sondern dass sich dort auch automatisch diese Kategorie im Akkordeon aufklappt?
Wenn ja, mit welchem Code könnte ich das bewerkstelligen?
Vielen Dank im Voraus
und beste Grüße
LD
Zuletzt bearbeitet von LiamDucray am 26.10.2013, 15:34, insgesamt einmal bearbeitet
|
|
|
↑
|
|
 |
|
|
23.10.2013 um 16:13 (UTC)
Titel: |
|
|
Hallo,
ja, das ist möglich.
Eine Herangehensweise ist der Einsatz der CSS-Pseudoklasse :target.
Damit kann ein Objekt bestimmte Eigenschaften bekommen, wenn seine ID nach einem # an die Webseitenadresse angehängt wird.
(Alte Browser wissen damit aber nichts anzufangen, weil :target zu CSS3 gehört und das noch nicht Standard ist.)
Es ist allerdings nicht ganz einfach umzusetzen, weil dafür der HTML- und CSS-Code des Akkordeons ein wenig bearbeitet werden muss.
Auf der Seite "Lyrik" gibt es das Div-Element mit der ID akkordeon. In ihm sind die aufklappbaren Boxen enthalten, und zwar wie folgt:
- Die linken Boxen stehen in dem Div-Element mit der Klasse left, die rechten Boxen in dem Div-Element mit der Klasse right und die mittleren Boxen in dem Div mit der Klasse center.
- Innerhalb von .left, .right und .center gibt es für jede Einzelbox ein Div-Element mit der Klasse top
Das sind die Elemente, die wir verändern müssen.
Und zwar braucht jedes dieser Elemente zusätzlich eine ID. Hierfür bieten sich die Schlagworte der entsprechenden Rubriken an, z.B. Minne, Erbauendes, Humor etc. Wichtig wäre an dieser Stelle zu erwähnen, dass IDs keine Leer- und Sonderzeichen enthalten dürfen bzw. sollten, und soweit ich weiß mit einem Buchstaben anfangen müssen. Außerdem ist die Groß- und Kleinschreibung wichtig.
Als nächstes kommt der CSS-Teil.
Ich habe mir erlaubt, den bestehenden Code hier einzufügen:
Zitat: <style type="text/css">
<!--
/* Seite teilen */
.left {float: left; width: 30%; padding: 20px 21px 0px; overflow: hidden;}
.right {float: right; width: 30%; padding: 20px 21px 0px; overflow: hidden;}
.center {float:none; width: 30%; padding: 20px 0px 0px; overflow: hidden;}
/* Hier die Breite anpassen */
#akkordeon {width: 840px; overflow: hidden;}
/* Aussehen Titel */
#akkordeon h2 {font-family: Arial; font-size: 12px; color: #d9d9d9; font-weight: bold;
text-align: center; background: none;}
/* Feld um Titel */
.thema {cursor: pointer; border: 2px outset #606060; padding:
/*OBEN*/ 2px
/*L+R*/ 15px
/*UNTEN*/ 2px; margin-bottom:
/*ABSTAND DAZW.*/ 10px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; }
/* ausklappbares Feld */
#akkordeon .inhalt {display: none; background-color: #000000; padding:
/*OBEN*/ 10px
/*L+R*/ 15px
/*UNTEN*/ 10px; margin-bottom:
/*ABSTAND DAZW.*/ 15px;
overflow: hidden; border: 2px outset #800000; text-align: left; line-height: 150%;
font-family: Arial; font-size: 12px; font-weight: bold; color: #c9c9c9;}
/* Farbe Titelfeld wenn ausgeklappt */
#akkordeon .open {background-color: #680000 !important;}
/* Grafik rechts wenn ausgeklappt */
#akkordeon .open h2 {background: none;}
/* Erweiterung: Öffnen beim direkten Anwählen */
#Lyrik:target .inhalt, #Erbauendes:target .inhalt { display:block; }
#Lyrik:target .thema, #Erbauendes:target .thema {background-color: #680000 !important;}
-->
</style>
Das grün markierte müsstest du dort noch hinzufügen, es ist aber ungetestet und noch unvollständig.
Und so vervollständigst du den CSS-Code:
Zitat: /* Erweiterung: Öffnen beim direkten Anwählen */
#Lyrik:target .inhalt, #Erbauendes:target .inhalt { display:block; }
#Lyrik:target .thema, #Erbauendes:target .thema {background-color: #680000 !important;}
Oben stehen zwei Anweisungen.
Sie beginnen mit dem Selektor, der bestimmt, für welche Elemente die Anweisung gilt.
In diesem Fall setzt sich der wie folgt zusammen: # + die oben genannte ID + die Pseudoklasse + das angesprochene Element. Folgt ein weiterer Selektor, werden sie mit einem Komma getrennt.
Das musst du dann mit jeder ID machen. Es gibt so viele IDs wie Elemente des Akkordeons.
Wenn das alles funktioniert, kannst du dann zum Beispiel mit der Adresse
http://liamducray.de.tl/Lyrik.htm#Minne
die Seite "Lyrik" aufrufen, auf der die Rubrik "Minne, Freude, Hingabe" schon geöffnet ist 
Verlinkt wird es ganz normal.
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
|
↑
|
|
|
-
LiamDucray
|
24.10.2013 um 00:36 (UTC)
Titel: |
|
|
Wow, vielen lieben Dank für diese sehr ausführliche Hilfesellung 
Da hast du dir viel Mühe gegeben und ich konnte das soweit (hoffentlich korrekt) umsetzen.
Habe mal zwei Testseiten erstellt. Dort zeigt sich nun ein kleines Problem:
Beim Seitenwechsel auf die entsprechende ...htm#ID -Adresse ist die gewünschte Box zwar farblich markiert und geöffnet - wie gewollt. Allerdings ist dieser "aktive" Zustand nun mit einem Klick nicht mehr rückgängig zu machen ...
Zum Zuklappen der Box braucht es nun 2 Klicks. Und selbst geschlossen bleibt die Box noch farblich hervorgehoben :/
Testseite: http://liamducray.de.tl/testseite2.htm <- von dieser Testseite2 aus gehts per Link zur Testseite, wo sich die entsprechende Box automatisch öffnet (nur die linken drei). In der linken Navi kann man auch zwischen den Testseiten hin und her schalten zum Angucken.
Folgendes habe ich im CSS-Code eingefügt:
Zitat: <style type="text/css">
<!--
/* Seite in 3 Spalten teilen */
.left {float: left; width: 30%; padding: 20px 21px 0px; overflow: hidden;}
.right {float: right; width: 30%; padding: 20px 21px 0px; overflow: hidden;}
.center {float:none; width: 30%; padding: 20px 0px 0px; overflow: hidden;}
/* Hier die gesamte Breite anpassen */
#akkordeon {width: 840px; overflow: hidden;}
/* Aussehen des Textes in Titelbox */
#akkordeon h2 {font-family: Arial; font-size: 12px; color: #d9d9d9; font-weight: bold;
text-align: center; background: url();}
/* Aussehen und Groesse der Titel-Box */
.thema {cursor: pointer; border: 2px outset #606060; padding:
/* OBEN */ 2px
/* L+R */ 15px
/* UNTEN */ 2px; margin-bottom:
/* ABSTAND DAZW. */ 10px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; }
/* Aussehen und Textform der ausklappbaren Felder */
#akkordeon .inhalt {display: none; background-color: #000000; padding:
/* OBEN */ 10px
/* L+R */ 15px
/* UNTEN */ 10px; margin-bottom:
/* ABSTAND DAZW. */ 15px;
overflow: hidden; border: 2px outset #800000; text-align: left; line-height: 150%;
font-family: Arial; font-size: 12px; font-weight: bold; color: #c9c9c9;}
/* Farbe der Titelboxen wenn ausgeklappt */
#akkordeon .open {background-color: #680000 !important;}
/* Grafik rechts in Titelbox wenn ausgeklappt */
#akkordeon .open h2 {background: url();}
/* Erweiterung: Boxen öffnen beim direkten Anwählen */
#testseite:target .inhalt, #Minne:target .inhalt {display: block;}
#testseite:target .thema, #Minne:target .thema {background-color: #680000 !important;}
#testseite:target .inhalt, #Philo:target .inhalt { display:block; }
#testseite:target .thema, #Philo:target .thema {background-color: #680000 !important;}
#testseite:target .inhalt, #Seele:target .inhalt { display:block; }
#testseite:target .thema, #Seele:target .thema {background-color: #680000 !important;}
#testseite:target .inhalt, #Humor:target .inhalt { display:block; }
#testseite:target .thema, #Humor:target .thema {background-color: #680000 !important;}
#testseite:target .inhalt, #Natur:target .inhalt { display:block; }
#testseite:target .thema, #Natur:target .thema {background-color: #680000 !important;}
#testseite:target .inhalt, #Trauer:target .inhalt { display:block; }
#testseite:target .thema, #Trauer:target .thema {background-color: #680000 !important;}
#testseite:target .inhalt, #Erbau:target .inhalt { display:block; }
#testseite:target .thema, #Erbau:target .thema {background-color: #680000 !important;}
#testseite:target .inhalt, #Krit:target .inhalt { display:block; }
#testseite:target .thema, #Krit:target .thema {background-color: #680000 !important;}
#testseite:target .inhalt, #Tiefe:target .inhalt { display:block; }
#testseite:target .thema, #Tiefe:target .thema {background-color: #680000 !important;}
#testseite:target .inhalt, #engl:target .inhalt { display:block; }
#testseite:target .thema, #engl:target .thema {background-color: #680000 !important;}
-->
</style>
und Folgendes dann im HTML-Abschnitt darunter:
Zitat: <div id="akkordeon">
<div class="left">
<div class="top">
<div id="Minne">
<div style="background: #400000;" class="thema closed">
<h2>Minne, Freude, Hingabe</h2>
</div>
<div class="inhalt"> TEXT </div>
</div>
</div>
<div class="top">
<div id="Philo">
<div style="background: #400000;" class="thema closed">
<h2>Philosophisches, Okkultes</h2>
</div>
<div class="inhalt"> TEXT </div>
</div>
</div>
<div class="top">
<div id="Seele">
<div style="background: #400000;" class="thema closed">
<h2>Seelenleben, Seelenspaltung</h2>
</div>
<div class="inhalt"> TEXT </div>
</div>
</div>
</div>
<div class="right">
<div class="top">
<div id="Humor">
<div style="background: #400000;" class="thema closed">
<h2>Humor, Wortspiel, Dada</h2>
</div>
<div class="inhalt"> TEXT </div>
</div>
</div>
[...] usw.
Habe ich da womöglich schon Fehler drin verbaut? Bin mir nicht sicher, ob ichs korrekt umgesetzt habe.
Oder bedarf es weiterer Codes, um die Boxen wieder normal schließen zu können?
Beste Grüße
LD |
|
|
↑
|
|
|
|
|
24.10.2013 um 13:43 (UTC)
Titel: |
|
|
Hallo,
schön, dass es soweit funktioniert.
Da hatte ich ehrlich gesagt nicht mit gerechnet, weil ungetesteter Code bei mir immer so eine Sache ist 
Die Sache mit dem dauerhaften farblichen Hervorheben kann man abstellen, die zwei Klicks würden aber bleiben.
Da fällt mir auch keine andere Möglichkeit ein, außer natürlich, nicht auf CSS, sondern auf JavaScript zu setzen.
Das hätte aber den Vorteil, dass du den CSS-Code nicht zu ändern brauchst, sondern nur in HTML die IDs setzen musst.
Du kannst ja einfach mal diesen Code ausprobieren:
Zitat: <script type="text/javascript"> <!--
$(document).ready(function() {
var a = window.location.hash;
a = a.substr(2);
var b = document.getElementById(a).getElementsByClassName("thema")[0];
$(b).addClass('open').removeClass('closed');
$(b).siblings('.inhalt').slideDown(200);
});
//--> </script>
Wichtig ist, dass du ihn nach deinen schon vorhandenen Scripten auf der Unterseite einfügst.
Die Verlinkungen können so bleiben, den "neuen" CSS-Code müsstest du aber rausnehmen.
Und getestet habe ich den Code diesmal auch, weil JavaScript bei mir nur höchst selten im ersten Anlauf funktioniert, selbst wenn ich nur, wie jetzt auch, schon Vorhandenes umbaue
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon
Zuletzt bearbeitet von transint am 26.10.2013, 14:54, insgesamt 2-mal bearbeitet
|
|
|
↑
|
|
|
-
LiamDucray
|
24.10.2013 um 16:28 (UTC)
Titel: |
|
|
Mit Java scheint es fehlerfrei zu funktionieren Super Sache. Tausend Dank.
Dann kann ich gleich alle Verlinkungen entsprechend anpassen
Einen letzten Schliff würde ich mir noch wünschen: Undzwar dass der Bildausschnitt beim Aufrufen einer htm.#ID -Seite nicht bei der geöffneten Box beginnt, sondern weiter oben, z.B. beim Header.
Kann man das im Java-Code noch einbauen?
(Ich hab leider null Ahnung von der Javasprache^^) |
|
|
↑
|
|
|
|
|
26.10.2013 um 12:40 (UTC)
Titel: |
|
|
JavaScript, nicht Java
Wie weit oben soll die Seite denn genau beginnen?
Ganz oben, wie bei einem normalen Seitenaufruf, wäre am einfachsten.
Alles andere ginge auch, dann würde sich die Seite aber, je nach Internetverbindung, zwei mal kurz verschieben.
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
|
↑
|
|
|
-
LiamDucray
|
26.10.2013 um 13:36 (UTC)
Titel: |
|
|
JavaScript, okay *einpräg*
Mhh, ja, ganz oben wie beim normalen Seitenaufruf wäre eigentlich ausreichend. Dann sieht es schon nicht mehr so abgehackt aus.
Großen Dank nochmal für den 1A-Support |
|
|
↑
|
|
|
|
|
26.10.2013 um 13:59 (UTC)
Titel: |
|
|
LiamDucray hat Folgendes geschrieben: Großen Dank nochmal für den 1A-Support
Aber gerne doch
Ich habe den JavaScript-Code mal ein wenig angepasst.
Das müsstest du auch mit den Verlinkungen machen:
Aus .../Unterseite.htm#ID wird .../Unterseite.htm#!ID
Damit hat sich die "Verschiebung" dann erledigt.
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon
Zuletzt bearbeitet von transint am 26.10.2013, 14:59, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
LiamDucray
|
26.10.2013 um 14:37 (UTC)
Titel: |
|
|
Perfekt
Das hat alles richtig gut geklappt  |
|
|
↑
|
|
|
|
