Hans Scholander

Hello there,

I have used ISMAP for server-side included maps.

I would like to improve the user interface by letting him/her 'drag an
haicross' to the position he/she likes and then press a button outside the
target-image.

Background:

I have made this work all right with IE5+ and Mozilla on PC

To find the actual position of the hair-cross and the map I have used these
functions

function getAbsX(elt) { return (elt.x) ? elt.x : getAbsPos(elt,"Left"); }
function getAbsY(elt) { return (elt.y) ? elt.y : getAbsPos(elt,"Top"); }
function getAbsPos(elt,which) {
 iPos = 0;
 while (elt != null) {
  iPos += elt["offset" + which];
  elt = elt.offsetParent;
 }
 return iPos;
}                                                                           

Problem:

Opera 7 gives correct x-coordinates but incorrect y-coordinats
Zafari on MAC gives an offset of  8px in the x,y -plane

Searching the INTERNET, I found your fantastic site - and also found that
you had a demo that could be used for moving the hair-cross around.

Qustion:
Do you have any idea of how to achieve this goal

Instead of clicking the image - move an haicross ( or any other nice
picture, like a monkey-wrench ) to the  the desired position and make the
send button separate.

Hans Scholander

Thanks for your answer
Here is some feed-back

( I'm sorry - english is a foreign language to me - but I hope you get the
point )

-------------------------------
1. Changing the algoritm

if( elt.style && elt.style.position == 'absolute' ) {
 iPos += parseInt(elt.style[which.toLowerCase()]);
} else {
 iPos += elt["offset" + which];
}

It gave the same result - problem still occurs in Opera7 but not in IE or
Mozilla

------------------------------

2. Using  your draglayer.js instead of my original tws-drag.js

I made it work correctly on the client side. However - on the server side I
analyse the answer and send back a modified copy of the original document.
This leads to script-errors when the user get the answerback.

In my original attempt I use 

<STYLE>
.draggableElement {
 position: absolute;
}
#kryss { left:423; top:36px; }
</STYLE>

This approach does not lead to any redefinition

-------------------------------

3. The formula you have used will only correctly find the position of
elements that have not been positioned with CSS 'position'. Still, it
should have worked, so I would be interested to see an example of it not
working, so I could work out why. I think what you need to do is add to
your algorithm:

My testscripts are still quite fuzzy, but you are more than well-come to
inspect them.

this one uses your method
http://xxx.xxx.xxx.xx/xxxxxxxxxxxx/provskott/100.htm  and is partly
translated to english

This one uses the original method
http://xxx.xxx.xxx.xx/xxxxxxxxxxxx/provskott/13.htm and the swedish part is
irrelevant for you - I use it th gather opinions from my mother-in-law and
other persons with a variety of browsers. This is the the page that exposed
the problem with Opera7.

Thanks again

Hans Scholander


Thanks again for taking your time

Hello again, Mark

I have to thank you for your kind and quick answer in the beginning of the letter,
 we have two separate issues, so this answer is a bit overloaded

1. Is for you to analyze why Opera7 gives an offset with my original code.
    Is it something I have misunderstood or is it actually a bug in Opera7

2. Is just a report on my failure to modify your functions for my purpose.
     
-----------------------------------------
> > 1. Changing the algoritm
> 
> You need to make position an inline style <div style="position:absolute;">
> 

Yes Mark, I've modified to inline style in 
http://xxx.xxx.xxx.xx/xxxxxxxxxxxx/provskott/14.htm

Opera 7 behavior
============
If I position the haircross in the upper left corner of the document
Opera will give x=0 y=47 rater than x=0 y=0 
If I drag the hair-cross to the nose-tip I get x=110 and y=112  --- still
an offset of 47

Mozilla and IE5 behavior
=================

If I position the haircross in the upper left corner of the document
Both IE5 and Mozilla announces x=0 y=0
If I drag the hair-cross to the nose-tip I get x=110 and y=65 ---- no offset

You might notice that all arithmetic is left/top oriented, I explicitely
compensates an hair-cross offset
in the function anrop(). Anrop is a swedish noun, meaning call.

I have not been able to test with Safari, as I have no MAC - but in 13.htm
it gave a constant offset of x=4 y=4
and Opera gave various offsets regarding y and always no offset regarding x.

I don't think you want to hear about IE on MAC ;-)

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ http://217.215.226.89/~nyfragsport/provskott/14.htm
+
+ is intended for investigating different behavior in different browsers.
+ As a side-effect I can use it with IE5 to show what behavior I'm after
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++


---------------------------------------

