slideshow question

[David Graham]

Hi
New to javascript. I'm trying to understand how a script at a website I come
across works.
http://www.BRPPISAFETY.COM
Nearly got it but I have changed the variable called 'crossFadeDuration'
to large numbers and small numbers but it doesn't seem to do anything. Could
someone explain what effect changing this variable should bring about and
why don't I see any changes.
many thanks
David

[bwucke]

it attempts to use Microsoft's proprietary filters (CSS extension) in
MSIE.
Using document.all it detects Explorer, then sets up changing the
image with the filters and starts it, setting up the transformation
duration parameter to the value given. If no MSIE is detected it just
flips images, disregarding all the filters part. But it seems it's
broken.

The piece:

document.images.SlideShow.style.filter="blendTrans (duration=2)";
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)";

The first line would just set it to 2 seconds, but immediately the
second line overrides the value with string "crossFadeDuration" (as
opposed to value of variable crossFadeDuration).

I bet what the author meant was

document.images.SlideShow.style.filter="blendTrans (duration="+crossFadeDuration+")";

[David Graham]

<bw****@gmail.com> wrote in message
news:11**********************@g44g2000cwa.googlegr oups.com...

it attempts to use Microsoft's proprietary filters (CSS extension) in
MSIE.
Using document.all it detects Explorer, then sets up changing the
image with the filters and starts it, setting up the transformation
duration parameter to the value given. If no MSIE is detected it just
flips images, disregarding all the filters part. But it seems it's
broken.

The piece:

document.images.SlideShow.style.filter="blendTrans (duration=2)";
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuratio
n)";
The first line would just set it to 2 seconds, but immediately the
second line overrides the value with string "crossFadeDuration" (as
opposed to value of variable crossFadeDuration).

I bet what the author meant was

document.images.SlideShow.style.filter="blendTrans (duration="+crossFadeDurat
ion+")";

Thanks for that. I commented out the line that seems to make the the filter
equal to the string "crossFadeDuration" and put your line in. What happens
now is there is no fade between images, it just show one image for 3 seconds
and then suddenly (no fade transition) flips to the other image for 3
seconds and so on. I then put the script back to how the author had it and
commented out the line
document.images.SlideShow.style.filter="blendTrans (duration=2)";
and to my surprise it still has a 2 second fade between one image melting
away and the other fading in! (Each image is on screen for 3 seconds)
Any idea why your answer which looks good doesn't solve the mystery.
Thanks for the help
David

[cwdjrxyz]

David Graham wrote:

<bw****@gmail.com> wrote in message
news:11**********************@g44g2000cwa.googlegr oups.com...

it attempts to use Microsoft's proprietary filters (CSS extension) in
MSIE.
Using document.all it detects Explorer, then sets up changing the
image with the filters and starts it, setting up the transformation
duration parameter to the value given. If no MSIE is detected it just
flips images, disregarding all the filters part. But it seems it's
broken.

The piece:

document.images.SlideShow.style.filter="blendTrans (duration=2)";

document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuratio
n)";

The first line would just set it to 2 seconds, but immediately the
second line overrides the value with string "crossFadeDuration" (as
opposed to value of variable crossFadeDuration).

I bet what the author meant was

document.images.SlideShow.style.filter="blendTrans (duration="+crossFadeDurat
ion+")";

Thanks for that. I commented out the line that seems to make the the filter
equal to the string "crossFadeDuration" and put your line in. What happens
now is there is no fade between images, it just show one image for 3 seconds
and then suddenly (no fade transition) flips to the other image for 3
seconds and so on. I then put the script back to how the author had it and
commented out the line
document.images.SlideShow.style.filter="blendTrans (duration=2)";
and to my surprise it still has a 2 second fade between one image melting
away and the other fading in! (Each image is on screen for 3 seconds)
Any idea why your answer which looks good doesn't solve the mystery.
Thanks for the help
David

[cwdjrxyz]

David Graham wrote:

