Slideshow problem

F

Freightliner

Hi,

when my pages load, the first picture (img1) of the set of 3 pics I
use for a slideshow, displays for 8 seconds instead 4. See code below.
Thanks for help.


<head>
....
var img1=new Image()
img1.src="images/mypic1.jpg"
var img2=new Image()
img2.src="images/mypic2.jpg"
var img3=new Image()
img3.src="images/mypic3.jpg"
....

<body ... onLoad=" slideit()">

....
<img src="images/mypic1.jpg" name="slide"
style="filter:blendTrans(duration=2)" border = 1
style="filter:blendTrans(duration=2)" width="360" height="270">

....

<script>
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.blendTrans.play()
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",4000)
}
//-->
</script>
 
D

Doug Gunnoe

Hi,

when my pages load, the first picture (img1) of the set of 3 pics I
use for a slideshow, displays for 8 seconds instead 4. See code below.
Thanks for help.

<head>
...
var img1=new Image()
img1.src="images/mypic1.jpg"
var img2=new Image()
img2.src="images/mypic2.jpg"
var img3=new Image()
img3.src="images/mypic3.jpg"
...

<body ... onLoad=" slideit()">

...
<img src="images/mypic1.jpg" name="slide"
style="filter:blendTrans(duration=2)" border = 1
style="filter:blendTrans(duration=2)"  width="360" height="270">

...

<script>
<!--
   var step=1
   var whichimage=1
   function slideit(){
     if (!document.images)
       return
     if (document.all)
       slide.filters.blendTrans.play()
       whichimage=step
     if (step<3)
       step++
     else
       step=1
  setTimeout("slideit()",4000)
  }
//-->
</script>
Click to expand...

So this is only good in IE?

This is what happens IMO
1. (in IE) slide.filters.blendTrans.play()
2. whichimage=1
3. step = 2
4. slide.filters.blendTrans.play() //and here still whichimage=1
5. whichimage = 2

you play 1 twice.
 
R

RobG

Hi,

when my pages load, the first picture (img1) of the set of 3 pics I
use for a slideshow, displays for 8 seconds instead 4. See code below.
Thanks for help.

<head>
...
var img1=new Image()
img1.src="images/mypic1.jpg"
var img2=new Image()
img2.src="images/mypic2.jpg"
var img3=new Image()
img3.src="images/mypic3.jpg"
...

<body ... onLoad=" slideit()">

...
<img src="images/mypic1.jpg" name="slide"
style="filter:blendTrans(duration=2)" border = 1
style="filter:blendTrans(duration=2)" width="360" height="270">

...

<script>
Click to expand...

Don't for get the type attribute.
<!--
Click to expand...

Don't use HTML comment delimiters inside script elements. They serve
no useful purpose and can be harmful.

var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
Click to expand...

Why test for a feature that you don't use?

if (document.all)
slide.filters.blendTrans.play()
Click to expand...

And again - your code as written will simply error in most browsers
other than IE, and not run in browsers that support filters but not
IE's habbit of making names and IDs global variables.

If you want to see if the browser supports filters, and use the images
collection that you tested for, why not something like:


