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
955 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
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

809 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