> > 2. Using  your draglayer.js instead of my original tws-drag.js
> 
> http://xxx.xxx.xxx.xx/xxxxxxxxxxxx/egetbin/svar-prog1.cgi?...
> works for me using Opera 7. Are you clicking the right buttons?
> 
> Not sure why you get the script error, it should work as far as I can
see. I will take another look when I get home.

You will see it when you use IE5

As I plagiated your routines, they work. 
You could not possible know - what my CGI-script did.

The CGI-script
1. recieves the coordinates, using the svaret.x svaret.y syntax.
2. analyses the answer
3. sends back the origial page - modified with the result/diagnostic


---
Här presenteras resultatet när Du svarat
---
will be replaced with the diagnostic.

This indicates that I have to do some recoding, so that the page will
reinitiate the hair-cross.
=============================================================

It is not fair of me to ask of your demo-example to be reallocatable, it
was my hope though that my original attempt should work on all modern
browsers.


 
 This is what I see 

General behavior before sending ansver to server
=================================

Before you actually moves the haicross its coordinates are undefined
After that it gives correct values for all Opera7, Mozilla, and IE5
They all work correctly


Opera Behavior after sending call to server
=============================
1. No script error.
2. No hair-cross visable
3 Haircross top left corner x=undefined y=undefined
 

IE5 Behavior after sending call to server
===========================
1. Script error saying: In swedish though on my PC.
ROW 88
CHAR 1
Error: Oject expected
Code 1

2. No hair-cross visable 
3.Haircross top left corner x=undefined y=undefined
In swedish though on my PC.

Mozilla Behavior after sending call to server
=============================
1. No script error.
2. No hair-cross visable
3 Haircross top left corner x=undefined y=undefined

This indicates that I have to do some recoding, so that the page will
reinitiate the hair-cross.
or try to figure out why the old attempt fails for Opera7

I am rather new to java-scripting, so please tell me if you think my
approch is to weak.

Hans

Hello Mark

It shall be
this is the actual output from my linux/apache server

$ cd /home/nyfragsport/public_html
$ du
16 ./ANIMALS/probsvar
32 ./ANIMALS
56 ./astronomi1/probsvar
112 ./astronomi1
3060 ./bilder
44 ./egetbin
64 ./globals
----------------------- cut away ----------
16 ./provskott/probsvar
164 ./provskott
7372 .

I think that this link will make you certain
http://xxx.xxx.xxx.xx/xxxxxxxxxxxx/astronomi1/1.htm

Hello, there

I just want to make certain I don't loose you

I think we are out of sync - You sent me a letter before I was able to give
you an answer before

The problem is not the localization of the CGI-script, it is that the
CGI-script assumes that the page-code is
reallocatable. My former - possibly unread letter explains what I mean.


. is the the public_html of different users
The CGI-scripts all reside in ./egetbin            = ownbin
The pictures all reside in ./bilder                = pictures
The code is autogenerated in ./skapa               = create
The autogenerated pages reside in ./provskott      = testshot
The correct answers reside in ./provskott/probsvar = problem answer
The global enteties reside in ./globals
The trusted and tested java-scripts reside in ./
The experimentel javascript reside in ./provskott
and should be as long as it not cleaned up

The directory ./provskott is created only for this experiment with
drag/drop hair-cross

The whole user nyfragsport is created as a test-bed for for this
mini-projekt, mostly because I want to separate it from
other activities. 

So egetbin is no mistake. The svar-prog.cgi certainly works - but it is not
tested yet for error-handling when
svaret.x=NaN. 

Now to the point.

I thought you were interested in an example that shows that the algoritm
doesn't work with Opera7
Thats why I prepared http://xxx.xxx.xxx.xx/xxxxxxxxxxxx/provskott/14.htm 

which can be used without the CGI-script. 

I am not skilled enough in java-script, DOM, CSS and all the new W3C-stuff.
But I have a strong feeling that Opera7 acts wrongly.

I think you will find the tws-drag.js in your cache, and all the stuff
related to twshelp.js could be reduced to alerts.

Hans

Hello, I am such a fool

I suddenly woke up in the middle of the night - and realized that I had
made algoritmic changes in only one of the two files.

This means that you have helped me solve the problem with my original
attempt.

It now works for Mozilla, IE5+ and Opera7 on PC


--------------------

The second part is still true - IE5 gives script error when it recieves the
answer from the CGI-script
I'll try to find that out mostly because I'm curios.

--------------------

When I  made my first program 1967-03-07 , it gave me the output ERROR IN
COMPILATON syntax something
I remember that I  made it work next day and I remember I was happy.

This time you have solved a problem for me - but I have to admit that I
have a very vague understanding of why this extra lines were important.

But I'm happy, not as exited as in 1967 but still quite satisfied.

Hans