?
Solved

Drag drop and resize?

Posted on 2002-06-19
6
Medium Priority
?
1,001 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
[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
  • 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 300 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…
Suggested Courses

762 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