asked on

onDrag() function in javascript is not working in firefox. what is the alternative function we can use for.

i have used onDrag() function in javacript to resize the iframe in html.

please find the same in following url.
http://www.sreesaas.com/Orderform.html

its was working perfectly in IE and firefox. reason is onDrag() is not supported by firefox. please tell me the alternative method in firefox for using handle drag event.

mkosbie

You would have to implement an equivalent ondrag event using a combination of the mousedown and mouseup events. This code can do it. Any element of class resizable is resizable.

<html>
<head>
<script type="text/javascript">
<!--
window.onload = function() {
	var all = document.getElementsByTagName("*");
	for(i=0; i<all.length; i++){
		if(all[i].className == "resizable") {
			all[i].onmousedown = function(e) { startDrag(e); return false; };
		}
	}
}
 
var dragElement = null;
window.onmouseup = endDrag;
 
function startDrag(e) {
	if(!e) e = window.event;
	var el = (e.target) ? e.target : e.srcElement;
	
	el.startX = e.clientX;
	el.startY = e.clientY;
	
	dragElement = el;
}
 
function endDrag(e) {
	if(!dragElement) return;
	var el = dragElement;
	
	if(!el.style.width) el.style.width = el.clientWidth;
	var w = el.style.width.substring(0,el.style.width.length-2);
	el.style.width = w - (el.startX - e.clientX);
	
	if(!el.style.height) el.style.height = el.clientHeight;
	var h = el.style.height.substring(0,el.style.height.length-2)
	el.style.height = h - (el.startY - e.clientY);
	
	dragElement = null;
}
//-->
</script>
</head>
<body>
<img src="open.jpg" class="resizable">
<div style="width: 300px; height: 300px; border-style: solid; border-color: rgb(0,0,0); border-width: 1px;" class="resizable"></div>
</body>
</html>

Open in new window

psarun85

ASKER

when i copied this. and i try to implement , but even in the internet exlorer it was not working

may i know the problem in the code please.

mkosbie

Did you try the test page I posted? Copy what I posted into a blank HTML file and save it. See if it meets your requirements. If so, post your implementation and I'll try to debug.

psarun85

ASKER

hi

sorry for the delay
here is the link

http://www.searchmore.in/testDrag.html

i have copied your source code in html page. and added iframe inside the div tag. it was working in firefox, that too we can expand and unable to reduce the size. and even increasing the size was not working in internet explorer.

kindly tell me solution for this

ASKER CERTIFIED SOLUTION

ee_auto

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial