Links

Lists

Latest Updates

Ruby On Rails List
Python list
Advanced Java
The JavaScript List
Apache Users
Full Disclosure
Linux Security

Search the archives!
Having a development problem? Ask eDevelopment.org forums!

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Javascript] An easy one for the experts :-)

  • From: javascript@xxxxxxxxxx (javascript@xxxxxxxxxx)
  • Subject: [Javascript] An easy one for the experts :-)
  • Date: Thu, 20 Dec 2001 15:36:22 -0100
Ok, a deeper explanation ...

board.gif is as the name implies is a visual representation of
a board, squared, 9 x 9.

When the viewer clicks on the board, I'd like to place a 'move-from'
cursor in that square ... (and when the user clicks again a 'move-to'
cursor will be placed).

So, the right algo is:

cursor.x = ((window.event.x - board.left)/squaresize) * squaresize;
cursor.y = ((window.event.y - board.top)/squaresize) * squaresize;

.. well, something like that :-)    It's the (board.left, board.top) values I am unable to retrieve ...


Kind regards,
Brian



On Thu, 20 Dec 2001 15:24:44 +0100, javascript@xxxxxxxxxx said:
>I wasn't sure to have understood what you intend to do :-)
>
>-----Message d'origine-----
>De : brian@xxxxxxxx [mailto:brian@xxxxxxxx]
>Envoyé : jeudi 20 décembre 2001 17:17
>À : javascript@xxxxxxxxxx
>Objet : RE: [Javascript] An easy one for the experts :-)
>
>
>
>Hmmm ... it doesn't quite work the way I want it.  But you've
>wet my teeth - I'll experiment a bit :-)
>
>Thanks.
>
>On Thu, 20 Dec 2001 14:54:08 +0100, javascript@xxxxxxxxxx said:
>>I don't have the time to test more but this source should work as is
>>
>><html><head><title>Test</title>
>><script>
>>function position(NSevent)
>>{
>>	if ( document.all ) // IE
>>	{
>>        document.all["mydiv"].pixelTop=
>>		document.all["myboard"].pixelTop+window.event.( one of
>>the coords property : x,offsetX );
>>	}
>>	else // NS
>>	{
>>		document.layers["mydiv"].top =
>>document.layers["myboard"].top + NSevent.( one of the coords property :
>>x,offsetX )
>>	}
>>}
>></script>
>></head>
>><body>
>><div id=myboard name=myboard style"position:absolute; top:150;
>left:150;
>>visibility:visible"><a href="#" onclick=position;><img id="board"
>>width="320" height="320" src="board.gif"></a></div>
>><div id=mydiv name=mydiv style"position:absolute; top:15; left:15;
>>visibility:visible">
>><img id="cursor" src="cursor.gif">
>></div>
>></body>
>></html>
>>
>>-----Message d'origine-----
>>De : brian@xxxxxxxx [mailto:brian@xxxxxxxx]
>>Envoyé : jeudi 20 décembre 2001 16:39
>>À : javascript@xxxxxxxxxx
>>Objet : RE: [Javascript] An easy one for the experts :-)
>>
>>
>>
>>Hello,
>>
>>Ok - could you give me a simple example, please?  Just the
>>bare essentials.   I did try at one time to wrap the images
>>into a div container - but I didn't have much luck :(
>>
>>
>>Kind regards,
>>Brian
>>
>>On Thu, 20 Dec 2001 14:35:04 +0100, javascript@xxxxxxxxxx said:
>>>for cross browser solution, don't use IE dom programming.
>>>So use a href around your image and a div to locate your image
>>>on the window.
>>>
>>>-----Message d'origine-----
>>>De : brian@xxxxxxxx [mailto:brian@xxxxxxxx]
>>>Envoyé : jeudi 20 décembre 2001 16:27
>>>À : javascript@xxxxxxxxxx
>>>Objet : [Javascript] An easy one for the experts :-)
>>>
>>>
>>>
>>>Hi,
>>>
>>>I have searched the manuals .. on google .. in archives ... without
>>>luck.
>>>
>>>Consider this piece of code:
>>>
>>><html><head><title>Test</title>
>>><script>
>>>function position(event)
>>>{
>>>        cursor.style.posLeft=board.style.posLeft+event.x;
>>>        cursor.style.posTop=board.style.posTop+event.y;
>>>}
>>></script>
>>></head>
>>><body>
>>><p><img id="board" width="320" height="320" src="board.gif"
>>>style="position:relative;" onClick="position(event)">
>>><img id="cursor" src="cursor.gif" style="position:absolute">
>>></body>
>>></html>
>>>
>>>Purpose:
>>>
>>>- whenever a mouse click is detected on board move the cursor to this
>>>position.
>>>
>>>Problem:
>>>
>>>- although the code works (!) the cursor is misaligned.  That is, it
>is
>>>positioned something like 5 pixels to the left of the click and 5
>>pixels
>>>above the click.    I've tried to use pageXOffset and pageYOffset to
>>>adjust the cursor - but I guess they're only good when scrollbars are
>>>involved.
>>>
>>>
>>>How do I solve this?   I know I can set position:absolute et al on the
>>>board, but this is not acceptable ...
>>>
>>>I'm mainly targeting IE but, if at all possible, would like to see a
>>>cross-browser solution :-)
>>>
>>>
>>>Merry Christmas,
>>>
>>>Brian
>>>_______________________________________________
>>>Javascript mailing list
>>>Javascript@xxxxxxxxxx
>>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>>_______________________________________________
>>>Javascript mailing list
>>>Javascript@xxxxxxxxxx
>>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>>
>>_______________________________________________
>>Javascript mailing list
>>Javascript@xxxxxxxxxx
>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>_______________________________________________
>>Javascript mailing list
>>Javascript@xxxxxxxxxx
>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>
>_______________________________________________
>Javascript mailing list
>Javascript@xxxxxxxxxx
>https://lists.LaTech.edu/mailman/listinfo/javascript
>_______________________________________________
>Javascript mailing list
>Javascript@xxxxxxxxxx
>https://lists.LaTech.edu/mailman/listinfo/javascript
>