?
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
Medium Priority
?
998 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
  • 2
  • 2
5 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
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)
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Suggested Courses

616 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