Centering

[Ben C]

news: (e-mail address removed)

news: (e-mail address removed)
[snip] Righto, I have now incorporated Bootnic's js into the design
because it looked promising on Bootnic's url in Window IE.

If you're not using a border the it should be fine without the
overflow, or you could change it to hidden to remove the scroll bars.

Just another note to add, I have found that using your original
js, (unaltered by me) with the new wrapper css is also good for
Safari re scrollbars; in other words, longer do I get unwanted
scrollbars with the original js now in Safari.

Safari has an issue with the float, I have not been successful in
researching it, a float that contains floats, does not seem to shrink.

I haven't been following how you're doing the centering, so I'm not sure
if this is what you're talking about, but an auto-width float that
contains a lot of smaller floats (enough that they need to flow
underneath each other) should occupy the whole available width.

 

[dorayme]

news: (e-mail address removed)

news: (e-mail address removed)
[snip] Righto, I have now incorporated Bootnic's js into the design
because it looked promising on Bootnic's url in Window IE.

If you're not using a border the it should be fine without the
overflow, or you could change it to hidden to remove the scroll bars.

Just another note to add, I have found that using your original
js, (unaltered by me) with the new wrapper css is also good for
Safari re scrollbars; in other words, longer do I get unwanted
scrollbars with the original js now in Safari.

Safari has an issue with the float, I have not been successful in
researching it, a float that contains floats, does not seem to shrink. I
do not have access to Safari, so this is just a guess from the little
information I was able to find, and what appeared to be the case from
browserShots.

That is the part of the script that was added to compare a caudated width
with a float with.

Currently the script checks both all the time, the script could be greatly
improved if someone with Safari would be able to create a quick test
for the float width issue and save that in a variable, and then use just one
method or the other to do the centering.

I hope I did not mislead you. When I said that your original js
was working fine too, I meant (I am sure this was not clear, my
bad) simply that your latest version (after the original trouble
with your first offering) works for me in Safari and other
browsers whether or not I remove the bits about the overflow.
That was all. I have removed them still but I will also put up a
version where they are left in shortly for anyone interested in
this stuff to compare the effects.

You know, of course, that I do not float the wrapper in any of
the 3 pages. The only floats are the little divs containing the
pics and captions.

 

[dorayme]

Still seems to hang IE6. Interestingly enough it only seems to crash the
IE component and not the whole shell... but it does hang it if you
change the window size just a couple of times.

It does not hang IE 5.5 or 5.01, but it doesn't work either. IE5x does
work in mine either, the css causes those browsers to stack all the
thumbs in a single column!

I am surprised to hear this, especially since i just started my
Winbox, and it is Win2000 as it happens (like yours) and

http://tinyurl.com/2a434t

is as robust as can be in IE 6. No matter what i do it works and
I have never been to this address on this machine since I made
it. I can resize windows, restart them, everything without a
hitch.

So, I am a little puzzled now as to what to do. Before I remove
the bootnic.js I need to see some trouble for myself, just a
little glimpse, a taste. For all that I can see and test, it is
as stable as anything. I do not doubt you Jonathan, I am
wondering if there is any issue with your machine?

As I said to Bootnic, I will add three more pages to duplicate
what is at the above address but this time with the lines about
overflow (in the linked bootnic.js) that I deleted.

Shortly.

 

[dorayme]

I haven't been following how you're doing the centering, so I'm not sure
if this is what you're talking about, but an auto-width float that
contains a lot of smaller floats (enough that they need to flow
underneath each other) should occupy the whole available width.

Are you seeing any visual problem in any of your browsers (I know
you have no IE) at

http://tinyurl.com/2a434t

Do the mass of the little boxes center ok? Does anything become a
problem when you resize or do anything to your browser windows on
any of your browsers?

 

[dorayme]

Still seems to hang IE6. Interestingly enough it only seems to crash the
IE component and not the whole shell... but it does hang it if you
change the window size just a couple of times.

