Javascript-Problem? Oder geht das mit CSS?

#1
Liebe Experten,

ich habe eine Frage zu meiner Website:

Oben links ist das "Latest Updates"-Flyout. Ich hätte gerne, dass man darin blättern kann, also, dass es eine zweite und dritte Seite gibt, so dass ich nicht nur fünf Updates anzeigen kann, sondern eben mehr.

Ich hoffe, ich konnte mich verständlich ausdrücken, um was es geht.

Leider habe ich keinen Schimmer, wie man das macht. Nicht mal, ob man dafür zwingend JS braucht, oder ob das mit reinem CSS geht.

Könnte mir bitte jemand auf die Sprünge helfen?

Vielen Dank und beste Grüße

Dirk
 

JR Cologne

Well-Known Member
c-b Experte
#2
Das solltest du am besten mit JS angehen. Mit CSS wäre es, glaube ich, theoretisch auch möglich, allerdings würde es das Ganze deutlich schwieriger gestalten.

Im Idealfall stellst du dein "Latest Updates"-Flyout so um, dass es sich per Klick öffnet.
Anschließend fügst du deiner Liste die weiteren Updates, welche alle angezeigt werden sollen, hinzu.
Diejenigen, welche direkt sichtbar sein sollen, bekommen z.B. eine Klasse "show" verpasst.
Im CSS sorgst du also dafür, dass diese dann auch eingeblendet werden. Alle anderen List Items, welche die Klasse nicht haben, werden ausgeblendet.
Um durch diese Updates blättern zu können, bräuchtest du zumindest zwei Buttons (Zurück und Weiter).
Mittels JS kannst du anschließend steuern, was passieren soll, wenn auf einen Button geklickt wird.
Klickt der User beispielsweise auf den "Weiter"-Button, wird die Klasse "show" von den aktuell eingeblendeten List Items entfernt und bei den nächsten fünf Updates hinzugefügt, sodass stattdessen diese eingeblendet werden.
Wenn du diese grundlegende Funktionalität hast, müsste man sich natürlich noch Gedanken über eine nette Animation machen. Das kommt dann aber später.

Beherrschst du JS halbwegs und ist dir nun grob klar, was du machen musst? Wenn nicht, könnte ich dir heute Abend vielleicht mal ein Beispiel zusammenstellen. Im Grunde musst du erstmal aber hauptsächlich nur herausfinden, wie du mittels JS Klassen hinzufügen/entfernen kannst und wie du auf Klick-Events reagieren kannst.
 
#3
Vielen Dank für deine Antwort.

Das Prinzip habe ich kapiert, klingt plausibel.

Wie das mit der konkreten Umsetzung aussieht, ist eine andere Frage. Da müsste ich mich erstmal schlau machen, wie das mit JS geht.

Edit (nach ein wenig Überlegung):

Im Prinzip müsste man doch Folgendes machen:
(1) Alle Updates in die Liste nebst einem Listeneintrag "more" und einem Element "previous" (oder so ähnlich)
(2) Alle sofort anzuzeigenden Elemente bekommen eine separate Klasse "show" mit display: block; in der CSS, alle anderen eine separate Klasse "hide" mit: display: none;
(3) Dann wird über den "more"-Listeneintrag ein JS-Eventhandler gelegt. Wenn man klickt: wird aus show hide und aus hide show.
(4) Wenn man dann auf der zweiten Seite ist, wird bei einem Klick auf "previous" wieder aus show hide und aus hide show.

Passt das so? Ich weiß bloß nicht, wie man das im Eventhandler macht. Wie kann man da CSS-Eigenschaften ändern, also z.B. aus display:block display:none machen? Oder die Klassenzugehörigkeit ändern, also aus "show" "hide" und umgekehrt.
 

dominikb

Well-Known Member
c-b Experte
#4
Ich weiß bloß nicht, wie man das im Eventhandler macht. Wie kann man da CSS-Eigenschaften ändern, also z.B. aus display:block display:none machen? Oder die Klassenzugehörigkeit ändern, also aus "show" "hide" und umgekehrt.
Glücklicherweise ist ja jQuery auf der Webseite eingebunden, d. h. du kannst die CSS-Eigenschaften mit .css() ändern - z. B. $('#seite-2').css('display', 'block');. In dem konkreten Fall würde ich aber eher .show() und das Gegenstück .hide() verwenden.

Zum Modifizieren der Klassen gibt es .addClass() und .removeClass().
 
#5
Das heißt, du würdest mit .show() die ganz Klasse einblenden und mit .hide() diese ausblenden und nicht einzelne CSS-Attribute ändern?
Wie geht datt?

Ich hätte das so gemacht (beim Klick auf den "more"-Button):

$(".versteckt").css("display", "block");
$(".sichtbar").css("display", "none");


Aber meine JS-Kenntnisse sind so rudimentär, dass ich nicht sicher bin, ob das so klappt.
 

JR Cologne

Well-Known Member
c-b Experte
#6
Ich würde dir empfehlen, die jQuery-Funktion toggleClass() zu verwenden.

Damit kannst du deine Klasse(n) für die Sichtbarkeit entsprechend entfernen bzw. hinzufügen.

Die css()-Funktion ließe sich zwar auch nutzen, allerdings ist der Weg über die Klassen besser, da man das Styling dann komplett im CSS-Code belassen kann.

Ein Click-Event-Handler lässt sich mit jQuery ganz einfach folgendermaßen hinzufügen:

