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