1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I have a javascript "jpeg slideshow" that does not work in safari or chrome

Discussion in 'JavaScript' started by vr100, Jun 18, 2010.

0
  1. #1
    I have an "jpeg slideshow" of 29 jpeg images on a page created using Javascript. It works fine in Internet Explorer and Firefox but not Safari or Chrome. The jpeg files names are 01.jpg through to 29.jpg. Here below is the code in the header and the body. I work in the fashion industry where everyone tends to use MACs and their own browser, Safari. There is an error in there somewhere:


    Here is the page on the website: http://www.victorrossi.com/home.htm

    Here is the code (the Javascript enabled "jpeg slideshow" is where the trouble maybe):

    <html>
    <head>
    <title>Victor Rossi - Private Label and Couture</title>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <SCRIPT language="JavaScript" type="text/JavaScript">
    <!--
    var speed=1333;
    var counter=1;
    function rollPics() {
    document.display.src=counter+".jpg"; //Display image "counter".jpg
    counter ++; // Add 1 to counter
    if (counter>29) { // If counter is greater than 29 images then reset it
    counter=1
    }
    }
    <!-- END -->
    </SCRIPT>
    </head>
    <body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
    <center>
    <strong><img src="VR-logo.jpg" width="157" height="33"><br>
    <a href="home.htm">Home</a> |
    <a href="catalog.htm">Catalog</a> |

    <a href="gallery.htm">Fashion Gallery</a> |
    <a href="size.htm">Size Chart</a> |
    <a href="media.htm">In the Media</a> |
    <a href="about.htm">About Us</a> |
    <a href="contact.htm">Contact</a></strong></center>
    <p><hr width=50%><p><center>
    <table cellspacing=0 cellpadding=0 width="702" border=0>
    <tr>

    <td valign=top>
    <b><font color=#808080 size=3>Victor Rossi has evolved from its custom couture design roots into one of the world's most reliable design houses, private label
    manufacturers and global sourcing agents. Our combination of innovation, stellar craftsmanship, exceptional customer and client care are our hallmarks.</font>
    <IMG NAME="display" SRC="1.jpg" onLoad="setTimeout('rollPics()',1333)">
    <!-- the last number here is the delay in one thousandths of a second - you can change this-->
    <p><hr width=25%><p>
    </td></tr>
    <tr><td align=center>
    <p>
    <FORM METHOD=POST ACTION="http://us.1.p10.webhosting.yahoo.com/forms?login=singh100">
    <b><font color=#808080 size=3>Join the Victor Rossi mailing list !</b></font><br>
    <table border=0>
    <tr><td><font color=#808080>name:<BR>
    e-mail: <BR></td>

    <td><INPUT size=27 name="name"><br>
    <INPUT size=27 name="e-mail"></font></td></tr>
    <tr><td colspan=2 align=center><INPUT type=submit value="Submit to Victor Rossi">
    <INPUT NAME=subject TYPE=HIDDEN VALUE="e-mail list">
    <input type="hidden" name="required_fields" value="name,e-mail">
    <input type="hidden" name="next_url" value="http://victorrossi.com/thankyou.htm">
    </FORM>
    </td></tr>
    </table>
    </td></tr>
    </table>
    </center>
    </body>
    </html>
     
    vr100, Jun 18, 2010 IP
  2. tdemetri

    tdemetri Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    there are many things wrong with your page. if you try to validate it , you will see what i mean. therefore, browsers will interprret things quite differently,and get things wrong.

    you have NO doc type declared. that is very bad. also, your html/css is outdated

    the big thing i see is also that you have the onload function within the img tag. better to have it in the head

    i reworked the javascript and it now works in all those browsers. you will see the changes- even in the script tag and type.

    the image is now referred to by its ID, so change the image tag from name to id="display"

    i would take everything out of the tables also . use tables for tabular information, not for presentation/layout. use css instead.

    i added the increment counter++ inside an 'if' conditional statement. i also used a timer to now change the pics by looping back to the function every 2 seconds.

    also- i assume 1.jpg is a blank white image??

    here is the javascript:

    <script type="text/javascript">
window.onload = rollPics; 
var counter=1;                                     
function rollPics() {
document.getElementById("display").src="http://www.victorrossi.com/"+counter+".jpg";   
if (counter>29) {  // If counter is greater than 29 images then reset it
counter=1
}else {counter ++;} // else increment counter by 1
var t=setTimeout("rollPics();",2000); // loop back to the function after 2 seconds
} 
</script>
    Code (markup):
    hope that helps and makes sense. if not, just ask
     
    tdemetri, Jun 18, 2010 IP