Slide-Effekt für DivBox?

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo,

habe mich etwas mit AJAX befasst und einige interessante Ideen bekommen. Dabei treten aber auch meist Probleme auf. Ich möchte z.B., dass eine DIV-Box wenn ma mit der Maus drüber fährt relativ langsam von punkt A nach B „slided“.

Bisher stehe ich vor dem Problem, das ich den LSide nicht hinbekomme. Das die Box von a nach B durch onmouseover springt ist kein Problem. Aber eben nur OHNE Slide. ich habe schon Versuche mit setInterval() gemacht, die kläglich misslangen.

 window.onload = init; 

 function init() {
 document.getElementById("Sidebar").onclick = function sidebar(){
 this.style.left = "-10px"; 
 }

 document.getElementById("Sidebar").ondblclick = function sidebar(){
 this.style.left = "-130px"; 
 }
 }

Kann mir jemand weiterhelfen?
Danke

#2

Hallo auch.
Ich muß ehrlich sagen, mit Deinem Artikel habe ich etwas Probleme.
Was hat „Ajax“ mit Deinem Script zu tun, und was hat Dein Script mit „onmouseover zu tun“? Was ist hier „Ajax“?
Wenn ich eine Funktion im Zusammenhang mit mouseover starten will, sieht das übrigens so aus:
mein Html

Wenn Du einen Timer für Bewegungen benötigst, dann kann ich mich schwach erinnern, benötigst Du ein Timer Objekt,. welches Du erst erzeugen mußt. Es gibt auch noch eine andere Methode, welche aber nur einen einzigen Timer erzeugen kann.

Mein Tip:
Hol Dir zuerst eine komplette Dokumentation über html und JavaScript , bzw. VBScript.
Diene notwendigen Experimente und Erfahrungen kann Dir hier keiner ersetzen, indem man es Dir lauwarm verklickert.
Wenn sonst keiner antwortet, kann ich später mal nachschauen, wie ich das selber mal gemacht habe.
Ach ja, wenn es denn mal besser klappt, kannst Du mal mehrere wichtige Browser testen. Was nämlich bei a klappt, muß nicht bei b klappen.
MfG
Matthias

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#3

Also, es hat insofern was Mit AJAX zu tun, als das dieses Script nur ein Teil der Sache ist und alles Weitere über CSS und HTML sowie XML läuft. Ich denke du weisst was AJAX ist, weisst also nun auch was es damit zu tun hat.

Deine Aussage mit dem

kann ich nicht teilen, auch wenn das eine sicher funktionierende Lösung ist, doch finde ich diese etwas umständlich, denn ich müsste bei eventuellen Änderungen jedesmal die ganzen Seiten, in welchen diese Script eingebunden ist ändern, wenn ich also z.B. auf >>onclick>onmouseoverdocument.getElementByID(„Sidebar“).onmouseover = function sidebar() {
>>tuewasnutze um eben alles zentral in einem Script zu verwalten und nicht eine Sache in vielen HTML-Seiten.

Wie du erkennen kannst funktioniert das auch ganz gut. Wie gesagt, bis dahin läuft das Sctipt auch. Auch die Verschiebung klappt, oder besser der Sprung. Nur eben nicht als Slide.

btw. Es hat niemand ein fertiges Script verlangt sondern lediglich iene Hilfestellung, damit ich aud den richtigen Riecher komme. in AS, welches nah an JS angelehnt ist löst man solche Dinge mit Intervallen. Darum auch mein Versuch damit.

Trotzdem Danke für die Antwort!!!

#4

Hallo Michael.
Erstmal vielen Dank für die Erläuterungen. Aber ich weiß leider immer noch nicht was ajax ist. Es scheint sich um script zu handeln?
Wie dem auch sei, bei JavaScript kannst es so machen, und zwar habe ich ein Bild wandern und verkleinern lassen:

//es ist ein Timerobject notwendig; ins script schreibe ich:
var TimerId; //=beliebige Variable, welche den erzeugten Timer
//bezeichnet
//Ein Timer wird wie folgt erzeugt:
TimerId = window.setInterval(„auszulösendeFunktion()“,5);
// 5 ist der Intervall in millisekunden, die Funktion wird nun
//ständig aufgerufen
//Der Timer wird wieder gelöscht mit:
window.clearInterval(TimerId);
//andernfalls hört der Timer nicht auf. Auf Groß und Kleinschreibung
//achten.
//alles andere muß mit Funktionen und so weiter gemacht werden, damit
//es auch „slided“ bzw. die Parameter wie gewünscht geändert werden.
//Man kann so auch mehrere Timer erzeugen, wenn man die Id’s alle
//abspeichert, damit man sie auch wieder löschen kann.
//Ein Timer active-x control ist nicht notwendig.

MfG
Matthias

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#5

Genau das hatte ich versucht. Doch das Interval wurde nicht vollständig ausgelöst, weil es immer nur dann aktiviert wurde, wenn ich mit der;ouse drüber war. Logischwerweise muss ich das Interval ausserhalb meiner Funtkion initialisieren.

Doch dann kommt das Problem. Wie fange ich das Event ab und löse das Interval aus? wenn ich zb.:

 element = document.getElementById("Sidebar");
 element.onmouseover = function sidebar() {
 interval = window.setInterval(moving, 5000); 
 }

 function moving() {
 element.style.left += 10;

 if (element.style.left \> 130) {
 window.clearInterval(interval); 
 }
 }

nutze funktioniert es nicht.

#6

Hallo
Tja, dann must Du eben debuggen. Mir fällt auf, „+=“ finde ich in meiner Dokumentation überhaupt nicht.
Probier doch mal „element.style.left = element.style.left + 5“.
Außerdem würde ich die Funktion in Anführungszeichen und mit Klammern am Ende angeben, Ich weiß aber nicht, ob es Ursächlich ist.

Allgemein zum Debuggen:
Wenn Du den Fehler einkreisen möchtest, dann teilst Du den Code einfach auf, beispielsweise mit:

  1. Klickbutton auf die Seite und Timer auslösen, Ergebnis prüfen. Timer wieder löschen.
  2. Onmouseover testen, funktioniert onmouseover überhaupt?

Onmouseover ist mir etwas unklar was die Anzahl der Auslösungen betrifft, und dann gibt es noch onmouseout und ähnliche, welche bei den verschiedenen Browsern etwas unterschiedlich interpretiert werden.
Jetzt müsstest Du selbst den Fehler finden können, ist leider zunächst etwas abeitsintensiv. Auf alle Fälle keinen neuen Timer erzeugen, wenn noch ein zugeordneter Timer da ist, eventuell vorher speichern und nachher abfragen, ob der erste Timer schon fertig ist.
Getestet wird natürlich mit einer Seite, die ansonsten fehlerfrei ist usw.
MfG
Matthias

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]