jQuery event wie EnterFrame (AS3)

SantaCruz18 · 28.12.2009

Hallo

Ich bastel grad an einer Website und wollte ein Content-Bereich erstellen, der sich mit jquery und der Mausposition scrollen lässt.
So schön so gut... bisher funktioniert auch alles, ausser dass durch das bisher verwendete event mousemove, meine animation nur funktioniert wenn ich dir Maus auch bewege == doof oO
Gibts nen Event dass so funktioniert wie EnterFrame bei AS3 (also dass er die Funktion IMMER wieder ausführt, solange die Maus im Objekt ist) oder wenn nicht kann mir jemand einen guten Rat geben, wie ich das bewerkstelligen kann.
Wenns funktioniert würde ich auch dankend den Code veröffentlichen und vllt nen kleines Tutorial schreiben, find ich nämlich nen fetten Effekt und hab ihn so noch nicht in jQuery gesehen...

Danke

Gruß Santa

saila · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

Du musst zuvor eine DIV-Box als Selector nehmen. Dann ist dieser Mouse-Event nur innerhalb dieser Box.

Beispiel:

Code:

$('#boxName').mouseover(function() {
//.. was soll passieren
});

SantaCruz18 · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

@saila: Das Problem ist, dass dann das Event trotzdem nur einmal auslöst, für die gedachte Animation, muss sie aber ständig ausgeführt werden.
Trotzdem Danke

Noch wer eine Idee?
Edit: So hab das Ganze mal hochgeladen, damit man es sch acuh angucken kann...
Ihr seht, solange die Maus bewegt wird, kein Problem

Gruß Santa

MrManko · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

Damit eine Aktion immer wieder ausgeführt wird benutzt man ja in der Regel Schleifen, wenn du immer die Höhe des Divs kennst könntest du in einer Schleife immer wieder die Aktion auslösen, damit der Inhalt nach unten scrollt.

Hier etwas zum Thema, wie man die Höhe eines div-containers ausliest:
layerhöhe per javascript auslesen - mediengestalter.info

Hoffentlich konnte ich dir damit in Richtung Lösung helfen ^^

MfG
MrManko

cebito · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

Du benutzt "mousemove" für deinen Event, klar, das nur was passiert, wenn die Maus bewegt wird. Du musst "mouseover" benutzen und das ganze entweder in einer Schleife (mit Pause sonst läufts zu schnell) oder über setTimeout(function) machen.

SantaCruz18 · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

Ahh das klingt doch schon mal vielversprechend

Das mousemove nicht passt, wusste ich ja auch

Sonst hätte ich hier nicht fragen müssen.
Ich werd mal sehen ob ichs hinkrieg und dann meld ich mich nochmal.
Vielen Danke nochmal.

Gruß Santa

SantaCruz18 · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

$('.sidebar').mouseover(

function s_scroll() {

if (scrollY > 0 && top_value > s_limit) {alert ("hallo"); top_value = top_value - scrollY;}
else if (scrollY < 0 && top_value < 0) {top_value = top_value - scrollY;}
$('.sidebar_content').stop().animate({top: top_value}, { queue:false, duration:100});
t=setTimeout("s_scroll()",200);

});

$('.sidebar').mouseout(function(e) {clearTimeout(t);});

So hier mal der Hauptcode... entweder blick ich einfach nicht durch oder ka^^
Also auf jeden Fall funktioniert es nicht. Er ignoriert die IF-Abfrage... das Alert ("Hallo") wird nicht aufgerufen...
Hab ich mit dem Timeout was falsch gemacht oder so?
Vielen Dank

Gruß Santa

saila · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

Also doch mouseover

Aber mal ab davon. Dein Scrollbalken hat dieser zwei Punkte (Pfeil nach oben und Pfeil nach unten)? Wenn ja, kannst du diese zwei Punkte als Selectoren verwenden und wenn z.B.:

Code:

