Solved

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

Posted on 2008-11-02
6
971 Views
Last Modified: 2013-12-07
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.
0
Comment
Question by:psarun85
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
6 Comments
 
LVL 8

Expert Comment

by:mkosbie
ID: 22865136
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
 

Author Comment

by:psarun85
ID: 22873943
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
 
LVL 8

Expert Comment

by:mkosbie
ID: 22873969
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
 

Author Comment

by:psarun85
ID: 22884548
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
 

Accepted Solution

by:
ee_auto earned 0 total points
ID: 35763007
Question PAQ'd and stored in the solution database.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Suggested Courses

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question