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.
psarun85Asked:
Who is Participating?
 
ee_autoConnect With a Mentor Commented:
Question PAQ'd and stored in the solution database.
0
 
mkosbieCommented:
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

0
 
psarun85Author Commented:
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.
0
 
mkosbieCommented:
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.
0
 
psarun85Author Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.