mark a rectangle

Discussion in 'Javascript' started by Lammi, Sep 6, 2007.

  1. Lammi

    Lammi Guest

    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
     
    Lammi, Sep 6, 2007
    #1
    1. Advertising

  2. Lammi

    Lammi Guest

    On 6 Sep., 09:39, Randy Webb <> wrote:
    > Lammi said the following on 9/6/2007 2:54 AM:
    >
    > > 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

    >
    > 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?
     
    Lammi, Sep 6, 2007
    #2
    1. Advertising

  3. Lammi

    Stevo Guest

    Lammi wrote:
    > 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
     
    Stevo, Sep 6, 2007
    #3
  4. 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


    --
    http://www.licht-blick.at ::: Forum für Multivisionsvorträge
    http://www.image2d.com ::: Bildagentur für den alpinen Raum
     
    Gregor Kofler, Sep 6, 2007
    #4
  5. Lammi

    Stevo Guest

    Gregor Kofler wrote:
    >> 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).


    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.
     
    Stevo, Sep 6, 2007
    #5
  6. Stevo meinte:
    > Gregor Kofler wrote:
    >>> 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).

    >
    > 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


    --
    http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
    http://www.licht-blick.at ::: Forum für Multivisionsvorträge
    http://www.image2d.com ::: Bildagentur für den alpinen Raum
     
    Gregor Kofler, Sep 6, 2007
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kenneth

    Rectangle object in asp.net?

    Kenneth, Jan 15, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    550
    Steve C. Orr [MVP, MCSD]
    Jan 15, 2004
  2. Alberto

    Paint a rectangle

    Alberto, Jan 1, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    443
    Scott Mitchell [MVP]
    Jan 1, 2005
  3. Tyrant Mikey
    Replies:
    10
    Views:
    5,517
    Tyrant Mikey
    Feb 7, 2005
  4. Cirene
    Replies:
    5
    Views:
    596
    Cirene
    May 17, 2008
  5. Lammi

    mark a rectangle

    Lammi, Sep 6, 2007, in forum: Javascript
    Replies:
    0
    Views:
    108
    Lammi
    Sep 6, 2007
Loading...

Share This Page