Ankündigung

Einklappen
Keine Ankündigung bisher.

Fixed Vor- & Zurück-Button die zu Container scrollen?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fixed Vor- & Zurück-Button die zu Container scrollen?

    Hey Leute,

    ich bin in JS nicht wirklich fit. Habe jetzt ein wenig rumrecherchiert, allerdings bis dato keine Lösung gefunden. Das Problem ist relativ simpel, allerdings übersteigt es meine Expertise.

    Im Header gibt es einen Vor- und Zurück-Button. Der Header ist fixed, so auch die Buttons. Es gibt zehn verschiedene Container (DIVs), welche horizontal nebeneinander liegen. Beim Klick des Vor-Buttons soll logischerweise zum nächsten Container gescrollt werden. (<a href="#client02">). Alle Container heißen #client01 bis #client02.

    Einer nen Tipp?

    Danke für eure Hilfe vorab!!


  • #2
    Ja, nen ganz heißen: Google Dir einen.
    --

    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


    --

    Kommentar


    • #3
      wow danke. das war hilfreich. das habe ich -wie auch erwähnt- bereits einige Stunden getan und versucht diverse JSs anzupassen. Offensuchtlich ohne Erfolg, sonst würde ich meine Frage nicht stellen. Würde mich dennoch sehr freuen, könnte mir jemand nen Link oder Script Schnipsel zur Verfügung stellen. Merci

      Kommentar


      • #4
        PHP-Code:

        /* ein einzehner container */

        <div id="container02">
         <
        a href="#container01">button1</a><a href="#container03">button2</a>
        </
        div
        das wilste?

        na dann, bau ne schleife.

        Kommentar


        • #5
          Nee, das ist ja klar. Ich habe lediglich einen Vor- und einen Zurück-Button. Die sind fix. Da ich allerdings 10 DIVs ansteuern möchte, wird es nur mit einer Alternative funktionieren.

          Mir ist klar, dass ich die beiden Buttons via onClick="next()" und onClick="previous()" an die Funktion binde.

          Jetzt brauche ich im JavaScript noch meine beiden Funktion. Vielleicht ist es möglich, die Funktion erkennen zu lassen, bei welcher Zahl man grad steht, dies dann sogar an den Namen des / der DIVs binden, da die im Präfix alle gleichheißen und dann jeweils den Wert 1 im Namen dazu addieren bzw. abziehen.

          Ich weiß leider nicht, wie ich das umsetzen kann...

          Kommentar


          • #6
            Vielleicht auch mit nem Array? Hab das aber so noch nicht zum Laufen bekommen.

            PHP-Code:
            <script type="text/javascript">

             var 
            clients=new Array()
             var 
            status=0
             client
            [0]='#client01'
             
            client[1]='#client02'
             
            client[2]='#client03'
             
            client[3]='#client04'
             
            ...

             function 
            previous(){
                if (
            status 0){
                    
            status=status-1
                    
            // hier wüsste ich nicht weiter
                
            }
             }

             function 
            forward(){
                 <
            script type="text/javascript">

             var 
            photos=new Array()
             var 
            which=0
             photos
            [0]='images/image1.jpg'
             
            photos[1]='images/image2.jpg'
             
            photos[2]='images/image3.jpg'
             
            photos[3]='images/image4.jpg'

             
            function backward(){
                if (
            which 0){
                    
            which=which-1
                    document
            .images.photoslider.src=photos[which]
                }
             }

             function 
            next(){
                 if (
            status<clients.length-1){
                    
            status=status+1
                    
            // genau wie hier
                 
            }
             }

             
            </script>


            Ideen? 

            Kommentar


            • #7
              da ist ein wenig was durcheinander gekommen. nur da setup und funktion next und funktion previous sind zu beachten

              Kommentar


              • #8
                Vielleicht solltest du mal einen Blick auf jquery werfen. Da hast du eine .animate()-Funktion. Dein Szenario lässt sich dann auf vielfältige Weise lösen. Beispielsweise mit
                PHP-Code:
                margin-left: -100%; 
                ... welches zu margin-left: 0%; animiert wird.

                Du musst auch deinen Containern nicht jeweils IDs geben. Einfache (gleichnamige) Klassen reichen dann. Schau dir beispiele im Netz an. Mit Slidern wirst du überflutet.
                Standards - Best Practices - AwesomePHP - Guideline für WebApps

                Kommentar


                • #9
                  ich ging von einer complett js freien lösung aus.

                  Kommentar

                  Lädt...
                  X