Safari cursor Problem

[stephan]

Guten Abend,

ich bin dabei eine Browserübergreifende Lösung für cursor: grab; und cursor:grabbing; zu programmieren. Diese css Eigenschaft wird per jQuery gesetzt.
Das dient dazu eine horizontal scrollende Webseite mittels "grab and release" zu realisieren.

Folgender Code fügt dieses Verhalten dem zu scrollenden Element #content hinzu:

  
var jobj = jQuery('#content');  
grab_hand( BrowserDetect.browser, jobj, "open");  
  
        jobj.on('mousedown', function(e) {  
            grab_hand( BrowserDetect.browser, jobj, "closed"); // close hand  
            jobj.on('mousemove', function(evt) {  
                jQuery('html,body').stop(false, true).animate({  
                    scrollLeft: e.pageX - evt.clientX  
                });  
            });  
        });  
  
        jobj.on('mouseup', function() {  
            grab_hand( BrowserDetect.browser, jobj, "open"); // open hand  
            jobj.off('mousemove');  
        });

Folgender Code setzt die CSS-Eigenschaften:

  
var grab_hand = function(browser, jobj, stat ){  
    if( stat=="closed" ){  
        switch(browser){  
            case "Firefox": jobj.css('cursor', '-moz-grabbing'); break;  
            case "Explorer": jobj.css('cursor', 'url(closedhand.cur), move'); break;  
            case "Chrome": jobj.css('cursor', '-webkit-grabbing'); break;  
            case "Safari": jobj.css('cursor', 'url(closedhand.cur),); break;  
            default: jobj.css('cursor', 'move'); break;  
        }  
    }  
  
    if( stat=="open" ){  
        switch( browser){  
                case "Firefox": jobj.css('cursor', '-moz-grab'); break;  
                case "Explorer": jobj.css('cursor', 'url(openhand.cur), move'); break;  
                case "Chrome": jobj.css('cursor', '-webkit-grab'); break;  
                case "Safari":   jobj.css('cursor', 'url(openhand.cur), move'); break;  
                default: jobj.css('cursor', 'move'); break;  
        }  
    }  
}

Das funktioniert in allen Browsern wie gewünscht. Bis auf Safari. Safari zeigt mir zwar den geöffnete-Hand-Cursor an, jedoch wird beim drücken der Maustaste nicht der geschlossene-Hand-Cursor übernommen sondern der Text-Cursor angezeigt.

Im Explorer, der exakt die selben Eigenschaften zugewiesen bekommt, funktioniert dies jedoch komischerweise. Auch alle anderen Browser - Chrome, Opera, Firefox - arbeiten wie gewünscht.

Getestet auf Windows
Safari 5.1.7
Chrome 31.0
IE 10
Firefox 25.0.1

Getestet auf Debian
Iceweasel 17.0.10

Erkennt jemand den Fehler? Oder hat jemand eine Lösung parat, wie man dies Verhalten auf Opera realisieren könnte?

lg
Stephan

[stephan]

Korrektur:

case "Safari": jobj.css('cursor', 'url(closedhand.cur), move); break;

müsste es natürlich heißen. Daran liegt's aber nicht.
Entschuldigt bitte.

[JürgenB]

Hallo stephan,

Korrektur:

case "Safari": jobj.css('cursor', 'url(closedhand.cur), move); break;

da fehlt aber immer noch ein '.

Gruß, Jürgen

[stephan]

Hallo Jürgen

da fehlt aber immer noch ein '.

Ja. Das ist mir beim nachträglichen editieren des Codes hier im Forum passiert. Verdammt.
Im Orginalscript passt das.  Darin liegt's aber nicht. Das Script läuft fehlerfrei durch.

Auch wenn ich case "Safari" mit case: "Explorer" vertausche erhalte ich im Safari das selbe Verhalten.

An der Syntax sollte es nicht leigen. Entschuldige bitte die Verwirrung, die ich damit verursache. Dieser Fehler ist mr beim Copy-Paste und nachträglichen editieren unterlaufen.

[stephan]

OMG:

case "Safari": jobj.css('cursor', 'url(closedhand.cur), move'); break;

so. :) Fehler bleibt aber bestehen.

[stephan]

Hab's hinbekommen. Die Lösung war  e.preventDefault(); hinzuzufügen.

Der Code schaut nun so aus:

  
        var jobj = jQuery('#content');  
        grab_hand( BrowserDetect.browser, jobj, "open");  
  
        jobj.on('mousedown', function(e) {  
            e.preventDefault();  
            grab_hand( BrowserDetect.browser, jobj, "closed"); // close hand  
            jobj.on('mousemove', function(evt) {  
                jQuery('html,body').stop(false, true).animate({  
                    scrollLeft: e.pageX - evt.clientX  
                });  
            });  
        });  
  
        jobj.on('mouseup', function(e) {  
            e.preventDefault();  
            grab_hand( BrowserDetect.browser, jobj, "open"); // open hand  
            jobj.off('mousemove');  
        });