It does not hang IE 5.5 or 5.01, but it doesn't work either. IE5x does
work in mine either, the css causes those browsers to stack all the
thumbs in a single column!

Here is anther url, in which I have restored the line that I
deleted about overflow from bootnic.js.

http://tinyurl.com/2qfy35

The previous url was: http://tinyurl.com/2a434t

You can toggle between the two versions by simply adding a 1 or
removing it at the end of the "original non tinyurl" before the
..html

 

[dorayme]

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

OK, thanks, what about now that I have added:

#wrapper {border: 1px solid #fff; padding:3px;}

to the css? Can the border be simply border:0 or do "px" have to
be mentioned for these popular browsers?

Just border-width:0; would do. Just to change the default that a
browser may have set such as IE has, maybe others as well.

OK.

Most browsers only use the part of the script to calculate the width to
compare it to the float width, but if the border is not set then the
script halts at the error and no centering takes place.

In the my example III, I added a visual aid to see which centering
method was being used, named pass and fail. The default text was set
to black, the pass class color was set to blue, and the fail color was set
to red. I use that so it would show up on browserShots for the browsers
I did not have access to.

if(w<=check+10){w=w+'px';wrap.className='pass'}
else {w=check+'px';wrap.className='fail'}

In the above snip of code it would be safe to remove the className
part of the script.

wrap.className='pass'
wrap.className='fail'

OK

The overflow part of the script was used to drag the #wrapper down
to enclose all the floats, If you're not setting a different background color,
background image or a visible border, they can remain omitted.

I can experiment later with this. I am not using a different
background for now, enough complications already! I will be well
pleased when everyone is having as little trouble as I am with
your js. It is working on all my browsers really well, also in
Win IE6 and also in IE 7 on a Vista machine.

I have even implemented this on a real thumbnail/enlargement set
of pages and ditto the success that I am seeing (no new
principles are involved to the demos in the urls here)

 

[BootNic]

news: (e-mail address removed)


I haven't been following how you're doing the centering, so I'm not
sure if this is what you're talking about, but an auto-width float
that contains a lot of smaller floats (enough that they need to flow
underneath each other) should occupy the whole available width.

That is what I thought Safari was doing, where the other browsers that
I have do not, they all shrink it.

 

[BootNic]

news: [email protected] [snip]
Still seems to hang IE6. Interestingly enough it only seems to crash
the IE component and not the whole shell... but it does hang it if you
change the window size just a couple of times.

[snip]

I have not been able to produce a hang in IE 6, but I made a few
changes to
http://home.earthlink.net/~bootnic/JavascriptCenterFloatIII.html

Put as much as I thought I could in variables. Added a second function
that calls a timeout to reduce how many time the main function is
called.

If this one hangs IE 6, I have no other ideals how to solve it.

--
BootNic Monday, April 09, 2007 7:38 PM

If you can learn from hard knocks, you can also learn from soft
touches.
*Carolyn Kenmore*

 

[BootNic]

news: (e-mail address removed)
I can experiment later with this. I am not using a different
background for now, enough complications already! I will be well
pleased when everyone is having as little trouble as I am with
your js. It is working on all my browsers really well, also in
Win IE6 and also in IE 7 on a Vista machine.

I have even implemented this on a real thumbnail/enlargement set
of pages and ditto the success that I am seeing (no new
principles are involved to the demos in the urls here)

I just replaced the script you were using with what I hope to be a
improved version.
http://home.earthlink.net/~bootnic/JavascriptCenterFloatIII.html

I replaced the file rather then creating another page. I believe that the
new version is more efficient and does not get called as much.

Really noticeable on FireFox on winxp, does not resize the content until
I let go of the mouse button.

 

[dorayme]

news: [email protected] [snip]
Still seems to hang IE6. Interestingly enough it only seems to crash
the IE component and not the whole shell... but it does hang it if you
change the window size just a couple of times.

[snip]