<bw****@gmail.com> wrote in message
news:11**********************@g44g2000cwa.googlegr oups.com...

it attempts to use Microsoft's proprietary filters (CSS extension) in
MSIE.
Using document.all it detects Explorer, then sets up changing the
image with the filters and starts it, setting up the transformation
duration parameter to the value given. If no MSIE is detected it just
flips images, disregarding all the filters part. But it seems it's
broken.

The piece:

document.images.SlideShow.style.filter="blendTrans (duration=2)";

document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuratio
n)";

The first line would just set it to 2 seconds, but immediately the
second line overrides the value with string "crossFadeDuration" (as
opposed to value of variable crossFadeDuration).

I bet what the author meant was

document.images.SlideShow.style.filter="blendTrans (duration="+crossFadeDurat
ion+")";

Thanks for that. I commented out the line that seems to make the the filter
equal to the string "crossFadeDuration" and put your line in. What happens
now is there is no fade between images, it just show one image for 3 seconds
and then suddenly (no fade transition) flips to the other image for 3
seconds and so on. I then put the script back to how the author had it and
commented out the line
document.images.SlideShow.style.filter="blendTrans (duration=2)";
and to my surprise it still has a 2 second fade between one image melting
away and the other fading in! (Each image is on screen for 3 seconds)
Any idea why your answer which looks good doesn't solve the mystery.
Thanks for the help

Sorry about the previous post that got away without any text!

You might be interested in looking at the XML language SMIL which is
designed for media presentations. This language has all sorts of
transitions, fades, etc built in. It requires a player on current
browsers, but it will work on all browsers that have the player
installed. The most recent Real players have nearly full support of W3C
SMIL2 built in, and these player are free to download from Real. There
are other players, some free and some not. Since many people do not
have a player capable of SMIL installed, SMIL often may not be the best
choice for a web page for the masses. However, in a network situation
where you have control of what is installed, it can be a very
attractive solution for media presentations. There is much information
about writing code in SMIL, with many examples, on the Real developer
site.

[bwucke]

> it just show one image for 3 seconds and then suddenly (no fade transition) flips to the other image for

3 seconds and so on.
Actually, it starts the transition, but since
var crossFadeDuration = 20;
(20 seconds) and slide changes in 3s, the pic changes -again- long
before the transition becomes somehow visible. crossFadeDuration should
be less than 1000*slideShowSpeed. Either increase one or lower the
other.
I then put the script back to how the author had it and commented out the line

and you deactivated the author's setting custom transition time of 2s
and instead let it fall back to MSIE built-in default of 2s. Same
happens in case of the original script, since text reading
"crossFadeDuration" is not a valid count of time in seconds, it falls
back to default of 2s.
Try changing in the original the "2" to "1" and see if it works faster.
It shouldn't. Then comment out the
"blendTrans(duration=crossFadeDuration)"; line (leaving the "1" above)
and see if it speeds up. It should.

[David Graham]

<bw****@gmail.com> wrote in message
news:11*********************@g43g2000cwa.googlegro ups.com...

it just show one image for 3 seconds and then suddenly (no fade transition) flips to the other image for 3 seconds and so on.
Actually, it starts the transition, but since
var crossFadeDuration = 20;
(20 seconds) and slide changes in 3s, the pic changes -again- long
before the transition becomes somehow visible. crossFadeDuration should
be less than 1000*slideShowSpeed. Either increase one or lower the
other.

I then put the script back to how the author had it and commented out

the line
and you deactivated the author's setting custom transition time of 2s
and instead let it fall back to MSIE built-in default of 2s. Same
happens in case of the original script, since text reading
"crossFadeDuration" is not a valid count of time in seconds, it falls
back to default of 2s.
Try changing in the original the "2" to "1" and see if it works faster.
It shouldn't. Then comment out the
"blendTrans(duration=crossFadeDuration)"; line (leaving the "1" above)
and see if it speeds up. It should.

Excellent help, it all works like you say.
Many thanks, this was a useful exercise for me.
David

[David Graham]

