How to do resizing square above the web page content

[Jon Berg]

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.

 

[Roy Schestowitz]

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.

 

[Toby Inkster]

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.

 

[Roy Schestowitz]

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

 

[Jon Berg]

Jon Berg wrote:




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]

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.