I have not been able to produce a hang in IE 6, but I made a few
changes to
http://home.earthlink.net/~bootnic/JavascriptCenterFloatIII.html

Put as much as I thought I could in variables. Added a second function
that calls a timeout to reduce how many time the main function is
called.

If this one hangs IE 6, I have no other ideas how to solve it.

No, this latest does not work in Safari and in iCab has a severe
prob. It works fine in Opera and FF.

I would like to get more confirmation that your previous effort
had any problems. JL is on dial up, I wonder if this has anything
to do with it? On my broadband, one can someimes see just before
the js kicks in and things snap into place... perhaps there is a
delay that is causing trouble on his machine?

 

[Jonathan N. Little]

Are you seeing any visual problem in any of your browsers (I know
you have no IE) at

http://tinyurl.com/2a434t

Do the mass of the little boxes center ok? Does anything become a
problem when you resize or do anything to your browser windows on
any of your browsers?

Centers OKAY but still hangs IE6

 

[dorayme]

Centers OKAY but still hangs IE6

OK, but be nice to have some confirmation of this from not on
your machine, neither my Win2000 box nor a sp2 XP box 9 miles
from here on IE6 shows any hanging behaviour at all?

Did you try also:

http://tinyurl.com/2qfy35

where I restored something I snipped from bootnic.js ?

 

[BootNic]

news: (e-mail address removed)
[snip]
No, this latest does not work in Safari and in iCab has a severe
prob. It works fine in Opera and FF.

Opps. That was my error, according to browserShots the JS did not
fire in Safari, I can tell because the text was black, I was expecting
it to be red.

BrowserShots does not have iCab, but I would guess it was the same
thing.

Waiting for the photo to see.

I would like to get more confirmation that your previous effort
had any problems. JL is on dial up, I wonder if this has anything
to do with it? On my broadband, one can someimes see just before
the js kicks in and things snap into place... perhaps there is a
delay that is causing trouble on his machine?

I do not think it has anything to do with connection speed, its JS driven
after it loads.

--
BootNic Monday, April 09, 2007 8:53 PM

Good communication is as stimulating as black coffee and just as hard
to sleep after.
*Anne Morrow Lindbergh*

 

[dorayme]

Opps. That was my error, according to browserShots the JS did not
fire in Safari, I can tell because the text was black, I was expecting
it to be red.

BrowserShots does not have iCab, but I would guess it was the same
thing.

In Safari it simply does not centre, the text is black. In iCab
now it is centering, the text is blue.

Apart from what was happening on Jonathan's Win2000 box, do you
see anything to suggest that:

either:

http://tinyurl.com/2a434t

or:

http://tinyurl.com/2qfy35

were not good?

 

[BootNic]

news: (e-mail address removed)


In Safari it simply does not centre, the text is black. In iCab
now it is centering, the text is blue.

Fixed the issue I think.

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

Apart from what was happening on Jonathan's Win2000 box, do you
see anything to suggest that:

IE fires the function more then once each time it's called, IE 6 2 or 3 time
IE 7 seems to be always 2 times.

The original script looked up the left and right margin and padding on
two elements each and ever time the script was fired. Looked up the
first div in #wrapper. Perhaps a few others that I can't recall at the
moment.

The latest version only looks them up the first time, and saves them in
a variable.

The original version would fire as many times as the browser called it,
for IE this could be a real problem, which I think is the issue, along with
all that looking up it had to do.

The latest version now calls a different function that sets a timeout. If
the function is called again before the time is up, it just resets the timeout
and saves a function call.

Added a document width check, checks the width since the last time
the function was called, if the width has not changed then it does not
call the function, no need to call it if only the height has changed.

All of these fixes, I would hope, increase the performance of the
script, and reduce the load on the browser.

I just hope I fixed a few things and not created more issues.

either:

http://tinyurl.com/2a434t

or:

http://tinyurl.com/2qfy35

were not good?

No, they appear to be fine on my system.

