Vollständige Version anzeigen : [jQuery] Durch Div scrollen und an bestimmter Stelle anhalten


Tiffany Dicks
05.02.2016, 18:31

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.

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

</div>


per 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

#attach#56112#/attach#

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.

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 :)

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
raid-rush
05.02.2016, 18:43

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.


Tiffany Dicks
05.02.2016, 19:13

Ok ok ... Danke soweit ...

Es sieht jetzt so aus (Codetechnisch).

<!DOCTYPE html>
<html>
<head>
<script src=";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>


*{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;
}


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?


Tiffany Dicks
06.02.2016, 20:59

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


Ähnliche Themen zu [jQuery] Durch Div scrollen und an bestimmter Stelle anhalten
  • [C#] Bestimmte Stelle in bestimmter Zeile auslesen
    Hallo, ich hoffe man kann mir hier helfen. Momentan arbeite ich daran, eine Textdatei an einer bestimmten Stelle und Zeile auszulesen. Eine Testdatei wäre z;B. KAP 1 blabla 2 bla 3 KAZ bla 2 blablabla 4 KAP1 2 0 blaaa Ich möchte in dieser Datei die 3. Zeile und 12. Spa [...]

  • [PC] Prototype bricht immer an bestimmter Stelle ab
    So bin grad an der Stelle angelangt : Man steuert den Helikopter und zerstört erst ein HIVE, dann muss man Soldaten evakuieren.. nun bin ich in der Militärbase, seh diese Videosequenz, in der der Protagonist dieses Gas einatmet und sich so verrät.. dann stürzt es einfach ab und das nun schon da [...]

  • [PC] CoD BO - Spiel friert an bestimmter Stelle ein
    huhu, Black Ops spackt bei mir rum -;- Das spiel friert immer an derselben stelle ein. das passiert immer in der 1. Vietnam mission, nachdem man die 2. Claymores hochjagt. Hab das spiel original. Win7 x64 4GB Ram AMD64 Phenom 4x2;3 ATI Radeon HD 4870 512MB [...]

  • [JavaScript] Website nach unten scrollen lassen mit Jquery
    Hallo, ich versuche mit jquery meine Seite nach unten scrollen zu lassen. Der Befehl soll nach jedem Klick ausgeführt werden. Habe das bis jetzt so gelöst: $(document);ready(function() ); }, 3000); return false; }); Der Timeout ist dafür da, weil auf der Page noch [...]



raid-rush.ws | Imprint & Contact pr