Solved

Drag drop and resize?

Posted on 2002-06-19
6
989 Views
Last Modified: 2008-03-03
Hi, Can any of you supply me with some code of resizing a DIV tag and drag and drop on the screen.
Thanks. It is ok if it works just for IE?
0
Comment
Question by:nesifa
  • 3
  • 2
6 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 7093797
Take a look at "Windowscript" here:

http://www.dhtmlcentral.com/script/?m=14

Batalf
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 100 total points
ID: 7094035
This might be a start on what you want.  Let me .  

Cd&


<HTML>
<!-- text in a scrollable box
-->
<title> Archive notes </title>
<STYLE>
   .scrollBOX {height:150px;width:450px; border: 2x inset black;
               border-bottom: 1px solid silver;
               border-right: 2px inset silver; overflow:auto}
</STYLE>
<SCRIPT language="JavaScript">
<!--
   var dragon=false;
   var fat=false;
   var tall=false;

   function dragEvnt()
   {
      if (dragon)
      {
         var WIN=window.event;
         var EL=document.all["hottab"].style;
         EL.top=WIN.y-15;
         EL.left=WIN.x-15;
      }
   }
 
   function doWidth(EL)
   {
      EL.value=(fat) ? "wider" : "narrower";
      document.all["scroller"].style.width=(fat) ? 450 : 600;
      fat=(fat) ? false : true;
   }

   function doHeight(EL)
   {
      EL.value=(tall) ? "taller" : "shorter";
      document.all["scroller"].style.height=(tall) ? 150 : 350;
      tall=(tall) ? false : true;
   }
//-->
</script>
</HEAD>
<BODY onLoad="document.body.scrollTop=25000" onMouseMove="dragEvnt()">
<div id="hottab" STYLE="position:absolute;left:40;top:200">
<table border=0 width=450 cellspacing=0 cellpadding=0>
<tr height=25>
<td width=200 style="background-color:teal;color:white"
          align="center" valign="middle"
          onMouseDown="dragon=true"
          onMouseUp="dragon=false">
### drag bar ###
</TD>
<td width=125 align="center"><input type="button" value="wider"
       name="fatbutton" onClick="doWidth(this)"></td>
<td width=125 align="center"><input type="button" value="taller"
       name="tallbutton" onClick="doHeight(this)"></td>
</TR></table>
<DIV class="scrollBOX" id="scroller">  
This is a box full of text. The box can be positioned anywhere on the
page. The size can be set to any width and height, and with the addition  
of a small JavaScript control it could be dynamically sized by  the user.  
It can also be made dragable so the user could move it up to the top to the  
page if they wanted to, also with a little script.    
<BR><BR>
Now the bad news it is strictly IE5 only.  It may be possible with a lot
of scripting to get it to look like this in Netscrap, but I doubt it. The  
add on features can definitely not be done in Netscape.  Might be possible
in Netscape 6 with scripting changes to use DOM1 instead of the all collection.
There is total control of the fonts borders backgrounds etc using the style
sheet.
<br /><br />
<font color="red"> Let me know if this helps, and we can set it up the
way you need it.  If you need to have it cross-browser --- SORRY!
</font>
<BR><BR>
Cd&
</DIV>
</div>
</BODY>
</HTML>

0
 

Author Comment

by:nesifa
ID: 7096556
That works for drag drop. Can you do resizing too. It is ok just for Just the way you resize a web window and the same shapes of cursors.

Thanks
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 32

Expert Comment

by:Batalf
ID: 7096568
The code at

http://www.dhtmlcentral.com/script/?m=14

has both resizing and drag and drop. Source code and everything is available at this link.
0
 

Author Comment

by:nesifa
ID: 7104131
Hello,
Can you give me just a simple resize code. As cursor is over the border, resizing will take place the way we see everywhere in IE windows.

I care just for IE.

Thanks again.

Nesifa
0
 
LVL 32

Expert Comment

by:Batalf
ID: 7104156
Instead of posting a lot of code here, it's easier if you go to:

http://www.dhtmlcentral.com/script/script.asp?id=16

And copy the code from the text-area fields.

Do like this:

Create a new HTML-document.
Copy the content of the first textarea fields in between your <head> and </head> tag.
Copy the content of the next textarea field in between your <body> and </body> tag.

Batalf
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

776 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