Re: Differentiating between horizontal and vertical table borders

On Feb 5, 3:45 pm, Elegie <ele...@xxxxxxxxxxx> wrote:
Csaba Gabor wrote:

Hello,

The following page shows how one can detect between
the mouse crossing over horizontal vs. vertical
borders. It works by expanding from the mouse's
current location in the 4 directions (up, down,
left, right) until a non table element is
encountered. This determines whether the direction
is horizontal or vertical.

This looks like a fine approach; since your mouse may wander on the
border, without touching the cells, you have to get the information
without using any cell info. The real difficulty resides in determining
what elements are located at the wanted distance of the current mouse
point, but as you're targeting IE only, the elementFromPoint method will
do the job quite easily.

<snip>

If there are more efficient/recommended methods
for this grid detection/classification,
please do share.

I cannot think of anything better currently; using a mousemove handler
instead of mouseover/mouseout handlers could be simpler, as it does not
require too deep an understanding of events management (so is probably
best for inexperienced maintainers). YMMV.

Thanks for your very nice example.
That's a good point with the test: assuming
that the cells have a minimum size (which is
a pretty good assumption for most situations),
why bother iterating through a bunch of tests
when you can just jump right to the conclusion?

The rest really depends on the requirement itself; some people may find
the resize handler too hard to grab, in which case expanding the
grabbing region to cells side areas (padding) could be relevant (though
admittedly of higher difficulty).

You are right, I have not yet stated what this is for.
I am working with an IE COM object in Windows (XP Pro)
and making a little app (I'm actually writing IE event
handlers in PHP, but everything discussed here is
translatable), which is why it's IE specific.

Where I'm going with this is that I'd like to
be able to resize internal table (assume table
is fixed percent of the document) widths and
heights (which I may very well come back to
in a separate post in the near future). The
type of thing to imagine is those split pane
interfaces that you often see in Windows such
as RegEdit or Explorer, or even Google Groups
panes, only I have a 3 x 2 table to worry about.


---
<table id="test" border="1">
<tr><th>Author</th><th>Book</th></tr>
<tr><td>Hubert Selby Jr</td><td>The Willow Tree</td><tr>
<tr><td>Joseph Heller</td><td>Catch 22</td><tr>
<tr><td>Douglas Coupland</td><td>Microserfs</td><tr>
</table>

<script type="text/javascript">
window.onload = function () {
var OFFSET = 10 ; // in px
document.getElementById("test").onmousemove = function () {
var d = document ;
var evt = window.event ;
if(evt.srcElement==this) {
var above = d.elementFromPoint(evt.clientX, evt.clientY+OFFSET) ;
var aside = d.elementFromPoint(evt.clientX+OFFSET, evt.clientY) ;
if(above!=this) {
this.style.cursor="row-resize" ;
} else if (aside!=this) {
this.style.cursor="col-resize" ;
} else {
this.style.cursor="default" ;
}
} else {
this.style.cursor="default" ;
}
}}

</script>
---

Regards,
Elegie.

.

Relevant Pages

  • Re: How can I make the browser display changes at once?
    ... var cell = elements.shift; ... resetAll() and timeAll-- ... var cells = document.getElementsByTagName; ... you would be increasing compatibility ...
    (comp.lang.javascript)
  • Re: RFC: Building the Perfect Tabbed Pane (an tutorial article)
    ... so the fact that the Safari workaround breaks if cancelBubble is used ... var wrapHandler = function{ ... var listener = createListener(element, 'on'+eventType, ...
    (comp.lang.javascript)
  • Another (Re: Useful Javascript example)
    ... The Event Listener registry was based on the one in ... var listenerRegistry = function{ ... return function(element, eventName, handler) { ... element.addEventListener(eventName, handler, false); ...
    (comp.os.vms)
  • Re: AJAX methodology
    ... setAttributes: function(elem, type, statusId) ... refer to the properties of SS but to the function handler since it is ... The observation is correct, the reasoning is flawed. ... var result = XHR.responseText; ...
    (comp.lang.javascript)
  • AJAX methodology
    ... I have written a small Ajax module which makes use of Object literals ... var AJAX = ... getResponse: function(url, method, handler) ... setAttributes: function(elem, type, statusId) ...
    (comp.lang.javascript)