Moving an image to a selected cell

[AndyGroom]

I *know* everyone hates using tables but forgive me for doing so.

I've got a table laid out on screen like a calendar and I'd like it so that when someone clicks a particular day, an 'earmark' image moves to the top-left corner of the cell which has been clicked.

This is what I've done but it doesn't work:

<style>
img.marker { position: relative; }
</style>

<table><tr><td id='cell1'>
<img class='marker' id='marker'>
</td><td id='cell2'></td><td id='cell3'> ... lots more cells and rows ...
</td></tr></table>


In my Javascript code:

document.getElementById('marker').style.left = document.getElementById('cell'+thisoffset).style.left;
document.getElementById('marker').style.top = document.getElementById('cell'+thisoffset).style.top;

where thisoffset is the number of a cell.

The code doesn't give an error but neither does it move the image. Am I doing something impossible or just plain going about it the wrong way?

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments

 

[feherke]

Hi

The code you posted is not enough to debug it. You not even specified when and how that JavaScript code is called.

One thing anyway. You are reading [tt]style.left[/tt] and [tt]style.top[/tt]. But had you set them previously ? If not set it, you can neither read it. In which case you have to use [tt]getComputedStyle()[/tt] in standard-compliant browsers and something else in Explorer.

See the [tt]getStyle()[/tt] function in Peter-Paul Koch's article, Get Styles.

Feherke.

http://free.rootshell.be/~feherke/

 

[AndyGroom]

Thanks. The offsetLeft and offsetTop values look promising for what I'm after.

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments

 

[feherke]

Hi

when someone clicks a particular day, an 'earmark' image moves to the top-left corner of the cell which has been clicked

Thinking again, why not just make that earmark a background image ?

td[purple].earmark[/purple] [teal]{[/teal] [blue]background:[/blue] [green]url[/green]([green]earmark.gif[/green]) [green]no-repeat[/green] [green]top[/green] [green]left[/green] )

document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'cell'[/i][/green][teal]+[/teal]thisoffset[teal]).[/teal]className[teal]+=[/teal][green][i]' earmark'[/i][/green]

Would be easier to set, but then you will have to clear it too. In change would be much easier to implement multiple selection.

Feherke.

http://free.rootshell.be/~feherke/

 

[AndyGroom]

True, I'd also thought about changing the backcolor of the cell but like you say, you'd have to remember to clear it (or in my case restore it to the previous colour since weekends are a different colour to workdays) each time it changed. This approach of moving an image works best for me, but I might also use your idea for marking days which have appointments.

Good tips, thanks.

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments