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: Fri, 21 Dec 2001 09:29:45 -0100
Yeah, I know.   But that would in best case mean a 7x7 board (49 squares) and in worst case a 19x19 (!) board (361 squares).

I think the average viewer wouldn't like the wait ..... :-)

On Thu, 20 Dec 2001 13:00:35 -0600, javascript@xxxxxxxxxx said:
>
>    Why not have an array of squares using one of two pictures, and just do
>an image rollover?  You'd have to make a few extra images, but the centering
>would all be done for you.
>
>----- Original Message -----
>From: <brian@xxxxxxxx>
>To: <javascript@xxxxxxxxxx>
>Sent: Thursday, December 20, 2001 10:36 AM
>Subject: RE: [Javascript] An easy one for the experts :-)
>
>
>|
>| 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
>| >
>| _______________________________________________
>| Javascript mailing list
>| Javascript@xxxxxxxxxx
>| https://lists.LaTech.edu/mailman/listinfo/javascript
>|
>
>_______________________________________________
>Javascript mailing list
>Javascript@xxxxxxxxxx
>https://lists.LaTech.edu/mailman/listinfo/javascript
>