if (document.images) {
var img = images[0];
if (img.filters &&
img.filters.blendTrans &&
img.filters.blendTrans.play) {
img.filters.blendTrans.play();


Of course you would refactor that to only do the feature test once
(and to get rid of the global variables), but hopefully you get the
idea.

whichimage=step
if (step<3)
step++
else
step=1
Click to expand...

You can also refactor the if..else to something like:

step = (++step % images.length);
 
F

Freightliner

Don't for get the type attribute.
Click to expand...

What type attribute?

Don't use HTML comment delimiters inside script elements.  They serve
no useful purpose and can be harmful.
OK




Why test for a feature that you don't use?
Click to expand...

I dont know. I am a beginner in JS.
What should I do to avoid the 1st image to played twice?
 
F

Freightliner

That one required since HTML 4.0, e.g.:

  <script type="text/javascript">

See the results ofhttp://validator.w3.org/applied to your document.
Click to expand...

Thanks a lot.

What is the difference between this tag you wrote and:
<!-- script language="JavaScript1.1" -->

(besides the 2nd does not pass the validator)

thanks
 
T

Thomas 'PointedEars' Lahn

Freightliner said:
Thanks a lot.

What is the difference between this tag you wrote and:
<!-- script language="JavaScript1.1" -->

(besides the 2nd does not pass the validator)
Click to expand...

The tag that I wrote is the start tag of a `script' element that contains
JavaScript code. What you wrote is an empty declaration with a comment
(short: a comment declaration), and I doubt that it did not pass validation
as-is.

You should ask further general HTML questions in
comp.infosystems.www.authoring.html after you have read the
available references, such as http://www.w3.org/TR/html4/


PointedEars
 
F

Freightliner

The tag that I wrote is the start tag of a `script' element that contains
JavaScript code.  What you wrote is an empty declaration with a comment
(short: a comment declaration), and I doubt that it did not pass validation
as-is.
Click to expand...

Sorry I forgot to uncomment it before to copy it in here.

<script language="JavaScript1.1">
 
T

Thomas 'PointedEars' Lahn

Freightliner said:
Freightliner said:
[...] Thomas 'PointedEars' Lahn [...] wrote:
That one required since HTML 4.0, e.g.:
<script type="text/javascript">
See the results ofhttp://validator.w3.org/appliedto your document.
Thanks a lot.
What is the difference between this tag you wrote and:
<!-- script language="JavaScript1.1" -->
(besides the 2nd does not pass the validator)
Click to expand...
The tag that I wrote is the start tag of a `script' element that contains
JavaScript code. What you wrote is an empty declaration with a comment
(short: a comment declaration), and I doubt that it did not pass validation
as-is.
Click to expand...

Sorry I forgot to uncomment it before to copy it in here.

<script language="JavaScript1.1">
Click to expand...

The difference between what I wrote and this is that what I wrote is Valid,
while what you wrote is not Valid (the `type' attribute is declared
#REQUIRED in the DTD, but missing here), and the `language' attribute value
may also modify the behavior of certain script engines ("JavaScript1.2" is
defined to modify the behavior of the JavaScript script engine of Netscape
Navigator 4.x).


PointedEars
 
F

Freightliner

Freightliner said:
Freightliner wrote:
[...] Thomas 'PointedEars' Lahn [...] wrote:
That one required since HTML 4.0, e.g.:
  <script type="text/javascript">
See the results ofhttp://validator.w3.org/appliedtoyour document.
Thanks a lot.
What is the difference between this tag you wrote and:
<!-- script language="JavaScript1.1" -->
(besides the 2nd does not pass the validator)
The tag that I wrote is the start tag of a `script' element that contains
JavaScript code.  What you wrote is an empty declaration with a comment
(short: a comment declaration), and I doubt that it did not pass validation
as-is.
Click to expand...
Click to expand...
Sorry I forgot to uncomment it before to copy it in here.
Click to expand...
<script language="JavaScript1.1">
Click to expand...

The difference between what I wrote and this is that what I wrote is Valid,
while what you wrote is not Valid (the `type' attribute is declared
#REQUIRED in the DTD, but missing here
Click to expand...

Thank you.
I fixed the html and passed it thru the validator (actually I opened a
new thread), I only get one error on a <noscript> tag. Thanks for
help.
 
T

Thomas 'PointedEars' Lahn

Freightliner said:
Freightliner said:
[...] Thomas 'PointedEars' Lahn [...] wrote:
Freightliner wrote:
[...] Thomas 'PointedEars' Lahn [...] wrote:
That one required since HTML 4.0, e.g.:
<script type="text/javascript">
[...]
What is the difference between this tag you wrote and:
[...]
<script language="JavaScript1.1">
Click to expand...
The difference between what I wrote and this is that what I wrote is Valid,
while what you wrote is not Valid (the `type' attribute is declared
#REQUIRED in the DTD, but missing here
Click to expand...

Thank you.
I fixed the html and passed it thru the validator (actually I opened a
new thread), I only get one error on a <noscript> tag.
Click to expand...

It is possible that this is caused by your using the `noscript' element like
an inline-level element although it is in fact a block-level element. I
have made that particular mistake before, such as in <a href="foo"><script
type="text/javascript">bar said:
Thanks for help.
Click to expand...

You're welcome.


PointedEars
 
F

Freightliner

It is possible that this is caused by your using the `noscript' element like
an inline-level element although it is in fact a block-level element.  I
have made that particular mistake before, such as in <a href="foo"><script
type="text/javascript">bar</script><noscript>baz</noscript></a>.
Click to expand...

Not sure I got what you mean.
How could I reposition the <noscript> ... </noscript> ?

thanks
 
T

Thomas 'PointedEars' Lahn

Freightliner said:
Not sure I got what you mean.
How could I reposition the <noscript> ... </noscript> ?
Click to expand...

....
<script type="text/javascript">
document.write('<a href="foo">' + 42 + 'bar<\/a>');
</script>
....
<noscript><a href="foo">baz</a></noscript>

However, my solution to the aforementioned problem was to use a Unicode
glyph instead of generating a special glyph from the Wingdings font, and
forego the script completely:

http://pointedears.de/ufpdb/idx-en (scroll to bottom)


PointedEars
 
F

Freightliner

Hi Thomas, my original problem wasn't solved. The first image still
displays twice.
I changed the script as follows:

<script language="JavaScript">

var slideShowSpeed = 3000;
var crossFadeDuration = 1;

var Pics = new Array();
Pics[0] = 'images/img1.jpg'
Pics[1] = 'images/img2.jpg'
Pics[2] = 'images/img3.jpg'
Pics[3] = 'images/img4.jpg'
Pics[4] = 'images/img5.jpg'

var t;
var j = 0;
var p = Pics.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pics;
}
function SlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('SlideShow()', slideShowSpeed);
}
</script>


thanks for help
 
D

Doug Gunnoe

Hi Thomas, my original problem wasn't solved. The first image still
displays twice.
I changed the script as follows:
Click to expand...

So is it still not working or does it work now that you changed it?

In the first one you posted there was a logic error.
1. (in IE) slide.filters.blendTrans.play()
2. whichimage=1
3. step = 2
4. slide.filters.blendTrans.play() //and here still whichimage=1
5. whichimage = 2
Click to expand...

The first two times you called play() 'whichimage' was equal to 1.

Now it seems that is no longer the problem.

the first time you do
document.images.SlideShow.src = preLoad[j].src;
Click to expand...

when j equals 0

then you increment
j = j + 1;
Click to expand...

this can be written
j++;
Click to expand...

so the next time you do
document.images.SlideShow.src = preLoad[j].src;
Click to expand...

j equals 1

when j equals 5, then j = 0
if (j > (p - 1)) j = 0;
Click to expand...

So you start over. As far as that part is concerned, I don't see a
problem.

But to be honest, I'm not sure what the Play() function is doing.

When you set the image "document.images.SlideShow.src =
preLoad[j].src;" when j = 0, then call the Play function, is the play
function suppose to do some kind of fade out on this image?
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDurati­on)";
document.images.SlideShow.filters.blendTrans.Apply();
Click to expand...

^ why do you do this over and over? This should go before the function
slideshow
 
T

Thomas 'PointedEars' Lahn

Doug said:
But to be honest, I'm not sure what the Play() function is doing.
Click to expand...

The Play() (or play()) method of a filter object causes the layout changes
made since the last call of the Apply() (or apply()) method of that object
to take effect as specified by the parameters of the filter.
When you set the image "document.images.SlideShow.src =
preLoad[j].src;" when j = 0, then call the Play function, is the play
function suppose to do some kind of fade out on this image?
Click to expand...

Yes, it is. http://msdn2.microsoft.com/en-us/library/ms532847.aspx#Transitions


HTH

PointedEars
 
F

Freightliner

Doug said:
But to be honest, I'm not sure what the Play() function is doing.
Click to expand...

The Play() (or play()) method of a filter object causes the layout changes
made since the last call of the Apply() (or apply()) method of that object
to take effect as specified by the parameters of the filter.
When you set the image "document.images.SlideShow.src =
preLoad[j].src;" when j = 0, then call the Play function, is the play
function suppose to do some kind of fade out on this image?
Click to expand...

Yes, it is.  http://msdn2.microsoft.com/en-us/library/ms532847.aspx#Transitions

HTH

PointedEars
Click to expand...


Is this new script robust code, supposed to work good under IE and
other browsers too?
I tested on FireFox and the fade effect in the slideshow does not
work...

Also, I still can't solve the problem with </noscript>, I get the
error
"document type does not allow element "NOSCRIPT" here; missing one of
"APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag"

This is the code that fails:

<script type="text/javascript" src="http://www.statcounter.com/counter/
counter_xhtml.js"></script>
<noscript><div class="statcounter"><a class="statcounter" href="http://
www.statcounter.com/"><img class="statcounter" src="http://
c37.statcounter.com/3339134/0/0a0fe623/1/" alt=""></a></div></
noscript>


Thank you both very much.
 
D

Doug Gunnoe

Is this new script robust code, supposed to work good under IE and
other browsers too?
I tested on FireFox and the fade effect in the slideshow does not
work...
Click to expand...

it will not work on any browsers but IE.

I believe the filters are all IE specific. Plus, when you test for
'document.all' that basically is the same as asking the question 'is
this IE?'.
Also, I still can't solve the problem with </noscript>, I get the
error
Click to expand...

Remove all that <noscript> nonsesne.

Here is the 2nd edition of a book I read many years ago (Actually I
read the first edition) that helped me with understanding the DOM and
other issues up to a reasonably competent level.

DHTML and CSS for the World Wide Web
Visual QuickStart Guide

http://www.booksamillion.com/ncom/books?id=4041422483665&isbn=0321199588

you need a little understanding of html and JavaScript, but it is a
quick read.
 
T

Thomas 'PointedEars' Lahn

Freightliner said:
Doug said:
But to be honest, I'm not sure what the Play() function is doing.
Click to expand...
The Play() (or play()) method of a filter object causes the layout changes
made since the last call of the Apply() (or apply()) method of that object
to take effect as specified by the parameters of the filter.
When you set the image "document.images.SlideShow.src =
preLoad[j].src;" when j = 0, then call the Play function, is the play
function suppose to do some kind of fade out on this image?
Click to expand...
Yes, it is. http://msdn2.microsoft.com/en-us/library/ms532847.aspx#Transitions
[...]
Click to expand...

Is this new script robust code, supposed to work good under IE
Yes.

and other browsers too?
Click to expand...

It should work in all MSHTML-based browsers. Netscape 8+ can use MSHTML or
Gecko for rendering; but note that Netscape is no longer actively developed.
I tested on FireFox and the fade effect in the slideshow does not
work...
Click to expand...

Works as designed.
Also, I still can't solve the problem with </noscript>, I get the
error
"document type does not allow element "NOSCRIPT" here; missing one of
"APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag"

This is the code that fails:

<script type="text/javascript" src="http://www.statcounter.com/counter/
counter_xhtml.js"></script>
<noscript><div class="statcounter"><a class="statcounter" href="http://
www.statcounter.com/"><img class="statcounter" src="http://
c37.statcounter.com/3339134/0/0a0fe623/1/" alt=""></a></div></
noscript>
Click to expand...

Probably your `noscript' element is the descendant of an inline element like
`span'. And unless your posting agent is broken, there MUST NOT be
whitespace after the `/' of `</noscript>' or of any other end tag.


PointedEars
 
F

Freightliner

I believe the filters are all IE specific. Plus, when you test for
'document.all' that basically is the same as asking the question 'is
this IE?'.
Click to expand...

I wonder why they dont implement such test in a new JS release...

Remove all that <noscript> nonsesne.
Click to expand...

If I remove <noscript> and </noscript> I get a little - but, still
visible - pixel, where the layer is.

you need a little understanding of html and JavaScript,
Click to expand...

That, for sure. Thanks.
BTW, this is the website: www.roberto089.com
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Slideshow not working properly 2
Help to randomize slideshow in this script 6
making slideshow images blend and rotate 2
Array slideshow problem 7
Timing problem 4
Javascript slideshow 0
How do I place a dynamic value in the HREF 10
Help with Visual Lightbox: Scripts 2

Members online

Total: 25 (members: 2, guests: 23)
Robots: 432

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top