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 'crossFadeDurat ion'
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.styl e.filter="blend Trans(duration= 2)";
document.images .SlideShow.styl e.filter="blend Trans(duration= crossFadeDurati on)";

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

I bet what the author meant was

document.images .SlideShow.styl e.filter="blend Trans(duration= "+crossFadeDura tion+")";

[David Graham]

<bw****@gmail.c om> wrote in message
news:11******** **************@ g44g2000cwa.goo glegroups.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.styl e.filter="blend Trans(duration= 2)";
document.images .SlideShow.styl e.filter="blend Trans(duration= crossFadeDurati o
n)";
The first line would just set it to 2 seconds, but immediately the
second line overrides the value with string "crossFadeDurat ion" (as
opposed to value of variable crossFadeDurati on).

I bet what the author meant was

document.images .SlideShow.styl e.filter="blend Trans(duration= "+crossFadeDura t
ion+")";

Thanks for that. I commented out the line that seems to make the the filter
equal to the string "crossFadeDurat ion" 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.styl e.filter="blend Trans(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.c om> wrote in message
news:11******** **************@ g44g2000cwa.goo glegroups.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.styl e.filter="blend Trans(duration= 2)";

document.images .SlideShow.styl e.filter="blend Trans(duration= crossFadeDurati o
n)";

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

I bet what the author meant was

document.images .SlideShow.styl e.filter="blend Trans(duration= "+crossFadeDura t
ion+")";

Thanks for that. I commented out the line that seems to make the the filter
equal to the string "crossFadeDurat ion" 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.styl e.filter="blend Trans(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.c om> wrote in message
news:11******** **************@ g44g2000cwa.goo glegroups.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.styl e.filter="blend Trans(duration= 2)";

document.images .SlideShow.styl e.filter="blend Trans(duration= crossFadeDurati o
n)";

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

I bet what the author meant was

document.images .SlideShow.styl e.filter="blend Trans(duration= "+crossFadeDura t
ion+")";

Thanks for that. I commented out the line that seems to make the the filter
equal to the string "crossFadeDurat ion" 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.styl e.filter="blend Trans(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 crossFadeDurati on = 20;
(20 seconds) and slide changes in 3s, the pic changes -again- long
before the transition becomes somehow visible. crossFadeDurati on should
be less than 1000*slideShowS peed. 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
"crossFadeDurat ion" 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(dur ation=crossFade Duration)"; line (leaving the "1" above)
and see if it speeds up. It should.

[David Graham]

<bw****@gmail.c om> wrote in message
news:11******** *************@g 43g2000cwa.goog legroups.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 crossFadeDurati on = 20;
(20 seconds) and slide changes in 3s, the pic changes -again- long
before the transition becomes somehow visible. crossFadeDurati on should
be less than 1000*slideShowS peed. 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
"crossFadeDurat ion" 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(dur ation=crossFade Duration)"; 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.c om> wrote in message
news:11******** *************@g 43g2000cwa.goog legroups.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 crossFadeDurati on = 20;
(20 seconds) and slide changes in 3s, the pic changes -again- long
before the transition becomes somehow visible. crossFadeDurati on should
be less than 1000*slideShowS peed. 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
"crossFadeDurat ion" 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(dur ation=crossFade Duration)"; 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.getEle mentById() ) 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.SlideSho w.width), you'd get 250. If you did
document.images .SlideShow.heig ht=300; the image would likely get
stretched vertically, about doubling in height. By doing
document.images .SlideShow.src= "http://www.google.com/logos/winter_holiday0 5_2res.gif";
you'll change the pic to current Google logo by simply changing the src
tag.

[cwdjrxyz]

bw****@gmail.co m wrote:

Noticed the if(document.all ) ?
Only MSIE uses document.all (all the others use
gocument.getEle mentById() ) 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.