Auf Thema antworten 2026

Beitrag

<blockquote data-quote="susiH" data-source="post: 2114316" data-attributes="member: 254055">Hallo,ich habe mal wieder ein Problem bei einer Website. Folgendes habe ich vor. Ich will eine Karte auf einer Website einbauen. Die Karte ist 2000 x 1000px groß. der angezeigte Ausschnitt 700 x 500 px. Nun will ich, dass man mit der Maus in die Karte klickt und sich so der Kartenausschnitt verschieben lässt. Dazu hab ich auch schon ein tolles script mit jquery gefunden, der sogar funktioniert aber einen Haken hat. Die Karte lässt sich nur vertikal verschieben und nicht horizontal. ich habe den code aus dem skript mal hier rein kopiert zur Fehleranalyse <img src="/styles/default/xenforo/smilies/motz.gif"&nbsp; class="smilie" loading="lazy" alt=":motz:" title="Motz&nbsp; &nbsp; :motz:" data-shortname=":motz:" />[PHP](function () {&nbsp; &nbsp; function ScrollView() { this.initialize.apply(this, arguments) }&nbsp; &nbsp; ScrollView.prototype = {&nbsp; &nbsp; &nbsp; &nbsp; initialize: function (container, config) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // setting cursor.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var gecko = navigator.userAgent.indexOf(&quot;Gecko/&quot;) !== -1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var opera = navigator.userAgent.indexOf(&quot;Opera/Mac OS/Mac OS&quot;) !== -1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var mac = navigator.userAgent.indexOf(&quot;Mac OS&quot;) !== -1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (opera) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.grab = &quot;default&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.grabbing = &quot;move&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (!(mac &amp;&amp; gecko) &amp;&amp; config) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (config.grab) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; this.grab = &quot;url(\&quot;&quot; + config.grab + &quot;\&quot;),default&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (config.grabbing) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; this.grabbing = &quot;url(&quot; + config.grabbing + &quot;),move&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (gecko) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.grab = &quot;-moz-grab&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.grabbing = &quot;-moz-grabbing&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.grab = &quot;default&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.grabbing = &quot;move&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Get container and image.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.m = $(container);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.i = this.m.children().css(&quot;cursor&quot;, this.grab);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.isgrabbing = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Set mouse events.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var self = this;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.i.mousedown(function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.startgrab();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.xp = e.pageX;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.yp = e.pageY;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).mousemove(function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!self.isgrabbing) return true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.scrollTo(this.xp - e.pageX, this.yp - e.pageY);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.xp = e.pageX;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.yp = e.pageY;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .mouseout(function(){ self.stopgrab() })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .mouseup(function(){ self.stopgrab() })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .dblclick(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var _m = self.m;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var off = _m.offset();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dx = this.xp - off.left - _m.width() / 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (dx &lt; 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dx = &quot;+=&quot; + dx + &quot;px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dx = &quot;-=&quot; + -dx + &quot;px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dy = this.yp - off.top - _m.height() / 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (dy &lt; 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dy = &quot;+=&quot; + dy + &quot;px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dy = &quot;-=&quot; + -dy + &quot;px&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _m.animate({ scrollLeft:&nbsp; dx, scrollTop: dy },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;normal&quot;, &quot;swing&quot;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.centering();&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; centering: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var _m = this.m;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var w = this.i.width() - _m.width();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var h = this.i.height() - _m.height();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _m.scrollLeft(w / 2).scrollTop(h / 2);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; startgrab: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.isgrabbing = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.i.css(&quot;cursor&quot;, this.grabbing);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; stopgrab: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.isgrabbing = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.i.css(&quot;cursor&quot;, this.grab);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; scrollTo: function(dx, dy){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var _m = this.m;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var x = _m.scrollLeft() + dx;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var y = _m.scrollTop() + dy;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _m.scrollLeft(x).scrollTop(y);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; jQuery.fn.scrollview = function(config){&nbsp; &nbsp; &nbsp; &nbsp; return this.each(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new ScrollView(this, config);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };})(jQuery);[/PHP]Da ich dieser Programmiersprache kaum mächtig bin, finde ich auch keinen Fehler. Danke schon mal an euch im Voraus für eure Mühen...</blockquote>

[QUOTE="susiH, post: 2114316, member: 254055"] Hallo, ich habe mal wieder ein Problem bei einer Website. Folgendes habe ich vor. Ich will eine Karte auf einer Website einbauen. Die Karte ist 2000 x 1000px groß. der angezeigte Ausschnitt 700 x 500 px. Nun will ich, dass man mit der Maus in die Karte klickt und sich so der Kartenausschnitt verschieben lässt. Dazu hab ich auch schon ein tolles script mit jquery gefunden, der sogar funktioniert aber einen Haken hat. Die Karte lässt sich nur vertikal verschieben und nicht horizontal. ich habe den code aus dem skript mal hier rein kopiert zur Fehleranalyse :motz: [PHP](function () { function ScrollView() { this.initialize.apply(this, arguments) } ScrollView.prototype = { initialize: function (container, config) { // setting cursor. var gecko = navigator.userAgent.indexOf("Gecko/") !== -1; var opera = navigator.userAgent.indexOf("Opera/Mac OS/Mac OS") !== -1; var mac = navigator.userAgent.indexOf("Mac OS") !== -1; if (opera) { this.grab = "default"; this.grabbing = "move"; } else if (!(mac && gecko) && config) { if (config.grab) { this.grab = "url(\"" + config.grab + "\"),default"; } if (config.grabbing) { this.grabbing = "url(" + config.grabbing + "),move"; } } else if (gecko) { this.grab = "-moz-grab"; this.grabbing = "-moz-grabbing"; } else { this.grab = "default"; this.grabbing = "move"; } // Get container and image. this.m = $(container); this.i = this.m.children().css("cursor", this.grab); this.isgrabbing = false; // Set mouse events. var self = this; this.i.mousedown(function(e) { self.startgrab(); this.xp = e.pageX; this.yp = e.pageY; return false; }).mousemove(function(e) { if (!self.isgrabbing) return true; self.scrollTo(this.xp - e.pageX, this.yp - e.pageY); this.xp = e.pageX; this.yp = e.pageY; return false; }) .mouseout(function(){ self.stopgrab() }) .mouseup(function(){ self.stopgrab() }) .dblclick(function(){ var _m = self.m; var off = _m.offset(); var dx = this.xp - off.left - _m.width() / 2; if (dx < 0) { dx = "+=" + dx + "px"; } else { dx = "-=" + -dx + "px"; } var dy = this.yp - off.top - _m.height() / 2; if (dy < 0) { dy = "+=" + dy + "px"; } else { dy = "-=" + -dy + "px"; } _m.animate({ scrollLeft: dx, scrollTop: dy }, "normal", "swing"); }); this.centering(); }, centering: function(){ var _m = this.m; var w = this.i.width() - _m.width(); var h = this.i.height() - _m.height(); _m.scrollLeft(w / 2).scrollTop(h / 2); }, startgrab: function(){ this.isgrabbing = true; this.i.css("cursor", this.grabbing); }, stopgrab: function(){ this.isgrabbing = false; this.i.css("cursor", this.grab); }, scrollTo: function(dx, dy){ var _m = this.m; var x = _m.scrollLeft() + dx; var y = _m.scrollTop() + dy; _m.scrollLeft(x).scrollTop(y); } }; jQuery.fn.scrollview = function(config){ return this.each(function(){ new ScrollView(this, config); }); }; })(jQuery); [/PHP] Da ich dieser Programmiersprache kaum mächtig bin, finde ich auch keinen Fehler. Danke schon mal an euch im Voraus für eure Mühen... [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?