ansaurus

Question

Answer 1

+1 A:

This is how tables work. I possible I would try and do the same thing using divs and then you should be able to deal with the problem using position:absolute so the expanded div will overlay the others. This could work the same for a table cell.

matpol 2009-12-10 10:20:11

Are you suggesting to replace td with divs?

MelmanRo 2009-12-10 10:31:03

You could place a div inside each cell and show/hide that when you do the zoom thing.

Olly Hodgson 2009-12-10 10:35:36

Answer 2

+1 A:

Unfortunately "position" doesn't work on table cells. You could try putting a div inside the table cell and positioning that.

Edit: Something like this should do the trick:

td.normalClass div { 
    display: none; 
} 
td.zoomClass div { 
    display: block; 
    position: absolute; 
    width: 320px; 
    height: 240px; 
}

Make sure the div is the first thing in the td and it'll be positioned at the td's top left corner. You might need to play with relative positioning on the td if you need to change the top and left values further.

Olly Hodgson 2009-12-10 10:33:19

Can you tell me what would be the changes on the css as well?

MelmanRo 2009-12-10 10:50:03

Something like this should do the trick: td.normalClass div { display: none; } td.zoomClass div { display: block; position: absolute; width: 320px; height: 240px; }. You might need to play with relative positioning on the td if you need to change the top and left values of the div.

Olly Hodgson 2009-12-10 11:32:23

Answer 3

+1 A:

A few comments on your code, if I may. I would keep the layout in the CSS file and not in the HTML, so I'd remove all of those align="right" and valign="top". Also, you can reference the cells in your table much more efficiently. Then you won't have to set the class for each cell.

#main_table td{
    padding:0;
    font-size:4px;
    color:#3333FF;
}

I would also keep all of the behaviour of the page in a separate script file (Javascript). So no more onclick="zoom(x)" at every cell. You can use event binding to do that.

Also, if you use event binding, you can just "read" the id of the clicked cell, so you don't have to pass that value in statically in the call of the zoom function.

Lastly: I can highly recommend using jQuery to do this kind of DOM manipulation as it's a lot easier, the code is shorter and more readable and your scripts work across browsers pretty much out of the box.

I don't have a solution for this specific problem but using jQuery it's quite easy to insert a new DOM element, a div for instance, with the content of the clicked cell, float over the table and simulate the zoom effect. That div would be be absolutely positionable and can be styled a lot better than the cell the user clicked on.

Niels Bom 2009-12-10 11:09:56

ansaurus

tags:

views:

answers:

dynamically change css class using js

related questions