In-fact I was able to simply replace the js link with the new version and
worked just fine as well. No page edit at all except the js link.

http://home.earthlink.net/~bootnic/bsIV.js

--
BootNic Monday, April 09, 2007 10:20 PM

Don't worry about people stealing an idea. If it's original, you will
have to ram it down their throats.
*Howard Aiken*

 

[dorayme]

news: (e-mail address removed)


In Safari it simply does not centre, the text is black. In iCab
now it is centering, the text is blue.

Fixed the issue I think.

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

Apart from what was happening on Jonathan's Win2000 box, do you
see anything to suggest that:

IE fires the function more then once each time it's called, IE 6 2 or 3 time
IE 7 seems to be always 2 times.

OK, I trust the latest is more efficient even though the greater
efficiency is not evident in practice on my machines, for some
time your js has acted beaut anyway. Now in Safari, it is fine
with the latest too.

either:

http://tinyurl.com/2a434t

or:

http://tinyurl.com/2qfy35

were not good?

No, they appear to be fine on my system.

In-fact I was able to simply replace the js link with the new version and
worked just fine as well. No page edit at all except the js link.

http://home.earthlink.net/~bootnic/bsIV.js

OK. Let me add a third URL now of my three files with your latest
which all work equally fine on all browsers on my Mac. Safari is
fine now too with this latest, also iCab. Whichever way you look
at it, you have done extremely well and until CSS3, your js will
spread far and wide.

http://tinyurl.com/yplj5d

 

[Jonathan N. Little]

OK, but be nice to have some confirmation of this from not on
your machine, neither my Win2000 box nor a sp2 XP box 9 miles
from here on IE6 shows any hanging behaviour at all?

Did you try also:

http://tinyurl.com/2qfy35

where I restored something I snipped from bootnic.js ?

No problemo...

 

[Ben C]

Are you seeing any visual problem in any of your browsers (I know
you have no IE) at

http://tinyurl.com/2a434t

Do the mass of the little boxes center ok? Does anything become a
problem when you resize or do anything to your browser windows on
any of your browsers?

It works fine on Konqueror, Opera and Firefox. But I see the JS checks
for window.addEventListener, but not for document.addEventListener. I'm
not sure whether it should or not.

 

[BootNic]

news: (e-mail address removed)


It works fine on Konqueror, Opera and Firefox. But I see the JS checks
for window.addEventListener, but not for document.addEventListener.
I'm not sure whether it should or not.

That is not correct, that is the kind of mistake I make for trying to
type from a memory and auto select.

It should have been like Jonathan N. Littles snip and needs to be
corrected.

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

Tuck this away in a code snip so next time I make this mistake I may
be able to recognize it.

--
BootNic Tuesday, April 10, 2007 2:22 PM

Happiness for the average person may be said to flow largely from
common sense - adapting one-self to circumstances - and a sense of
humor.
*Beatrice Lillie (1898-1989) English comedienne*

 

[dorayme]

That is not correct, that is the kind of mistake I make for trying to
type from a memory and auto select.

It should have been like Jonathan N. Littles snip and needs to be
corrected.

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

Tuck this away in a code snip so next time I make this mistake I may
be able to recognize it.

Things move fast. http://tinyurl.com/2a434t was superseded by:

http://tinyurl.com/yplj5d

in which I put in what I call bootnic4.js (the latest I had).
Are the above changes to be incorporated into this latest? And
how quite is the incorporation to go in http://tinyurl.com/yplj5d?

Should the lines:

if( window.addEventListener ) {
window.addEventListener('load',checkCenter,false);
window.addEventListener('resize',checkCenter,false);
} else if( document.addEventListener ) {
document.addEventListener('load',checkCenter,false);
document.addEventListener('resize',checkCenter,false);
} else if( window.attachEvent ) {
window.attachEvent("onload", checkCenter);
window.attachEvent("onresize", checkCenter);
}

be _replaced_ by your above?