| Autor |
Nachricht |
Gratin
Threadersteller
Dabei seit: 25.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 28.02.2013 16:00
Titel [jquery] Zufallszahl beibehalten trotz scrolltop |
  |
|
Hi,
sorry erstmal für den unverständlichen Titel.
Also: Bin selber noch Anfänger bei jquery bzw. javascript und komme einfach nicht weiter 
Folgende Situation hätte ich gerne:
Beim Aufruf einer Website wird zu zehn (zunächst nicht sichtbaren) Objekten jeweils ein neuer, zufälliger margin-left-Abstand generiert, welcher bis zum Refresh der Seite auch beibehalten wird (danach gibt es logischerweise neue Werte). Nun sollen die Objekte beim herunterscrollen hintereinander erscheinen bzw. wieder verschwinden beim hochscrollen - mit der am Anfang zugewiesenen margin-left-Größe.
Folgende Situation hab ich:
Das mit dem Erscheinen/Verschwinden beim herunterscrollen/hochscrollen funktioniert, auch bekommt jedes Objekt einen eigenen zufälligen Abstand. Problem ist, dass sich die Abstände ständig beim Scrollen ändern, sie beginnen quasi zu "tanzen". Und das soll eben nicht sein.
Hier erstmal der Code:
| Code: |
var startzahl = x;
for (var i = 1; i <= 10; i++)
{
var zufallszahl = Math.floor(Math.random() * (max - min + 1)) + min;
$('.g' + i ).css({'margin-left':zufallszahl + 'px','float':'left'});
startzahl = startzahl + 50;
if ( $(window).scrollTop() > startzahl)
{ $('.g' + i ).show(); }
else
{ $('.g' + i ).hide(); }
}
|
Die Problematik hab ich evtl. schon entdeckt (?): Höchstwahrscheinlich wird bei jedem Scroll eine neue Zufallszahl generiert, nur wie kann ich das vermeiden?
Vergebt mir meine Unwissenheit, ein Hinweis in welche Richtung ich recherchieren muss würde vielleicht schon helfen.
Vielen Dank im voraus!
|
|
| |
  |
 |
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: 
|
Verfasst Do 28.02.2013 17:40
Titel
|
|
|
|
Ich verstehe ich die Logik in deinem Script nicht so recht - diese For Schleife läuft einnmal durch und kontrolliert zehnmal, wie das Fenster gescrollt wurde? Sollte Positionierung und Kontrolle nicht unabhängig voneinander laufen? Vielleicht verstehe ich die Intention des Scripts auch falsch.
|
|
| |
 |
|
|
Anzeige
|
|
|
Gratin
Threadersteller
Dabei seit: 25.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 01.03.2013 11:33
Titel
|
|
|
| ChrisKam hat geschrieben: | | Sollte Positionierung und Kontrolle nicht unabhängig voneinander laufen? |
Genau. Nur wie mach ich das?
Folgenden Code hab ich auch schon probiert, liefert aber das gleiche Ergebnis (auch hier "tanzen" die Objekte beim Scrollen):
| Code: | for (var i = 1; i <= 10; i++)
{
var zufallszahl = Math.floor(Math.random() * (max - min + 1)) + min;
$('.g' + i ).css({'margin-left':zufallszahl + 'px','float':'left'});
}
var startzahl = x;
var i = 0;
for (var i = 1; i <= 10; i++)
{
startzahl = startzahl + 50;
if ( $(window).scrollTop() > startzahl)
{ $('.g' + i ).show(); }
else
{ $('.g' + i ).hide(); }
}
|
Der Grund dass auch die scrollTop-Geschichte in einer Schleife liegt ist der, dass dadurch jedesmal der scrollTop-Abstand des Objekts .g[i] um 50 erhöht wird. Dadurch erscheinen die Objekte hintereinander beim Scrollen.
Ich denke dass durch den .show()-Befehl bei jedem Scroll wohl jedes Mal die Zufallszahl neu generiert wird, muss ja so sein. Wie kann ich denn beides voneinander trennen?
|
|
| |
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht:
|
Verfasst Fr 01.03.2013 12:07
Titel
|
|
|
Die Kontrolle sollte über Event-Listener laufen und hat meines Erachtes nichts innerhalb der Schleifen verloren. Für Deinen Fall kannst Du einfach das Scroll Event nutzen: http://api.jquery.com/scroll/
Ich hab's im Übrigen immer noch nicht gerallt - Schreib' mal in klaren Sätzen auf, was Dein Script tun soll, bevor Du es in Code schreibst - so etwa:
"Erzeuge 10 Elemente mit zufälligem Abstand links,
..."
und im Übrigen: Lade Dir mal Chrome runter und öffne die Entwickkleransicht (F12) und schau ins DOM um zu sehen, was Dein Script live macht. 
|
|
| |
|
|
Gratin
Threadersteller
Dabei seit: 25.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 01.03.2013 16:08
Titel
|
|
|
Hm, also so wie ich das verstanden habe würden sämtliche Objekte mit .scroll() gleichzeitig angesprochen, oder irre ich mich da?
Nur um deutlich zu machen was ich brauche habe ich zwei animierte Gifs erstellt (grau = Objekte, schwarz = Scrollbalken, es wird also runter- und wieder hochgescrollt)
Wie gesagt werden schon ganz am Anfang die Abstände zugewiesen.
Momentan sieht es so aus:
(Pro Scroll: ein neues Objekt wird sichtbar PLUS alle bisher erschienenen Objekte erhalten einen neuen Abstand - die Objekte wackeln)
Es soll aber so aussehen:
(Pro Scroll: ein neues Objekt wird sichtbar, alle bisher erschienenen Objekte behalten ihren anfangs zugewiesenen Abstand bei - die Objekte stehen fest)
Deswegen denke ich dass die Kontrolle evtl. doch in die Schleife gehört?? Wie gesagt funktioniert ja theoretisch beides für sich, nur nicht in Kombination.
|
|
| |
|
|
Gratin
Threadersteller
Dabei seit: 25.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 04.03.2013 18:12
Titel
|
|
|
|
Problem gelöst, danke ChrisKam. Das mit dem Scroll-Event war der richtige Hinweis.
|
|
| |
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht:
|
Verfasst Mo 04.03.2013 18:14
Titel
|
|
|
Ah, hatte gar nicht mehr hier reingeschaut - freut mich dass ich helfen konnte
Vorbidliche Problembeschreibung übrigens mit den GIFs!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Kursive Passagen trotz Absatzformat beibehalten? ID CS3
PHP: Zufallszahl aber jede nur einmal
Zufallszahl in Datenbank schreiben und Lesen
jquery - hide content in jquery object
jQuery Plugin - Slider als Input wie in jQuery UI
a:active beibehalten
|
|
Willkommen auf dem Portal für Mediengestalter
