468,530 Members | 1,551 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,530 developers. It's quick & easy.

Centering text screws up Javascript effect

BT
I have taken over the support of an existing webpage and I need to revise
the page so that it is centered (left and right) on the screen instead of
aligned on the left. I can do this easily, but there is a little JavaScript
that doesn't work correctly after I center it.

I have tried to realign the page with either <centertag or align="left"
attribute, but the pictures displayed with the JavaScript get messed up with
everything I've tried. Also, the JavaScript doesn't seem to work at all
when I view the page with Firefox 1.0.6.

It's relatively simple page; could someone offer a suggestion for centering
the text and keeping the pictures displayed correctly? Any idea why it
doesn't display the pictures right in Firefox?

thanks, the page is www.crhschoir.org
Nov 10 '06 #1
3 3419
On 2006-11-10, BT <no@xnono.comwrote:
I have taken over the support of an existing webpage and I need to revise
the page so that it is centered (left and right) on the screen instead of
aligned on the left. I can do this easily, but there is a little JavaScript
that doesn't work correctly after I center it.
I tried setting align="center" on the two top-level tables
(alternatively set style="margin: 0 auto" on them), and it seemed to
work OK in Firefox. What's the JavaScript problem?
I have tried to realign the page with either <centertag or align="left"
attribute, but the pictures displayed with the JavaScript get messed up with
everything I've tried. Also, the JavaScript doesn't seem to work at all
when I view the page with Firefox 1.0.6.
Looks like the problem is with the values you're assigning to
imgs.style.opacity, which should be a number between 0 and 1 not a
percentage.

Change

imgs.style.MozOpacity = 0 + '%';
imgs.style.MozOpacity = opacity + '%';

to

imgs.style.MozOpacity = 0;
imgs.style.MozOpacity = opacity / 100.0;
Nov 10 '06 #2
BT
Thanks for the assistance. I'm sure it is hard to see the problem without a
full page of images, etc to see. I went ahead and made the changes to align
the two top level tables so you could see them and posted the page as:

www.crhschoir.org/index-center.html

Here you can see that the set of fading images is not centered and it
partially overlies a static copy of one of the images that IS centered. The
code includes the fading images affected by the script as div id="img1"
and div id="img2" , but the static image is listed in the next line of
html. When it is on the left side of the page, the images overlay and you
never see the static one. I'm guessing this was set up for displaying the
static image to people who have javascript turned off. Still, it looks like
the javascript fading images are not centered and I still can't figure out
why.

Also, the fix for Firefox does get the images to fade in/out, but after a
complete cycle the two images flash back and forth 8 times in about 2
seconds. It doesn't flash like this in IE6.

Does the new posted file give you any more ideas?

thanks, BDT
"Ben C" <sp******@spam.eggswrote in message
news:sl*********************@bowser.marioworld...
On 2006-11-10, BT <no@xnono.comwrote:
>I have taken over the support of an existing webpage and I need to revise
the page so that it is centered (left and right) on the screen instead of
aligned on the left. I can do this easily, but there is a little
JavaScript
that doesn't work correctly after I center it.

I tried setting align="center" on the two top-level tables
(alternatively set style="margin: 0 auto" on them), and it seemed to
work OK in Firefox. What's the JavaScript problem?
>I have tried to realign the page with either <centertag or align="left"
attribute, but the pictures displayed with the JavaScript get messed up
with
everything I've tried. Also, the JavaScript doesn't seem to work at all
when I view the page with Firefox 1.0.6.

Looks like the problem is with the values you're assigning to
imgs.style.opacity, which should be a number between 0 and 1 not a
percentage.

Change

imgs.style.MozOpacity = 0 + '%';
imgs.style.MozOpacity = opacity + '%';

to

imgs.style.MozOpacity = 0;
imgs.style.MozOpacity = opacity / 100.0;

Nov 10 '06 #3
On 2006-11-10, BT <no@xnono.comwrote:
Thanks for the assistance. I'm sure it is hard to see the problem without a
full page of images, etc to see. I went ahead and made the changes to align
the two top level tables so you could see them and posted the page as:

www.crhschoir.org/index-center.html

Here you can see that the set of fading images is not centered and it
partially overlies a static copy of one of the images that IS centered. The
code includes the fading images affected by the script as div id="img1"
and div id="img2" , but the static image is listed in the next line of
html. When it is on the left side of the page, the images overlay and you
never see the static one. I'm guessing this was set up for displaying the
static image to people who have javascript turned off. Still, it looks like
the javascript fading images are not centered and I still can't figure out
why.
I see, I probably would have noticed that was the problem if I'd been
paying more attention.

Anyway, it's happening because #img1 and #img2 are absolutely positioned
at 198px left of their container (the body probably, something outside
the table anyway). So they stay put even when the table is centered.

The fix is to change

#img1 {position:absolute; width:572px; height:100px; left:198px; top:100px; z-index:1; visibility:hidden;}
#img2 {position:absolute; width:572px; height:100px; left:198px; top:100px; z-index:2}

to

#img1 {position:absolute; width:572px; height:100px; z-index:1; visibility:hidden;}
#img2 {position:absolute; width:572px; height:100px; z-index:2}

i.e. get rid of left and top. Then the images just get their "static"
position, which is inside the table cell where they belong.

If this proves unreliable in some browsers-- it works in FF, but I
haven't tried anything else-- which it may do as according to the spec
the UA is free to "guess" the static position for unspecified absolutely
positioned elements, make them both top: 0; left: 0 and wrap them in a
relatively positioned div where they appear in the table. i.e.:

<td width="572">
<div style="position: relative" <---- insert "wrapper" div
<div id="img1"...>

This way the relatively positioned div provides a container for the
absolutely positioned #img1 and #img2 to be positioned 0 from the top
and 0 from the left of, and itself sits in the table cell in the normal
way.
Also, the fix for Firefox does get the images to fade in/out, but after a
complete cycle the two images flash back and forth 8 times in about 2
seconds. It doesn't flash like this in IE6.
I'm not seeing that, the two images seem to interchange at a consistent
speed.

I do think it's nicer style though to take the call to setTimeout out of
FadeImg and replace it with a call to setInterval outside FadeImg.

i.e.

function main()
{
setInterval("FadeImg()", speed);
}
onload = main;

Don't know if it will make any difference.

This will mean editing below where it says reassuringly "You don't have
to edit below this line".
Nov 10 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

11 posts views Thread by Jeff Thies | last post: by
19 posts views Thread by George Ziniewicz | last post: by
7 posts views Thread by Erik Schulp | last post: by
15 posts views Thread by red | last post: by
3 posts views Thread by yawnmoth | last post: by
3 posts views Thread by John Pote | last post: by
9 posts views Thread by Neal | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by fmendoza | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.