• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Slider (Akkordeon) erweitern

MrMurphy

Senior HTML'ler
Hallo,

ich habe im Internet basierend auf jquery einen Slider-Effekt gefunden und in meine Homepage eingebaut:

Slider-Problem

HTML:
   <script src="jquery-1.4.2.js"></script>
   <script>
      $(document).ready( function() {
         $('.trigger').not('.trigger_active').next('.toggle_container').hide();
         $('.trigger').click( function() {
            var trig = $(this);
            if ( trig.hasClass('trigger_active') ) {
               trig.next('.toggle_container').slideToggle('slow');
               trig.removeClass('trigger_active');
            } else {
               $('.trigger_active').next('.toggle_container').slideToggle('slow');
               $('.trigger_active').removeClass('trigger_active');
               trig.next('.toggle_container').slideToggle('slow');
               trig.addClass('trigger_active');
            };
            return false;
         });
      });
   </script>

Was mir gefällt und auch bleiben soll:

a) Die Schaltflächen als "Wechselschalter", so dass die Beiträge geöffnet und auch geschlossen werden können

b) Das sich ein geöffneter Beitrag schließt, sobald ein neuer geöffnet wird

c) Alle Beiträge können gleichzeitig geschlossen sein

d) Wenn Java-Script verboten ist, ist der gesamte Text sichtbar. Den Besuchern geht bei deaktivierten Java-Script also nichts verloren.

Ich hätte jedoch gerne zwei zusätzliche Änderungen bzw. Funktionen.

e) Eine Schaltfläche (bzw. zwei Schaltflächen, eine am Anfang und eine am Ende), die alle Beteiträge gleichzeitig öffnet und schließt, also auch als Wechselschalter. Hintergrund: Dann kann über die Browsersuche das gesamte Dokument durchsucht werden, was nicht möglich ist, wenn alle Beiträge geschlossen sind oder nur ein Beitrag geöffnet ist. Es soll also die Möglichkeiten geben, das entweder kein, nur ein beliebiger oder alle Beiträge geöffnet sind.

f) Die Schaltfläche,durch die der zugehörige Text geöffnet wird, soll sich nicht verschieben.

Aktuell funktioniert das, wenn bei einem geöffnetem Text ein beliebiger Text darüber geöffnet wird. Also z. B. der Text zu 08 ist offen und es wird der Text zu 03 geöffnet. Dann wird der Text zu 08 geschlossen, der Text zu 03 geöffnet und die Überschrift 03 bleibt im Fenster stehen. Mit dem Lesen des Textes zu 03 kann also gleich begonnen werden.

Wenn jedoch z. B. der Text zu 04 offen ist und dann der Text zu 07 geöffnet wird, rutscht die Überschrift zu 07 nach oben außerhalb des Browserfensters und es muss nach oben gescrollt werden, um den gesamten Text zu 07 lesen zu können. Wenn also nacheinander die Texte zu 01, 02, 03 u.s.w. geöffnet werden, muss ständig nach oben gescrollt werden.

Gibt es ein Slider-Script, das alle sechs Wünsche erfüllt oder kann das vorhandene Script entspreched erweitert werden und wenn ja, wie? Mit Java-Script kenne ich mich leider gar nicht aus, ich kann solche Scripte grade mal mit Anleitung in html-Seiten einbauen.

Gruss

MrMurphy
 
Werbung:
Naja, das Einarbeiten in jQuery bleibt dir nicht erspart. Es sei denn, du willst, dass dir jemand das Script schreibt, und dafür haben wir die Jobbörse.

Nachfolgend eine Funktion, welche abwechselnd alle Beiträge öffnet und schließt, analog zur Frage 7e. Dazu brauchst du jetzt noch eine Schaltfläche mit der ID button in deinem HTML.

HTML:
$('#button').click(function() {
    $('div').each(function(i) {
        if ($(this).hasClass('toggle_container')) {
            $(this).toggle();
        }
    });
});
 
Hallo,

