Solved

Drag drop and resize?

Posted on 2002-06-19
6
987 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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now