divs into html table

[jman11]

ok you know on dreamweaver how you can make slices and then export the slices as an html page and it creates a table according to where the slices were positioned? well thats what im trying to do with javascript, i can move around divs i made and resize them with handles on each corner of the div, but what i cant figure out is how i go about say exporting the style that is set to each div. because they are positioned as absolute, and their position is set with like top: 50px; left: 133px; for example. so is there a way i can like export each div with their current position into text that i can copy and paste into a website?

thanks tell me if you need help understanding :D

[whoisgregg]

Could you share a short code snippet of how the user is able to drag the divs? (Also, if you are using a particular javascript library that would be helpful info.)

[rocknbil]

how i go about say exporting the style that is set to each div.

Javascript is "unaware" of the style of of an element unless the style is inline

<div id="mydiv" style="width:100%">....

or you set it specifically when the page loads

document.getElementById('mydiv').style.width='100%';

... which may or may not be practical.

Interesting quirk [webmasterworld.com], follow the link in the last post for more explanation/examples, and coopster's links give another option.

[jman11]

heres how the div's are being moved jsut when you hold down your mouse.

and the div's are positioned absolute and the style is defined on the div itself, not using a class or anything. i just want to have the div's positioned and their coordinates according to their parent is shown when the user presses a button. when the user presses submit it will show each div's position from top - left. which i can do i just need to know how to get the left: px and top: px;

[whoisgregg]

Which library did you use to add that draggable feature? For example, with the Prototype & Scriptaculous, you can add a callback function to the onEnd event:

new Draggable('my_div', { onEnd : function(){
alert('top: '+$('my_div').getStyle('top')+', left: '+$('my_div').getStyle('left')+'');
} });

But, if you're using a different library (or custom code) you can't use this code exactly, but it might give you an idea of what direction to go.