$(function() {
 if($('#pfeilTop').mouseover()) {
 // hier nun scoll nach oben
 } elseif($('#pfeilBottom').mouseover() {
 // hier scoll nach unten
 }
});

So würde ich das mal angehen. Und dann gibt es noch bei jQuery die Funktion scrollTo usw..

SantaCruz18 · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

Ja mouseover hab ich jetzt eingeführt

Problem ist ich hab keine Buttons

Das Scrollen soll nur per Maus gesteuert werden.

Das sind meine Variablen

var s_top = parseInt($('.sidebar').offset().top);
var s_bottom = parseInt($('.sidebar').height() + s_top);
var s_center = parseInt($('.sidebar').height() / 2);
var m_pos = e.pageY - s_top;
var geschw = 0.05;
var scrollY = (geschw * ( m_pos - s_center ));
var mheight = 600;
var s_limit = parseInt($('.sidebar').height() - mheight);
var t;

Ich ermittel die Vertikale Mitte des Containers und mach davon abhängig, ob nach oben oder nac unten gescrollt wird.
Das von cebito klang schonmal gut, nur komme ich nicht weiter...
*schrei* wieso gibt es kein ENTER_FRAME event */schrei*

Gruß Santa

SantaCruz18 · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

Könnte es vllt so in der Art gehen? Ps.: Genau so funktionierts auch noch nciht

Aber vllt als Ansatz...

var t = setInterval("s_scroll()",300);

$('.sidebar').mouseover(

function s_scroll() {
if (scrollY > 0 && top_value > s_limit) {alert ("hallo"); top_value = top_value - scrollY;}
else if (scrollY < 0 && top_value < 0) {top_value = top_value - scrollY;}
else {clearInterval(t)}
$('.sidebar_content').stop().animate({top: top_value}, { queue:false, duration:100});
});

$('.sidebar').mouseout(function(e) {clearInterval(t)});

saila · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

Was ist den letztlich zu scollen? Eine Liste oder Boxen?

Was ist das Endergebnis des ganzen in einem Begriff (Newsticker, Newsbox)?

SantaCruz18 · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

Also in der Box sollen später Vorschaubilder zu Videos und Fotos erscheinen die zu den Videos/Fotos verlinkt sind. Aufgebaut ist es Als ContainerDiv und darin enthalten ein ContentDiv, der natürlich höher als der Container ist. Es soll abhängig von der Mausposition (je weiter von der Mitte entfernt so schneller) scrollen.
Runter und halt auch wieder hoch.
Über das event mousemove funktionierte das Ganze auch solange man die Maus bewegte, da er dann immer die if-schleife aufrief, die das ganze regelt.
Die Roten Kästen stellen die Vorschaubilder da... 5 Stück untereinander, 3 sichtbar. Das weiße ist der Container...
Ich hoffe das klärt etwas auf... Nachempfunden ist es einem Vertical Scrolling Menu aus Flash... das Funktioniert mit dem EnterFrame-Event, da das die Funktion ja dauernd aufgerufen hat, so lange man in dem Frame war.

sokie · 28.12.2009

AW: jQuery event wie EnterFrame (AS3)

Da es bei Javascript ja keine zeitleiste gibt, und das ganze sich nicht wie in Flash mit einer bestimmten abspielrate wiederholt, gibt es so etwas natürlich nicht.(enterFrame)
es gibt aber methoden wie setInterval() und setTimeout().
so kann man zB eine funktion mit einer festgelegten Frequenz wiederholen, und so ersatzweise animieren. zB:

Code:

var meinInterval = setInterval("meinScroll()",25);

würde eine funtion "meinScroll()" alle 25millisekunden wiederholt ausführen (was einer Abspielrate von 40fpm entspräche).
abhängig von einem Wert der innerhalb der Funktion meinScroll() erreicht wird, könnte man die Animation per clearInterval(meinInterval) beenden,

Code:

function meinScroll(){
  ...;
  if (scrollZiel == "erreicht" || mouseoutErkannt()){
     clearInterval(meinInterval);
   }
}

setInterval und clearInterval sindMethoden des globalen window Objekts.

SantaCruz18 · 29.12.2009

AW: jQuery event wie EnterFrame (AS3)

Also jetzt funzt das mit dem Interval soweit... aber er übergibt die epageY Variable nicht mehr... Kannn mir jemand den Grund nennen? Ich komm nicht weiter....

$('.sidebar').hover(function(){

var interval = setInterval(function(e){

i++;
var mheight = 600;
var s_limit = parseInt($('.sidebar').height() - mheight);
var geschw = 0.05;
var m_pos = e.pageY - s_top;
var s_top = parseInt($('.sidebar').offset().top);
var s_center = parseInt($('.sidebar').height() / 2);

var scrollY = Math.round(geschw * ( m_pos - s_center ));

$('#debugging_status').html("Top : " + top_value + " | scrollY " + m_pos + " | Anzahl Schleife " + i);

if (scrollY > 0 && top_value > s_limit) {top_value = top_value - scrollY;}
else if (scrollY < 0 && top_value < 0) {top_value = top_value - scrollY;}

$('.sidebar_content').stop().animate({top: top_value}, { queue:false, duration:200});

if (int_end==1){clearInterval(interval); int_end=0;}

}, 100);
}, function(){int_end=1;});
});

Vielen Dank schonmal...

Gruß Santa

SantaCruz18 · 29.12.2009

AW: jQuery event wie EnterFrame (AS3)

Damn

Einfacher Fehler von mir...

var m_pos = e.pageY - s_top;
var s_top = parseInt($('.sidebar').offset().top);

Woher sollte die m_pos s_top kennen...
Jetzt funktioniert alles so wie ich will...
Danke nochmal an alle vor allem an sokie

Gruß Santa

Ps.: Ich werd mal ne Tutorial machen... Also ich hoffe mal der Effekt gefällt.