Ergebnis 1 bis 6 von 6
  1. #1
    bjoernk ist offline Grünschnabel
    registriert
    14-03-2012
    Beiträge
    4

    [JS,CSS] Kompatibilität FF

    Guten Tag,

    anbei befindet sich ein Skript, das es ermöglichen soll, ein Auswahlrechteck auf das Dokument zu ziehen. Das Skript funktioniert auf MacOS in den Browsern Chrome und Safari, nicht aber einwandfrei im Firefox.

    Hier läßt sich das Rechteck nur einmal fehlerfrei ziehen. Der erste Mouseup-Befehl wird noch umgesetzt. Bei dem Versuch ein zweites Rechteck zu ziehen, kommt es bereits im MouseMove zu Fehlern und der MouseUp wird ignoriert.

    Der Firefox hat offenbar Schwierigkeiten mit dem Blockelement "protector", da die Darstellung fehlerfrei läuft, wenn der MouseDown-Befehl im Body-Element notiert ist und das "protector"-Element fehlt. Auf dieses möchte ich jedoch nicht verzichten, weil es verhindern soll, dass darunter liegende Bilder beim Ziehen mit der Maus markiert oder verschoben werden.

    Hier das Skript (angelehnt an Drag&Drop von http://www.quaese.de):
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    html,body {
    	margin:0;
    	height:100%;
    	width:100%;
    	}
    </style>
    <script type="text/javascript">
    
    var objMask = null;		// Maskierungsrechteck vormerken
    
    var mouseX   = 0;       // X-Koordinate der Maus
    var mouseY   = 0;       // Y-Koordinate der Maus
    
    var posLeft = 0;		// X-Startkoordinate
    var posTop = 0;			// Y-Startkoordinate
    
    var tempWidth = 0; 		// aktuelle Auswahlbreite
    var tempHeight = 0; 	// aktuelle Auswahlhöhe
    
    // Browserweiche
    IE = document.all&&!window.opera;
    DOM = document.getElementById&&!IE;
    
    // Initialisierungs-Funktion
    function init(){
    	// Initialisierung der Überwachung der Events
    	document.onmousemove = select;  // Bei Mausbewegung die Fkt. select aufrufen
    	document.onmouseup = stop;  	// Bei Loslassen der Maustaste die Fkt. stop aufrufen
    	}
    
    // Wird aufgerufen, wenn die Maus über der Protectorbox gedrückt wird
    function start(objElem) {
    	// Objekt der globalen Variabel zuweisen -> hierdurch wird Bewegung möglich
    	objMask = objElem;
    
    	// Neue Startposition merken
    	posLeft = mouseX;
    	posTop = mouseY;
    	
    	// Falls schonmal das Objekt erstellt wurde
    	objMask.style.width = '0px';
    	objMask.style.height = '0px';
    	
    	objMask.style.left = mouseX + "px";
    	objMask.style.top = mouseY + "px";
    	}
    
    // Wird ausgeführt, wenn die Maus bewegt wird
    function select(ereignis) {
    	// Aktuelle Mauskoordinaten bei Mausbewegung ermitteln
    	mouseX = (IE) ? window.event.clientX : ereignis.pageX;
    	mouseY = (IE) ? window.event.clientY : ereignis.pageY;
    
    	// Neue Größe ermitteln
    	tempWidth = mouseX - posLeft;
    	tempHeight = mouseY - posTop;
    	
    	// Wurde die Maus über einem Element gedrückt, erfolgt eine Bewegung
    	if (objMask != null) {	
    		// Element neue Größe zuweisen
    		objMask.style.width = tempWidth + "px";
    		objMask.style.height = tempHeight + "px";
    		}
    	}
    
    // Wird ausgeführt, wenn die Maustaste losgelassen wird
    function stop() {
    	// Objekt löschen -> beim Bewegen der Maus wird die Maske nicht weiter verändert
    	objMask = null;
    	}
    </script>
    </head>
    
    <body onload="init()">
    
    <!-- <img src="" id="bild"> Hier würde ein Bild stehen, auf welchem später eine Auswahl getroffen wird. -->
    
    <div id="maske" style="position:absolute; border:1px dotted #f00"></div>
    <div id="protector" style="position:fixed; top:0; left:0; height:100%; width:100%" onmousedown="start(document.getElementById('maske'))"></div>
    </body>
    </html>
    Für Hinweise, wie man dieses Skript Firefox-kompatibel gestalten kann, wäre ich sehr dankbar.

    Viele Grüße
    Björn

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

  3. #3
    bjoernk ist offline Grünschnabel
    registriert
    14-03-2012
    Beiträge
    4

    AW: [JS,CSS] Kompatibilität FF

    Vielen Dank für den Link. Leider bin ich auch nach aufmerksamem Lesen noch nicht zu einer Lösung meines Problems gekommen. Falls die Lösung auf der Hand liegt, bitte ich um einen beherzten Hieb mit einem Zaunpfahl.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.702

    AW: [JS,CSS] Kompatibilität FF

    Du hast das return false; vergessen...

  5. #5
    bjoernk ist offline Grünschnabel
    registriert
    14-03-2012
    Beiträge
    4

    Thumbs up AW: [JS,CSS] Kompatibilität FF

    Ich muss zugeben, dass mir nicht ganz klar ist, welche Default-Action ich damit unterbunden habe, aber das Skript funktioniert nun einwandfrei. Daher herzlichen Dank an Euch beide!

  6. #6
    bjoernk ist offline Grünschnabel
    registriert
    14-03-2012
    Beiträge
    4

    Lightbulb AW: [JS,CSS] Kompatibilität FF

    Der Vollständigkeit dieses Threads halber hier die Erklärung zu meiner offen gelassenen Frage:
    http://www.codingforums.com/showthread.php?t=214574

Ähnliche Themen

  1. Kompatibilität Mootools v1.11 und 1.2.4
    Von jsBernd im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 04-06-2010, 11:16
  2. Browser IE6 Kompatibilität
    Von kayamoto im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 27-01-2009, 13:00
  3. [JS/PHP] - PHP kompatibilität
    Von ancient.shadow im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 07-11-2005, 20:44
  4. Browser und Kompatibilität
    Von safix im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 16-09-2003, 04:49
  5. php, php3 und php4 kompatibilität
    Von Stefan_AFK im Forum Serverseitige Programmierung
    Antworten: 1
    Letzter Beitrag: 20-03-2001, 23:57

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •