mark a rectangle

L

Lammi

hi,

i need to mark an area in a div. the idea is, that a user clicks a
startpoint, moves the mouse to an endpoint and in the div a matching
rectangle will be colored while he moves the mouse. that's not so
difficult.
once the user has marked an area in the div, this area should be
"restricted". if the user tries to mark that area again or a new
rectangle laps over the existing, an error should be thrown or better,
the new rectangle should end and the border of the old one. i need
some hints how to realize that. does anybody know a similar example
script?

thanx in advance
 
L

Lammi

Lammi said the following on 9/6/2007 2:54 AM:




Wait 30 minutes after you post, then re-post every 30 minutes. It won't
get you an answer but it will annoy the hell out of people.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

maybe it makes me feel better...


instead of the original message i see a note that the messge was
deleted. if you see the original and the reposted message, accept my
deepest apologies. maybe i'll appease you if i'll jump of the roof?
 
S

Stevo

Lammi said:
i need to mark an area in a div. the idea is, that a user clicks a
startpoint, moves the mouse to an endpoint and in the div a matching
rectangle will be colored while he moves the mouse. that's not so
difficult.
once the user has marked an area in the div, this area should be
"restricted". if the user tries to mark that area again or a new
rectangle laps over the existing, an error should be thrown or better,
the new rectangle should end and the border of the old one. i need
some hints how to realize that. does anybody know a similar example
script?

Drawing a rectangle from one mouse position to another shouldn't be too
difficult. You could create 4 DIV's with a background color, each being
one pixel in "thickness" (top-line, bottom-line, left-line and
right-line). So if the mouse positions are 10,10 (start) and 100,100
(end), then you'd have a top-line div from 10,10 to 100,11. Then a right
-line from 99,10 to 100,100 and so on. There's no question of whether
this would work. What might also work and be easier (if it works) is
some fancy use of CSS that can make a single transparent DIV with a
colored one pixel thick border. I don't know CSS well enough to know if
that is possible.

As for making it restricted, you can register as a listener to the mouse
click events and easily determine if it's being clicked within your
restricted rectangle(s). If it is, you can either silently cancel the
mouse event and/or alert your "restricted" error. If you do a web search
for these terms below then you'll find some example code:

cancelbubble preventdefault stoppropagation returnvalue
 
G

Gregor Kofler

Stevo meinte:
Drawing a rectangle from one mouse position to another shouldn't be too
difficult. You could create 4 DIV's with a background color, each being
one pixel in "thickness" (top-line, bottom-line, left-line and
right-line). So if the mouse positions are 10,10 (start) and 100,100
(end), then you'd have a top-line div from 10,10 to 100,11. Then a right
-line from 99,10 to 100,100 and so on. There's no question of whether
this would work.

Way too complicated. Because...
What might also work and be easier (if it works) is
some fancy use of CSS that can make a single transparent DIV with a
colored one pixel thick border. I don't know CSS well enough to know if
that is possible.

border: solid 1px;

That's all (background's transparent by default).
As for making it restricted, you can register as a listener to the mouse
click events and easily determine if it's being clicked within your
restricted rectangle(s). If it is, you can either silently cancel the
mouse event and/or alert your "restricted" error. If you do a web search
for these terms below then you'll find some example code:
cancelbubble preventdefault stoppropagation returnvalue

Why? He has the code for his rubberband already (or so it seems - he
said something about "not difficult"). To add some checks to these
routines should be a cinch (but then I don't get it, why the OP asked at
all).

Gregor
 
S

Stevo

Gregor said:
border: solid 1px;
That's all (background's transparent by default).

I figured it would be possible with "fancy" CSS ;-)

I think he can probably also get a dotted line or marching ants border
too. I don't ever mess with CSS though, all my DIV's have zero chrome.
 
G

Gregor Kofler

Stevo meinte:
I figured it would be possible with "fancy" CSS ;-)

Erm... replacing a border with 4 DIVs (how to position them without CSS)?
I think he can probably also get a dotted line or marching ants border
too. I don't ever mess with CSS though, all my DIV's have zero chrome.

Dotted - yes. Marching ants... no. At least not without JS.

Gregor
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top