Solved

select a region

Posted on 2004-04-30
3
252 Views
Last Modified: 2008-02-01
helllo is it possible with javascript to select a region
I want somthing like the multiple select area for the icons on the windows desktop

Is that possible?

Thanks,
ferry
0
Comment
Question by:ferryl
[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
  • 2
3 Comments
 
LVL 12

Accepted Solution

by:
lil_puffball earned 125 total points
ID: 10964347
Something like this maybe:

<script>
document.
onmousedown=startSelect;
document.onmouseup=endSelect;
document.onmousemove=captureMouse;
document.onclick=deleteSelect;

var select=document.createElement("div"),x,y,sX,sY,drag=false;
select.style.position="absolute";
select.style.borderWidth=1;
select.style.borderColor="316ac5";
select.style.borderStyle="solid";
select.style.backgroundColor=select.style.borderColor;
select.style.filter="alpha(opacity=50)";

function deleteSelect(){if(select.parentNode)select.parentNode.removeChild(select);}
function startSelect(){
  select.style.top=y;select.style.left=x;
  sX=x;sY=y;
  select.style.height=0;select.style.width=0;
  document.body.appendChild(select);
  drag=true;
}
function dragSelect(){
  select.style.width=Math.abs(x-sX);
  if(x>sX){
select.style.left=sX;}
  else{select.style.left=x;}
  select.style.height=Math.abs(y-sY);
  if(y>sY){
select.style.top=sY;}
  else{select.style.top=y;}
}
function endSelect(){
  drag=false;
}

function captureMouse(e){
  if(document.all){
    x=window.event.x+document.body.scrollLeft;
    y=window.event.y+document.body.scrollTop;
  }else if(document.getElementById||document.layers){
    x=e.pageX;
    y=e.pageY;
  }
  if(drag){dragSelect();}
}
</script>

<style>
.icon{height:50;width:50;border-width:1;border-color:black;border-style:solid;}
</style>

<div class=icon>Icon 1</div>
<br>
<div class=icon>Icon 2</div>
<br>
<div class=icon>Icon 3</div>
<br>
<div class=icon>Icon 4</div>
0
 
LVL 1

Author Comment

by:ferryl
ID: 10973552
thanks a lot!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10973557
No problem. :) Thanks for the points and the A!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

688 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