Problem bei einer Zoomfunktion mit function wheel (event)

[Kabal]

Hallo,

ich habe ein Problem, und benötige eure Hilfe.
Ich habe vor ein Karte (Landkarte) auf einer Website einzubauen dies hat auch erstmal ohne jegliche Probleme geklappt, dann bin ich dazu gekommen eine zoomfunktion mit dem mousewheel einzubauen die auch eigentlich funktioniert das Problem darin besteht allerding darin das man nicht nur zoomen kann wenn man auf der Karte steht mit dem mauszeiger sondern egal wo man auf der Seite steht kann man herein bzw. heraus zoomen. Anbei ein kleiner Auszug aus dem Script.

function wheel(event){
   var delta = 0;
   if (!event) event = window.event;
   if (event.wheelDelta) {
    delta = event.wheelDelta/120;
    if (window.opera) delta = -delta;
   } else if (event.detail) {
    delta = -event.detail/3;
   }
   if (delta)
    handle(delta);
  }

/* Initialization code. */
  if (window.addEventListener)
   window.addEventListener('DOMMouseScroll', wheel, false);
  window.onmousewheel = document.onmousewheel = wheel;

Im Voraus schonmal vielen Dank für eure Hilfe.

[Christian S.]

Hi,

... man auf der Karte steht mit dem mauszeiger sondern egal wo man auf der Seite steht kann man herein bzw. heraus zoomen.

window.addEventListener('DOMMouseScroll', wheel, false);
  window.onmousewheel = document.onmousewheel = wheel;

ist doch klar. Du attachst das Event ja auch an das window Objekt. Tu es nur an die Landkarte.

Gruß!

[Kabal]

hi Christian,

vielen Dank für deine Antwort, ich hab es ausprobiert, aber nun leuft die zoomfunktion leider garnicht mehr.

[Kabal]

Hi,

... man auf der Karte steht mit dem mauszeiger sondern egal wo man auf der Seite steht kann man herein bzw. heraus zoomen.

window.addEventListener('DOMMouseScroll', wheel, false);
  window.onmousewheel = document.onmousewheel = wheel;

ist doch klar. Du attachst das Event ja auch an das window Objekt. Tu es nur an die Landkarte.

Gruß!

Hast du vielleicht ein beispiel? Kenne mich in javascript nicht so aus! Das Element also die Landkarte ist ein <div>, kann ich das dann anhand der ID eingrenzen?

So funktioniert es nicht:

function wheel(event){
   var delta = 0;
   if (!event) event = document.getElementById('kartenmodul').event;
   if (event.wheelDelta) {
    delta = event.wheelDelta/120;
    if (window.opera) delta = -delta;
   } else if (event.detail) {
    delta = -event.detail/3;
   }
   if (delta)
    handle(delta);
  }

/* Initialization code. */
  if (window.addEventListener)
   window.addEventListener('DOMMouseScroll', wheel, false);
  window.onmousewheel = document.onmousewheel = wheel;

[Christian S.]

Hi,

function wheel(event){
   var delta = 0;
   if (!event) event = document.getElementById('kartenmodul').event;

Nein, das muss window.event bleiben, für den IE.

/* Initialization code. */
  if (window.addEventListener)
   window.addEventListener('DOMMouseScroll', wheel, false);
  window.onmousewheel = document.onmousewheel = wheel;

So:

var div = document.getElementById('kartenmodul');
if (div.addEventListener)
div.addEventListener('DOMMouseScroll', wheel, false);
div.onmousewheel = document.onmousewheel = wheel;

Gruß!

[Kabal]

Hi,

function wheel(event){
   var delta = 0;
   if (!event) event = document.getElementById('kartenmodul').event;

Nein, das muss window.event bleiben, für den IE.

/* Initialization code. */
  if (window.addEventListener)
   window.addEventListener('DOMMouseScroll', wheel, false);
  window.onmousewheel = document.onmousewheel = wheel;

So:

var div = document.getElementById('kartenmodul');
if (div.addEventListener)
div.addEventListener('DOMMouseScroll', wheel, false);
div.onmousewheel = document.onmousewheel = wheel;

Gruß!

Habe das was du mir geschrieben hast ausprobiert, es Funktioniert leider nicht

function wheel(event){
   var delta = 0;
   if (!event) event = window.event;
   if (event.wheelDelta) {
    delta = event.wheelDelta/120;
    if (window.opera) delta = -delta;
   } else if (event.detail) {
    delta = -event.detail/3;
   }
   if (delta)
    handle(delta);
  }

/* Initialization code. */
  var div = document.getElementById('kartenmodul');
    if (div.addEventListener)
    div.addEventListener('DOMMouseScroll', wheel, false);
    div.onmousewheel = document.onmousewheel = wheel;

evtl. hilft der Link zum Kartenmodul um mir zu helfen ;-) www.dlzg.de/karte2/index2.php

Gruß

[Christian S.]

Hi,

div.addEventListener('DOMMouseScroll', wheel, false);
    div.onmousewheel = document.onmousewheel = wheel;

document.onmousewheel muss da auch noch raus...

Ansonsten liegt der Fehler daran, dass das div noch nicht da ist, da du den Script Code ausführst, BEVOR das DOM fertig geladen ist, bzw. das Element da ist.

schreibe den Code also entweder NACH dem Div Element oder benutze z.b. den load-handler:

window.onload = function()
{

var div = document.getElementById('kartenmodul');
    if (div.addEventListener)
div.addEventListener('DOMMouseScroll', wheel, false);
div.onmousewheel = document.onmousewheel = wheel;
};

Gruß!

[Kabal]

Hi,

habe beide varianten ausprobiert

a) den Code hinter das Div,

b) den loadhandler eingebaut.

Variante a hat dann auch ohne Probleme funktioniert, Variante b leider nicht.

Kannst du mir evtl. sagen warum der loadhandler nicht funktioniert hat? Die Variante B wäre ja schon die schönere Lösung.

Vielen Dank für deine Hilfe

Gruß

Fabian

[Christian S.]

Hi,

Kannst du mir evtl. sagen warum der loadhandler nicht funktioniert hat?

Nein. Müsstest du mal debuggen... schauen ob der überhaupt die Events attached. Vielleicht ist die wheel funktion undefined (kann aber eigentlich nicht sein) oder irgendsowas...

Es muss ja auch irgendein Fehler in der Fehlerkonsole oder im Debugger stehen. Da musst du halt mal weiter schauen.
Hab mein Skript snippet auch nicht getestet. vielleicht ist ein syntax fehler drin oder so.

Die Variante B wäre ja schon die schönere Lösung.

Ja.

Gruß!