I've been experimenting with Raphael.js recently and I've encountered an issue related to the positioning of each Raphael object.
My goal is to create multiple 'canvases' without having them overlap within a predefined div on the page. I have been attempting to find a way to make them act like block elements, but so far I haven't found a solution. Each new raphael object ends up positioned outside of any div.
Below is the HTML code:
...
#content{height:100%; width:980px; margin:0 auto;}
</style>
</head>
<body>
<div id="content"></div>
...
and the javascript code:
var previews = [];
var prevSize = 25;
var spacing = 10;
//get container
var container = document.getElementById('content');
//get container width
var containerWidth = parseInt(getComputedStyle(container,"").getPropertyValue('width'));
var prevsPerRow =containerWidth/(prevSize+spacing);
var rowsPerPage = 20;
for(var y=0; y<rowsPerPage-1; y++){
for(var x=0; x<prevsPerRow; x++){
var preview = Raphael((x*prevSize)+(x*spacing), (y*prevSize)+(y*spacing),prevSize, prevSize);
previews.push(preview);
}
}
for(var x=0; x<previews.length-1; x++){
var temp = previews[x];
var rectangle =temp.rect(0,0,prevSize,prevSize);
rectangle.attr('fill','black');
}
One approach I'm considering is adjusting the x and y coordinates of the objects by adding the offset of the desired div, although this doesn't seem optimal.
Thank you for your assistance!
edit: For further clarification, here is a jsfiddle link demonstrating what I am trying to achieve. http://jsfiddle.net/xpNBr/