[Seaside] Re: Problem with Scriptaculous
Lukas Renggli
renggli at gmail.com
Sun Jun 10 10:09:48 UTC 2007
> I am trying to get a clickable map type effect
> using scriptaculous. I have a graph rendered
> by GraphViz, I need scriptaculous to tell me the
> click co-ordinates so that I can work out what in
> the graph was clicked upon.
>
> It wouldn't be the first time that I didnt know what
> I was doing, but I wondered if you could look at
> this code for me.
>
> The containing div id is 'workflow'.
> The problem is that callback "B" works, and callback
> "A" doesnt. If I swap them around only the second
> one works. Is this to be expected?
I tried to reproduce the problem, but it works for me (see my
file-out). My code evaluates all 4 callbacks correctly and I get the
two co-ordinates displayed. I had to refactor your code a bit as it
was missing some pieces, so maybe the problem is hidden there.
Two comments:
1. The offset co-ordinates you get are probably not those you expect.
offsetTop and offsetLeft answer the offset [1] up to the next absolute
or relative positioned div, generally not those relative to the upper
left corner of the document. In you case you probably need to use
something like cumulativeOffset [2]. It also depends on your styles of
course, so I don't know if that is a problem in your case.
[1] http://developer.mozilla.org/en/docs/DOM:element.offsetLeft
[2] http://prototypejs.org/api/position/cumulativeoffset
2. You can improve the performance of your example by combining the
two #updater together. The first of your #updater is not really an
#updater, it does not update anything. The #requestor would do here as
well. I suggest to combine them to something like:
html updater
id: 'co-ordinates';
callback: [ :v | ... ] value: ...;
callback: [ :v | ... ] value: ...;
callback: [ :v | ... ] value: ...;
callback: [ :v | ... ] value: ...;
on: #renderCoordinatesOn: of: self
Cheers,
Lukas
>renderImageOn: html
> | offsetX offsetY |
>
> offsetX := ValueHolder new.
> offsetY := ValueHolder new.
> self generateGraphForm.
> html image
> id: 'workflow-image';
> onClick: (html updater
> "A" callback: [ :v | offsetY contents: v asNumber ] value: (((SUElement on: html) id: 'workflow') property:'offsetTop');
> "B" callback: [ :v | offsetX contents: v asNumber ] value: (((SUElement on: html) id: 'workflow') property:'offsetLeft');
> callback: [ :v | graphFormClickX := v asNumber - offsetX contents ] value: SUEvent new x;
> callback: [ :v | graphFormClickY := v asNumber - offsetY contents ] value: SUEvent new y);
> onClick: (html updater id: 'co-ordinates'; on: #renderCoordinatesOn: of: self );
> form: graphForm "; height: (form height // self scaleDownFactor); width: (form width // self scaleDownFactor)"
> "] "
--
Lukas Renggli
http://www.lukas-renggli.ch
More information about the Seaside
mailing list