[jQuery] Durch Div scrollen und an bestimmter Stelle anhalten

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Tiffany Dicks, 5. Februar 2016 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 5. Februar 2016
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    Hi,

    in einem Spin & Win System möchte ich dem Kunden anzeigen was er gewonnen hat.

    Dadurch scrolle ich per jQuery durch ein Div das so aussieht.

    HTML:
    <div class="scroller">
<div class="gewonnen-1">1</div>
<div class="gewonnen-2">1</div>
<div class="gewonnen-3">1</div>

</div>
    per
    Code:
    function scroll(){
 $('.scroller').scrollLeft(0);
 $('.scroller').stop().animate({scrollLeft:310},500,'linear',scroll);
}
    scrolle ich durch das Div

    Es sieht um den Dreh wie folgt aus

    ATzSv.gif

    Jetzt möchte ich eine Funktion haben like holdOnDiv der ich sagen kann 1 2 3 ... und die Scroll Animation scrollt dann bis zu dem gewonne-x div und hält an.

    Mein Versuch der logisch nicht geht (hab da schon zu oft dran rumgefummelt) Es hält auch an nur an der falschen Stelle.

    Code:
    function ScrollToDiv(div){
 
 switch(div){
 
 case 1:
 var posi = $('.won-3').width()+5;
 break;
 
 case 2:
 var posi = $('.won-1').width()+5;
 break;
 
 case 3:
 var posi = $('.won-2').width()+5;
 break;
 
 }
 
 $('.scroller').stop();
 $('.scroller').animate({
 scrollLeft: posi
 }, 700, function(){
 
 });
 

}
    Bitte um Hilfe :)
     

  3. Anzeige
  4. #2 5. Februar 2016
    AW: [jQuery] Durch Div scrollen und an bestimmter Stelle anhalten

    die posi stimmt nicht, weil du nur immer die width der jeweiligen div erhälst aber das div ja an zb zweiter position ist, also muss der scrollLeft natürlich auch die ersten position width eingerechnet sein.

    also die erste stelle würde passen, zweite muss plus die erste width und dritte plus erste und zweite.

    nebenbei: die class heißt im html code nicht won-1 sondern gewonnen-1 und ich würde besser #id's anstelle von .class verwenden.
     
  5. #3 5. Februar 2016
    AW: [jQuery] Durch Div scrollen und an bestimmter Stelle anhalten

    Ok ok ... Danke soweit ...

    Es sieht jetzt so aus (Codetechnisch).

    Code:
    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
 
 
 
 <div class="scroller">
 <div id="won-1">DIV 1</div>
 <div id="won-2">DIV 2</div>
 <div id="won-3">DIV 3</div>
 </div>
 
 <button>Go</button>
 <button>Stop 1</button> <button>Stop 2</button> <button>Stop 3</button>
 
 
</body>
</html>
    Code:
    *{margin:0;padding:0;}

.scroller{
 width:310px;
 height:76px;
 white-space:nowrap;
 overflow:hidden;
 margin:30px;
 background:#000;
}
.scroller > div{
 width:300px;
 height:70px;
 margin:3px;
 display:inline-block;
 *display:inline;
 zoom:1;
 color:#fff;
 text-align:center;
 background:#444;
}
    Code:
    function scroll(){
 $('.scroller').scrollLeft(0);
 $('.scroller').stop().animate({scrollLeft:310},5000,'linear',scroll);
}

scroll();

function ScrollToDiv(div){
var posi = 0; 
 switch(div){
 
 case 1:
 posi = 5;
 break;
 
 case 2:
 posi = $('#won-1').width()+5;
 break;
 
 case 3:
 posi = $('#won-1').width()*3+5;
 break;
 
 }
 
 $('.scroller').stop();
 $('.scroller').animate({
 scrollLeft: posi
 }, 4000, function(){
 
 });
 

}
$('button').on('click', function(){
 switch($(this).html()){
 
 case 'Go':
 scroll();
 break;
 
 case 'Stop 1':
 ScrollToDiv(1);
 break;
 
 case 'Stop 2':
 ScrollToDiv(2);
 break;
 
 case 'Stop 3':
 ScrollToDiv(3);
 break;
 
 }
});
    Es funktioniert aber es gefällt mir noch nicht ...

    Das liegt daran das es mal nach links und mal nach rechts scrollt. Also wenn ich bei zwei bin scrollt es bei Klick auf 1 nach links bei klick auf zwei aber nach Rechts. Kann man das irgendwie verhindern? Also dafür sorgen das es immer nach links oder rechts scrollt?
     
  6. #4 6. Februar 2016
    AW: [jQuery] Durch Div scrollen und an bestimmter Stelle anhalten

    Folgendes Problem. Es stoppt immer die Animation ist ziemlich ruckelig bekommt man das irgendwie besser hin? Also flüssiger?
     

  7. Videos zum Thema
Die Seite wird geladen...
Similar Threads - jQuery Durch Div
  1. Tokatci

    Carousel-Slider mit jQuery erweitern ?

    Tokatci , 19. Juni 2017 , im Forum: Webentwicklung
    Antworten:
    3
    Aufrufe:
    4.798
    Tokatci
    21. Juni 2017
  2. t001

    Suche nach href mittels Javascript und jquery

    t001 , 22. August 2015 , im Forum: Webentwicklung
    Antworten:
    9
    Aufrufe:
    1.200
    Nanobyte
    29. August 2015
  3. BladeFire

    JQUERY UI: Datepicker funktioniert nicht - Jquery (ui) Einbindung funktioniert nicht?

    BladeFire , 28. Juli 2015 , im Forum: Webentwicklung
    Antworten:
    2
    Aufrufe:
    1.540
    BladeFire
    28. Juli 2015
  4. leex

    Jquery Animation Bild

    leex , 28. November 2013 , im Forum: Webentwicklung
    Antworten:
    5
    Aufrufe:
    1.197
    leex
    5. Dezember 2013
  5. Snarkoon

    Javascript + JQuery Progressbar value mehrfach durch if reduzieren

    Snarkoon , 29. August 2013 , im Forum: Webentwicklung
    Antworten:
    2
    Aufrufe:
    1.127
    Snarkoon
    31. August 2013