Javascript:
$('#button').on('click', function (event) {
    // nur zum Testen, Ausgabe des Klick-Events
    console.log(event);
});
 
#7
Ok, ich komme der Sache näher:

<style>
.sichtbar {
display:block;
}

.unsichtbar {
display:none;
}

</style>

</head>
<body>

<p class="toggle sichtbar">Man sieht mich.</p>
<p class="toggle unsichtbar">Man sieht mich nicht.</p>

<button>Umschalten show/hide</button>

<script>
$('button').click(function(){
$('.toggle').toggleClass('sichtbar unsichtbar');

});

</script>


Oder, vielleicht noch etwas schöner - jedenfalls ohne Button, sondern als Hyperlink ("more"):

<script>
function umschalten(){
$('.toggle').toggleClass('sichtbar unsichtbar');

};

</script>

<a href="javascript:umschalten()">More</a>


Wäre das so korrekt?
 
Zuletzt bearbeitet:

JR Cologne

Well-Known Member
c-b Experte
#9
Würde dir eher empfehlen, einen Event-Listener zu nutzen. Zusätzlich kann man die Elemente noch in Variablen packen. Ist ein bisschen sauberer:

HTML:
<script>
var moreLink = $('#more'),
    toggle = $('.toggle');
    
moreLink.on('click', function (event) {
    event.preventDefault();
    umschalten();
});
    
function umschalten() {
    toggle.toggleClass('sichtbar unsichtbar');
}
</script>

<a href="#" id="more">More</a>
 
#10
Ich könnte noch mal eure geschätzte Hilfe gebrauchen.

Aktueller Stand:

Code:
<script>
function umschalten(){
  $('.toggle').toggleClass('sichtbar unsichtbar');

};

</script>  
   
<li class="toggle sichtbar"><a style="color: #FFF" href='poi_factory_butte.php'>Factory Butte <span style ="font-size:0.8em">(new 01/2019)</span></a></li>
<li class="toggle sichtbar"><a style="color: #FFF" href='poi_moonscape_overlook.php'>Moonscape Overlook <span style ="font-size:0.8em">(new 01/2019)</span></a></li>
<li class="toggle sichtbar"><a style="color: #FFF" href='poi_wedge_overlook.php'>Wedge Overlook <span style ="font-size:0.8em">(new 01/2019)</span></a></li>
<li class="toggle sichtbar"><a style="color: #FFF" href='poi_fantasy_canyon.php'>Fantasy Canyon <span style ="font-size:0.8em">(new 01/2019)</span></a></li>
<li class="toggle sichtbar"><a style="color: #FFF" href='poi_hamburger_rocks.php'>Hamburger Rocks <span style ="font-size:0.8em">(new 01/2019)</span></a></li>  

<li class="toggle unsichtbar"><a style="color: #FFF" href='poi_leprechaun_canyon.php'>Leprechaun Canyon <span style ="font-size:0.8em">(new 01/2019)</span></a></li>
<li class="toggle unsichtbar"><a style="color: #FFF" href='poi_canyon_x.php'>Canyon X <span style ="font-size:0.8em">(new 01/2019)</span></a></li>
<li class="toggle unsichtbar"><a style="color: #FFF" href='poi_paria_canyon_vermilion_cliffs.php'>Paria Canyon-Vermilion Cliffs NM <span style ="font-size:0.8em">(new 12/2018)</span></a></li>
<li class="toggle unsichtbar"><a style="color: #FFF" href='poi_gold_butte_national_monument.php'>Gold Butte NM <span style ="font-size:0.8em">(new 12/2018)</span></a></li>
<li class="toggle unsichtbar"><a style="color: #FFF" href='poi_vermilion_cliffs.php'>Vermilion Cliffs NM <span style ="font-size:0.8em">(new 12/2018)</span></a></li>


<li class="toggle sichtbar"> <a style ="text-align: right;padding-right:15px" href="javascript:umschalten()">Seite 2</a></li>
<li class="toggle unsichtbar"> <a style ="text-align:right;padding-right:15px" href="javascript:umschalten()">Seite 1</a></li>
Damit setze ich alles, was vorher zur Klasse "toggle sichtbar" gehörte auf "toggle unsichtbar" und umgekehrt.

"toggle sichtbar" ist in der CSS display: block; und "toggle unsichtbar" ist display:none;

Das funktioniert gut.

Aber wie ist das, wenn ich drei Seiten habe, zwischen denen ich blättern möchte? Unten auf den Seiten steht ein Link zur folgenden bzw. zur ersten.

Vielen Dank.
 
Gefällt mir: 5250
#11
Eine mögliche Lösung:
Gib den Links jeweils eine Klasse, die die Seite angibt, z. B. class="seite1"
Übergib der Funktion umschalten() jeweils diese Klasse, z. B. href="javascript:umschalten('seite1');"
In dieser Funktion schalte zunächst die Lisenelemente, die gerade sichtbar sind, aus und die, welche die betr. Klasse haben, ein:
Code:
function umschalten (theclass) {
    $("li.sichtbar").toggleClass("sichtbar unsichtbar");
    $("li." theclass).toggleClass("sichtbar unsichtbar"):
}
Ungetestet.
Die "Links" bzw. Buttons für das Umschalten müssen dann immer sichtbar sein, d. h. du müsstest dort die Klassen sichtbar bzw. unsichtbar weg lassen.

Mit CSS geht es auch, wenn man den Radiobutton-Trick verwendet:
http://jsfiddle.net/Sempervivum/gaoe6zuq/16/
 
Zuletzt bearbeitet:
Oben