Posted by Jonathan N. Little on 04/06/07 04:06

dorayme wrote:
> I assume there is simply no good way to centre the mass of
> rectangles (shrink fit a wrapper and centre wrapper, left/right)
> here:
>
> http://tinyurl.com/ypnfc8
>
> ?
>
> If this is so, since they are reasonably fine uncentered anyway,
> a URL to suitable javascript "solution" would be appreciated - if
> there be such.
>

Not full tested but...

Change style:
* {margin: 0; padding: 0;}
#wrapper div {margin: 2px; padding: 0; float: left; width: 102px;
height: 77px}
#wrapper div img {width:100px; height:75px; border: 1px solid #000;
background: #fff;}

Add "wrapper" DIV to contain all thumb DIVs:

<div id="wrapper">
<div>
<a href="some.html"><img src="landscapeThumb.gif" alt="some"></a>
</div>
...
</div>


JavaScript:
function centerMe(){
var offsetWidth=document.documentElement.offsetWidth
//thumb + border + margin
var thumb=100 + 2 + 4;
//number of thumbails across that will fit
var count=parseInt(offsetWidth/thumb);
//width for wrapper
var width=count * thumb;
//calc left margin
var left=parseInt((offsetWidth-width)/2)
//grab "wrapper" DIV
var wrap=document.getElementById('wrapper');
//adjust style
wrap.style.width=width + "px";
wrap.style.marginLeft=left + "px";
}

// attach events
if( window.addEventListener ) {
window.addEventListener('load',centerMe,false); //legacy
window.addEventListener('resize',centerMe,false);
} else if( document.addEventListener ) {
document.addEventListener('load',centerMe,false); //proper
document.addEventListener('resize',centerMe,false);
} else if( window.attachEvent ) {
window.attachEvent("onload", centerMe); //IE only
window.attachEvent("onresize", centerMe);
}

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]