How to do resizing square above the web page content

Discussion in 'HTML' started by Jon Berg, Jan 7, 2005.

  1. Jon Berg

    Jon Berg Guest

    I want to be able to create a square above the web page content.
    I want to be able to resize this square on the fly, not by reloading the
    page. It would be cool to be able to drag it by the mouse pointer,
    but I guess as a second best way buttons could be pressed to move and
    resize the square.
    I also want to be able to extract the coordinates of this square.

    This is going to be used to select a section of a web page. Sort of the
    same way you can select icons on the windows desktop.

    Does anybody have any ideas or know of a way to this?
    Is it possible to use a layer?
    Do anybody know of some page where something like this is done?


    Jon Berg.
     
    Jon Berg, Jan 7, 2005
    #1
    1. Advertising

  2. Jon Berg wrote:

    > I want to be able to create a square above the web page content.


    You can put a transparent fixed-position object using CSS. I suppose you
    meant 'over' and not 'above'

    > I want to be able to resize this square on the fly, not by reloading the
    > page.


    That's where you get a bit greedy. You'll probably need to involve some
    programming to do this.

    > It would be cool to be able to drag it by the mouse pointer,
    > but I guess as a second best way buttons could be pressed to move and
    > resize the square.


    For all these key and mouse events you'll need callbacks. There are some
    demos at JavaScript Source, which provide a good starting point.

    > I also want to be able to extract the coordinates of this square.
    >
    > This is going to be used to select a section of a web page. Sort of the
    > same way you can select icons on the windows desktop.


    I don't think you will be able to do this. You over-estimate the
    functionality of browsers. If you managed to do it, it probably would not
    be valid and only work in one particular browser.

    > Does anybody have any ideas or know of a way to this?
    > Is it possible to use a layer?
    > Do anybody know of some page where something like this is done?


    Go and see WYSIWYG Pro (http://www.wysiwygpro.com/demos/demo1.php) which
    does some of the things you are after. It's pure JS, IIRC. Not free
    unfortunately.

    --
    Roy Schestowitz
    http://schestowitz.com
     
    Roy Schestowitz, Jan 8, 2005
    #2
    1. Advertising

  3. Jon Berg

    Toby Inkster Guest

    Jon Berg wrote:

    > I want to be able to create a square above the web page content.
    > I want to be able to resize this square on the fly, not by reloading the
    > page. It would be cool to be able to drag it by the mouse pointer


    http://examples.tobyinkster.co.uk/selecty

    Tested in Opera 7.5x, IE 6 and Mozilla 1.6. Works in Opera 7.5x, but not
    the others -- don't know why.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Jan 8, 2005
    #3
  4. Toby Inkster wrote:

    > Jon Berg wrote:
    >
    >> I want to be able to create a square above the web page content.
    >> I want to be able to resize this square on the fly, not by reloading the
    >> page. It would be cool to be able to drag it by the mouse pointer

    >
    > http://examples.tobyinkster.co.uk/selecty
    >
    > Tested in Opera 7.5x, IE 6 and Mozilla 1.6. Works in Opera 7.5x, but not
    > the others -- don't know why.
    >


    Confirmed not working in Mozilla Firefox1.0 either. The code looks quite
    elegant though...

    --
    Roy Schestowitz
    http://schestowitz.com
     
    Roy Schestowitz, Jan 8, 2005
    #4
  5. Jon Berg

    Jon Berg Guest

    Toby Inkster wrote:
    > Jon Berg wrote:
    >
    >
    >>I want to be able to create a square above the web page content.
    >>I want to be able to resize this square on the fly, not by reloading the
    >>page. It would be cool to be able to drag it by the mouse pointer

    >
    >
    > http://examples.tobyinkster.co.uk/selecty
    >
    > Tested in Opera 7.5x, IE 6 and Mozilla 1.6. Works in Opera 7.5x, but not
    > the others -- don't know why.
    >

    That is the sort of thing I meant exactly. It is very great, but a bit
    bad that it only works in Opera. The red square seems to pop up in
    Mozilla, but that's all.

    Anybody have any idea how this can be fixed so it would work in Mozilla.


    Anyway thanks.

    Jon.
     
    Jon Berg, Jan 8, 2005
    #5
  6. Jon Berg

    Jon Berg Guest


    >
    >
    > Go and see WYSIWYG Pro (http://www.wysiwygpro.com/demos/demo1.php) which
    > does some of the things you are after. It's pure JS, IIRC. Not free
    > unfortunately.
    >


    Yes the resizing of the elements shows something like what I want to
    accomplish. And it works great in Mozilla. I looked through the source
    code of the html editor, but it was not apparent to me where the actual
    code that does that fancy resize thing. It will be difficult to get an
    idea of how they do that.


    Thanks,
    Jon.
     
    Jon Berg, Jan 8, 2005
    #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. Replies:
    0
    Views:
    1,243
  2. hazz
    Replies:
    6
    Views:
    49,671
    SkyUCHC
    Jun 9, 2010
  3. klloyd

    Blank area above content

    klloyd, May 1, 2006, in forum: HTML
    Replies:
    33
    Views:
    1,026
    klloyd
    May 4, 2006
  4. Pil (Trustworthy from Experience)

    Resizing a div by resizing its borders

    Pil (Trustworthy from Experience), Apr 18, 2009, in forum: Javascript
    Replies:
    9
    Views:
    356
    Proper
    Apr 21, 2009
  5. Proper
    Replies:
    0
    Views:
    202
    Proper
    Apr 18, 2009
Loading...

Share This Page