Doesnt Work in Firefox

glenelkins · January 29, 2008

Anyone know why this code doesnt work in firefox? The objects are not dragging but it works in internet explorer. I program PHP for a living and im picking up javascript quickly writing this program...its frustrating me with this problem.

<html>
<head>

<script language="javascript">

// *******************
// *** Global vars ***
// *******************
var _dragging = false;
var _e_object;
var _event;
var _node;

var _original_x;
var _original_y;

var _mouse_x;
var _mouse_y;

var _xml = null;

var _boxes = new Array();

// **************
// *** EVENTS ***
// **************

document.onmousedown = MouseDown;
document.onmousemove = MouseMove;
document.onmouseup = MouseUp;

//******************
// *** FUNCTIONS *** 
// *****************

// Program inisialisation function, AJAX and all objects
    function GetStarted() {

    	// Create the XML object based on browser  
    try {
    
    	_xml = new XMLHttpRequest();
    	
    	}
    	catch ( e ) {
    	
    		try {
    		
    			_xml = new ActiveXObject ( "Msxml2.XMLHTTP" );
    			
    			}
    			
    		catch ( e ) {
    			
    			_xml = new ActiveXObject ( "Microsoft.XMLHTTP" );
    				
    		}
    		
    	}
    	

  	    if ( _xml ) {

        _xml.onreadystatechange = function() {
        
    	        if ( _xml.readyState == 4) {
    	        
    	            if ( _xml.status != 200) {
    	            
    	                // error
    	                alert("Error: AJAX Query Failed");
    	                
    	            } else {

    	                //success
    	                var boxes = _xml.responseText; // get the data
    	                
    	                // Creat boxes
    	                create_box_objects ( boxes );


    	            }
    	        }
    	    };
    	    _xml.open('GET', "http://www.gewebdevelopment.co.uk/glenelkins/get_boxes.php?eid=1" );
    	    _xml.send(null); 

    	} else {
        
    	    alert("Error: failed to create XMLHttpRequest object");
    
    	}
    	
    }

// Create page element object
// for initial elements
function box_object ( top, left, width, height, color, id ) {

	this.width = width;
	this.height = height;
	this.color = color;
	this.top = top;
	this.left = left;
	this.id = id;

}

// Function to create the objects on the page
function create_box_objects ( boxes ) {

	// Split the boxes string
	var boxes_array = boxes.split ( ";" );

	// Loop through and create the display
	for ( var c = 0; c <= boxes_array.length; c++ ) {

		// Split the info for each box
		var this_box = boxes_array[c].split ( "-" );

		// Create the tracker objects
		_boxes[c] = new box_object ( this_box[0], this_box[1], this_box[2], this_box[3], this_box[4], this_box[5] );

		// Display box
		document.getElementById ( "container" ).innerHTML += "<div id='" + this_box[5] + "' style='position: absolute; top:" + this_box[0] + "; left:" + this_box[1] + "; width:" + this_box[2] + "; height:" + this_box[3] + "; background:" + this_box[4] + ";'></div>";

	}

}

function MouseDown() {

	// Get the window event
	_event = window.event;

	// Detect which element was clicked
	if ( _event.target ) {

		_node = _event.target;

	} else {

		_node = _event.srcElement;

	}	

	// Check that what we clicked was in fact a DIV element
	if ( _node.nodeName == "DIV" ) {

		// Create element object
		_e_object = document.getElementById ( _node.id );

		// Get original position
		_original_x = _e_object.style.left;
		_original_y = _e_object.style.top;

		// Set the dragging var
		_dragging = true;

	}			

}

function MouseMove() {

	if ( _dragging == true ) {

		// Create the event object ( AGAIN?? )
		_event = window.event;

		// Get the mouse position
		if ( _event.clientX && _event.clientY ) {

			_mouse_x =  _event.clientX;
			_mouse_y = _event.clientY;

		} else {

			_mouse_x = _event.pageX;
			_mouse_y = _event.pageY;

		}

		// We need the width and height of the box
		// to position the mouse in the middle
		var element_width =  remove_px ( _e_object.style.width ) / 2;
		var element_height = remove_px ( _e_object.style.height ) / 2;

		// Change mouse
		_e_object.style.cursor = "hand";

		//Bring to front
		_e_object.style.zIndex = 10000;

		// Position the element to the mouse
		_e_object.style.left = _mouse_x - element_width;
		_e_object.style.top = _mouse_y - element_height;

	}

}

function remove_px ( the_string ) {

	var string_array = the_string.split ( "p" );

	return string_array[0];

}

function MouseUp() {

	// Check which side of the screen the object should be
	if ( _mouse_x >= 0 && _mouse_x <= 400 ) {

		// Left
		_e_object.style.left = 0;

	} else if ( _mouse_x >= 410 ) {

		// Right
		_e_object.style.left = 410;

	} else {

		// ORIGINAL
		_e_object.style.left = _original_x;

	}

	// Set dragging to false
	_dragging = false;


}

function show_debug ( message ) {

	document.getElementById ( "debug" ).innerHTML += "<br>" + message;

}

</script>
</head>
</html>

<body style="margin:0px; padding:0px;" onload="GetStarted();">

<div id="container">
</div>
<div id="debug"></div>

</body>

Sign In

Doesnt Work in Firefox

Recommended Posts

glenelkins

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information