vielen Dank für deine Mühe. Ich habe dein zusätzliches Script eingebaut. Das ist schon mal ein großer Schritt in die richtige Richtung, auch wenn es nicht 100%ig so funktioniert wie von mir erhofft. Ein Problem gibt es, wenn bereits ein Text geöffnet ist, wenn der Button gedrückt wird. Dann werden alle anderen geöffnet und der offene geschlossen. Es wäre natürlich schöner, wenn bei Klick auf den Button alle Texte geöffnet bzw. beim zweiten Klick wieder geschlossen werden, egal ob bereits grade einer geöffnet ist oder nicht.

Gruss

MrMurphy
 
Werbung:
Habe es nochmal überarbeitet. Es ist allerdings noch nicht ganz perfekt, da es zwei Klicks zum Schließen aller Container braucht, wenn einer davon bereits geöffnet war. Ich sehe auf Anhieb jetzt aber auch nicht, woran das liegen könnte.

HTML:
$('#button').click(function() {
    $('div').each(function(i) {
        if ($(this).hasClass('toggle_container') && $(this).is(':visible')) {
            $('div.toggle_container').hide();
        } else {
            $('div.toggle_container').toggle();
        }
    });
});
 
Hallo,

danke, aber das erste von dir gepostete Script funktioniert besser. Beim zweiten funktioniert des komplette Öffnen und Schließen nicht immer. So muss zunächst mindestens ein Text geöffnet sein. Nach dem Ausführen des Scripts sind dann teilweise auch mehrere Fenster offen, die sich dann nicht mehr mehr schließen lassen. Ich hab das zweite Script mal in eine zweite Datei mit dem neuen Script eingefügt:

Slider-Problem

Trotzdem danke für deine Mühe.

Gruss

MrMurphy

P.S.: Wie kann ich einem Link in diesem Forum einen anderen Namen als "Slider-Problem" geben, der automatisch generiert wurde? Über den Button "Link einfügen / editieren" wird mir dazu keine Möglichkeit angeboten.
 
P.S.: Wie kann ich einem Link in diesem Forum einen anderen Namen als "Slider-Problem" geben, der automatisch generiert wurde? Über den Button "Link einfügen / editieren" wird mir dazu keine Möglichkeit angeboten.
Das musst du beim erstellen des Postings unten den haken bei "Automatically retrieve titles from external links" rausnehmen.

Ich hab das Script mal ein bisschen aufgehübscht, sollte nun so funktionieren wie gewünscht.

Deine beiden Buttons:
HTML:
<a href='#' class='expand-all'>Alle auf</a>
<a href='#' class='contract-all'>Alle zu</a>
Das Script:
Code:
$(document).ready( function() {
         $('.trigger').click( function(e) {
          e.preventDefault();
            var $this = $(this);
            if ( $this.next('.toggle_container').hasClass('trigger_active') ) {
               $this.next('.toggle_container').slideToggle('slow').removeClass('trigger_active');
            } else {
               $('.trigger_active').slideToggle('slow').removeClass('trigger_active');
               $this.next('.toggle_container').slideToggle('slow', function(){
                var xy = $(this).prev().position();
                $('html,body').animate({scrollTop: xy.top}, 500);
                }).addClass('trigger_active');
            };
         });
         
        $('a.expand-all').click(function(e){
          e.preventDefault();
          $('.toggle_container').not('.trigger_active').slideToggle('slow').addClass('trigger_active');;
          });
          
        $('a.contract-all').click(function(e){
          e.preventDefault();
          $('.trigger_active').slideToggle('slow').removeClass('trigger_active');;
          }); 
      });


Nicht schön, aber selten
:mrgreen:

MfG
 
Werbung:
Hallo,

danke, aber das funktioniert leider auch nicht richtig. Speziell, das ein Beitrag geöffnet und wieder geschlossen werden kann, ohne das ein anderer Beitrag geöffnet wird.

http://home.arcor.de/mr-murphy/test/test_slider_problem/index_2012_09_19.html

Außerdem sollen beim Öffnen der Seite ja erst mal alle Beiträge geschlossen sein.

Schön an deiner Lösung ist natürlich das eine Überschrift immer im Bild bleibt, wenn der zugehörige Text geöffnet oder geschlossen wird.

Gruss

MrMurphy
 
Zurück
Oben