<bw****@gmail.com> wrote in message
news:11*********************@g43g2000cwa.googlegro ups.com...

it just show one image for 3 seconds and then suddenly (no fade transition) flips to the other image for 3 seconds and so on.
Actually, it starts the transition, but since
var crossFadeDuration = 20;
(20 seconds) and slide changes in 3s, the pic changes -again- long
before the transition becomes somehow visible. crossFadeDuration should
be less than 1000*slideShowSpeed. Either increase one or lower the
other.

I then put the script back to how the author had it and commented out

the line
and you deactivated the author's setting custom transition time of 2s
and instead let it fall back to MSIE built-in default of 2s. Same
happens in case of the original script, since text reading
"crossFadeDuration" is not a valid count of time in seconds, it falls
back to default of 2s.
Try changing in the original the "2" to "1" and see if it works faster.
It shouldn't. Then comment out the
"blendTrans(duration=crossFadeDuration)"; line (leaving the "1" above)
and see if it speeds up. It should.

One thing I meant to ask was about this code being proprietary for IE. How
do other browsers manage to do a simple swap of the images as an alternative
to the fade transition when they don't know this code?

[bwucke]

Noticed the if(document.all) ?
Only MSIE uses document.all (all the others use
gocument.getElementById() ) and so anything contained within this 'if'
is executed only on Explorer. And it's only about transformation, it's
not about -what- gets transformed. The proper image swapping sits
outside the if() so it gets performed by all browsers:

document.images.SlideShow.src = preLoad[j].src;

If you read the HTML, you see:

<td><img SRC="br-01-1.jpg" NAME="SlideShow" height=163 width=250></td>

document.images.SlideShow is the Javascript/DOM object that corresponds
directly to this image tag. They just overwrite its src parameter with
one of predefined ones. If you did
alert(document.images.SlideShow.width), you'd get 250. If you did
document.images.SlideShow.height=300; the image would likely get
stretched vertically, about doubling in height. By doing
document.images.SlideShow.src="http://www.google.com/logos/winter_holiday05_2res.gif";
you'll change the pic to current Google logo by simply changing the src
tag.

[cwdjrxyz]

bw****@gmail.com wrote:

Noticed the if(document.all) ?
Only MSIE uses document.all (all the others use
gocument.getElementById() ) and so anything contained within this 'if'
is executed only on Explorer.

In fact Opera can use document.all so that it can execute some IE-type
code, but of course the Opera design team prefers getElementById, which
is the current official notation.

Also keep in mind that there are several browsers out there that are
actually only slightly modified IE6, but that have their own name. A
few are Avant, MyIE2, and SBC/Yahoo DSL. Some AOL browsers also are
based on IE6.

[David Graham]

<cw******@yahoo.com> wrote in message
news:11*********************@g47g2000cwa.googlegro ups.com...

bw****@gmail.com wrote:

Noticed the if(document.all) ?
Only MSIE uses document.all (all the others use
gocument.getElementById() ) and so anything contained within this 'if'
is executed only on Explorer.

In fact Opera can use document.all so that it can execute some IE-type
code, but of course the Opera design team prefers getElementById, which
is the current official notation.

Also keep in mind that there are several browsers out there that are
actually only slightly modified IE6, but that have their own name. A
few are Avant, MyIE2, and SBC/Yahoo DSL. Some AOL browsers also are
based on IE6.

This newsgroup is really good - I have benfited from the knowledge you have
passed on.
David

[Randy Webb]

cw******@yahoo.com said the following on 12/22/2005 4:56 PM:

<snip>

Some AOL browsers also are based on IE6.

The AOL browser isn't based on a specific version of IE, it is a shell
of whatever version IE the user has installed at the time (Windows
only). So, if the user has IE4.0 and AOL9.0, the browser is based on
IE4. IE6.0 and AOL9.0, it is based on IE6.0. Its mostly IE but it has a
few features disabled that IE has, the most prominent would have to be
window.external as you can't script adding a bookmark in AOL.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/