Centering

[dorayme]

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.

 

[Jonathan N. Little]

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);
}

 

[dorayme]

Not full tested but...

Add "wrapper" DIV to contain all thumb DIVs:

JavaScript:
function centerMe(){
var offsetWidth=document.documentElement.offsetWidth

Thanks for this Jonathan, it works in Safari, also in iCab but
not in FF or Opera. I have not tested in WinIE (it has no effect
in MacIE... <g>) I will put it up at:

http://tinyurl.com/ypnfc8

 

[Ben C]

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

Right, because even where shrink-to-fit wrappers like display:
table-cell and display: inline-block are supported, the computed
shrink-to-fit width in that example works out to be the same as the
available width anyway.

In that example, the minimum width is about 102px (the width of the
longest float), the maximum width is the width of all the floats on one
"line" (something huge). The available width, the width of BODY, is
likely to be between those two values.

Basically shrink-to-fit only "shrinks" to anything when the maximum
width (width of everything on one line) is smaller than the available
width.

If this is so, since they are reasonably fine uncentered anyway,
a URL to suitable javascript "solution" would be appreciated - if
there be such.

In an ideal world you'd do this by making each thumbnail an inline-block
instead of a float, and putting text-align: center on their container.
That would give just the effect you want, and might even work on IE
since Mr Korpela has said that inline-blocks with widths set on them
give it less of a problem than usual.

I'm assuming you need the thumbnails to be little block boxes in their
own right-- if you don't need captions or anything, just use inline img
elements and don't float them. Use text-align: center on the container
and it will all work much like inline-blocks even in FF.

The problem if you just use inline-block is that it will look positively
wrong in FF (I suspect each image on its own line). So you could use
float, then the JS could sniff out whether inline-block is supported and
then just go round changing everything to inline block, i.e.

node.style.float = "none";
node.style.display = "inline-block";

etc.

You can leave #wrapper as text-align: center from the start since it
won't affect the floats.

Then you'd default to the floats even if JS was turned off, which would
be OK since they don't look that bad. If JS was on, and the browser
supported it, then you'd get the centering.

 

[Jonathan N. Little]

Thanks for this Jonathan, it works in Safari, also in iCab but
not in FF or Opera. I have not tested in WinIE (it has no effect
in MacIE... <g>) I will put it up at:

http://tinyurl.com/ypnfc8

Works in my FF, SeaMonkey & Opera! And "sorta" for WinIE, some tweaking
maybe needed for IE "alternate" methods of calculating margins ;-) (In
IE's defense there is probably a round-off error issue).

 

[dorayme]

Works in my FF, SeaMonkey & Opera! And "sorta" for WinIE, some tweaking
maybe needed for IE "alternate" methods of calculating margins ;-) (In
IE's defense there is probably a round-off error issue).

Works in my Mac FF and Opera now.

While I am here Jonathan, I will take a peek on my Win 2000 box...

Nah, no good I am afraid. Yes, it is trying, but the effect is so
marginal as to count for a fail on this particular size
thumbnail. (I will leave you to ponder defences for WinIE, I feel
more merciless towards it).

Anyway, pity... The point of bothering with this sort of thing is
to provide for the majority in this centering. I will try to
tweak by using sizes that I often do use, namely, 200x150 for
landscape, 150x200 for portrait... maybe IE will do better with
different figures.

Just one q, is IE 7 any better than 6 on this score? In other
words, does IE 7 center the mass of thumbnails as good as in FF
or as weakly as in IE6?

In some of the applications I have in mind for this centering, I
have landscapes and portaits, each block with their own wrapper.
I suppose I would have to sophisticate up the JS to address the
two blocks...

Perhaps the situation could be improved (at the cost of a little
screen wastage) by somehow making for the mass as a whole to use
up a much more "noticeable" amount of left and right margin.

 

[dorayme]

....

Basically shrink-to-fit only "shrinks" to anything when the maximum
width (width of everything on one line) is smaller than the available
width.

Indeed and is easily observed by moving the closing div to the
wrapper up in the html to enclose just a few (say 8 - for a big
screen, gets a nice big fat margin, left and right) thumnbnail
divs.

In an ideal world you'd do this by making each thumbnail an inline-block
instead of a float, and putting text-align: center on their container.
That would give just the effect you want, and might even work on IE
since Mr Korpela has said that inline-blocks with widths set on them
give it less of a problem than usual.

I'm assuming you need the thumbnails to be little block boxes in their
own right-- if you don't need captions or anything, just use inline img
elements and don't float them. Use text-align: center on the container
and it will all work much like inline-blocks even in FF.

My galleries usually have captions and the URL above was an
abstraction. In fact, to take a snip from an actual site I used:

a {display: block; font-size: 85%;}

and had short captions that sat nicely under each pic.

But ... back to centering...

The problem if you just use inline-block is that it will look positively
wrong in FF (I suspect each image on its own line). So you could use
float, then the JS could sniff out whether inline-block is supported and
then just go round changing everything to inline block, i.e.

node.style.float = "none";
node.style.display = "inline-block";

etc.

You can leave #wrapper as text-align: center from the start since it
won't affect the floats.

Then you'd default to the floats even if JS was turned off, which would
be OK since they don't look that bad. If JS was on, and the browser
supported it, then you'd get the centering.

I will just have to put all this on the back burner, I have no
idea how to go now. As someone here once said, one can convince
oneself of the beauty of doing anything (though really, one does
it because once cannot figure out a way to to do it better!)

 

[Jonathan N. Little]

Nah, no good I am afraid. Yes, it is trying, but the effect is so
marginal as to count for a fail on this particular size
thumbnail. (I will leave you to ponder defences for WinIE, I feel
more merciless towards it).

Well this shows why IE is whacked:

http://www.littleworksstudio.com/temp/usenet/alt.html.20070406.png
alt.html.20070406.png (PNG Image, 719x442 pixels)

IE's value for bodyElement's offsetWidth *includes* the window's
scrollbar, part of the browser chrome! Whereas other browsers, here
Seamonkey, do not. So where 6 thumbs should fit IE can on fit 5, hence
the error.

Either have to fork for IE to subtract width of scrollbar width in the
calculation , not good because maybe MS will change this and also what
if you only have a handful of thumbs and no scrollbar?

Or look for another way to calculate the number of thumbs in a row...

Or, my vote, screw'em! They are using IE they deserve it! :-D

Anyway, pity... The point of bothering with this sort of thing is
to provide for the majority in this centering. I will try to
tweak by using sizes that I often do use, namely, 200x150 for
landscape, 150x200 for portrait... maybe IE will do better with
different figures.

You could go with it and at least folks will decent browsers will get
the benefit. It is not like it destroys the page!

Just one q, is IE 7 any better than 6 on this score? In other
words, does IE 7 center the mass of thumbnails as good as in FF
or as weakly as in IE6?

Who knows? I already have discovered IE7 has its own *unique*
bugs...eeewwoooo the MS-Zone....

I'll fool with this a bit and see if there is a workaround for IE

 

[Jonathan N. Little]

Well this shows why IE is whacked:

http://www.littleworksstudio.com/temp/usenet/alt.html.20070406.png
alt.html.20070406.png (PNG Image, 719x442 pixels)

IE's value for bodyElement's offsetWidth *includes* the window's
scrollbar, part of the browser chrome! Whereas other browsers, here
Seamonkey, do not. So where 6 thumbs should fit IE can on fit 5, hence
the error.

Okay in IE the clientWidth is the BODY - the scrollBar wide so the value
to calculate from is now constant with other browsers! So revised
function

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

Great! But guess what? Even though there is room IE always puts 1 less
thumb across! Bugger! IE does not do floats...

Now if you do browser sniffing and insure you got IE and not Opera
(which can to this all correctly I must add) you could add 1/2 the thumb
width allotment to balance the margin...

function centerMe(){
var clientWidth=document.documentElement.clientWidth;
//thumb + border + margin
var thumb=100 + 2 + 4;
//number of thumbails across that will fit
var count=parseInt(clientWidth/thumb);
//width for wrapper
var width=count * thumb;
//left margin calculated
var left=parseInt((clientWidth-width)/2);

//Use so sort of browser sniffer to IS a IE only!
if( IsIE ) left+=(thumb/2); //add 1/2 thumb for IE only

//grab the wrapper DIV
var wrap=document.getElementById('wrapper');
//style it
wrap.style.width=width + "px";
wrap.style.marginLeft=left + "px";
}

 

[BootNic]

news: (e-mail address removed)
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.

Position:relative;float:left; extra div, Centered with Javascript.

http://home.earthlink.net/~bootnic/JavascriptCenterFloat.html

 

[dorayme]

IE's value for bodyElement's offsetWidth *includes* the window's
scrollbar, part of the browser chrome! Whereas other browsers, here
Seamonkey, do not. So where 6 thumbs should fit IE can on fit 5, hence
the error.

Ah, I see, that is interesting.

You could go with it and at least folks will decent browsers will get
the benefit. It is not like it destroys the page!

Of course.

Who knows?

Those with IE7 of course!

I'll fool with this a bit and see if there is a workaround for IE

I will be all ... er.... antenae.

 

[dorayme]

Okay in IE the clientWidth is the BODY - the scrollBar wide so the value
to calculate from is now constant with other browsers! So revised
function

function centerMe(){
var clientWidth=document.documentElement.clientWidth;

Great! But guess what? Even though there is room IE always puts 1 less
thumb across! Bugger! IE does not do floats...

Now if you do browser sniffing and insure you got IE and not Opera
(which can to this all correctly I must add) you could add 1/2 the thumb
width allotment to balance the margin...

function centerMe(){
var clientWidth=document.documentElement.clientWidth; ....
//Use so sort of browser sniffer to IS a IE only!
if( IsIE ) left+=(thumb/2); //add 1/2 thumb for IE only

//grab the wrapper DIV
var wrap=document.getElementById('wrapper');
//style it
wrap.style.width=width + "px";
wrap.style.marginLeft=left + "px";
}

Both these new functions now ruin the effect entirely in Safari!
Your first stab, 2 posts back, was good for many non IE.

It is a reasonable thing to want, to be able to wrap thumbnails
and to centre the mass of them with or without big left and right
margin. Pity it is so hard!

 

[dorayme]

news: (e-mail address removed)
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.

Position:relative;float:left; extra div, Centered with Javascript.

http://home.earthlink.net/~bootnic/JavascriptCenterFloat.html

This is not centering the mass of thumbnails in Safari:

<http://members.optushome.com.au/droovies/pics/inSafari.png>

In FF it works well.

In iCab it half works. (It plays silly buggers at some window
widths).

 

[dorayme]

http://home.earthlink.net/~bootnic/JavascriptCenterFloat.html

I can now see it works in IE 6 too. But still not in Safari.
Perhaps this is a basis to work something out: to talk to IE with
a conditional, to use something like JLs first javascript fix for
the rest?

 

[BootNic]

news: (e-mail address removed)
[snip]

http://home.earthlink.net/~bootnic/JavascriptCenterFloat.html

This is not centering the mass of thumbnails in Safari:

<http://members.optushome.com.au/droovies/pics/inSafari.png>

In FF it works well.

In iCab it half works. (It plays silly buggers at some window
widths).

Another go with a different approach. I don't have access to anything
that will not run on windows, so give it a go and see what it breaks.

http://home.earthlink.net/~bootnic/JavascriptCenterFloatII.html

 

[dorayme]

news: (e-mail address removed)
[snip]

http://home.earthlink.net/~bootnic/JavascriptCenterFloat.html

This is not centering the mass of thumbnails in Safari:

<http://members.optushome.com.au/droovies/pics/inSafari.png>

In FF it works well.

In iCab it half works. (It plays silly buggers at some window
widths).

Another go with a different approach. I don't have access to anything
that will not run on windows, so give it a go and see what it breaks.

http://home.earthlink.net/~bootnic/JavascriptCenterFloatII.html

As before really, it works fast and furiously in FF, I assume it
works in Windows (I have my Winbox off now). But, I am afraid
that in Safari, the screenshot I made before pretty well applies
again.

 

[dorayme]

http://home.earthlink.net/~bootnic/JavascriptCenterFloatII.html

I would have to make you a movie to demo what happens in iCab!
After loading and the JS kicks in, all the material disappears
leaving the wrapper border only beautifully visible and centered
(not that you can get to see the top _and_ bottom borders
together in a screenfull)

 

[BootNic]

news: (e-mail address removed)


I would have to make you a movie to demo what happens in iCab!
After loading and the JS kicks in, all the material disappears
leaving the wrapper border only beautifully visible and centered
(not that you can get to see the top _and_ bottom borders
together in a screenfull)

Added a display toggle at the end of the function, that use to work on
some of the older mozilla browsers. I have no clue if it will do anything
for iCab.

--
BootNic Saturday, April 07, 2007 3:53 AM

"So tell me, just how long have you had this feeling that no one is
watching you?"
*Christopher Locke: Entropy Gradient Reversals*

 

[dorayme]

Added a display toggle at the end of the function, that use to work on
some of the older mozilla browsers. I have no clue if it will do anything
for iCab.

Still no go in Safari.

 

[Jonathan N. Little]

news: (e-mail address removed)
[snip]

http://home.earthlink.net/~bootnic/JavascriptCenterFloat.html

Looked nice, seemed to work in IE, but while I was testing scaling the
window did hang IE on my Win2K box... Not sure what happened.