Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Slideshow Problem...

    Hi there,

    I am currently creating my first ever website and I am attempting to put in some javascript but I am having trouble, would it be possible for someone to guide me.

    I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title>Lyons Design and Print</title>
    	<style type="text/css" media="all">
     
     
    body
    {
    background-image:url('background.jpg');
    }
     
    .header {
    font-size: 24pt;
    font-weight: bold;
    padding: 20px;
    border-bottom: 1px solid #000;
    text-align:center;
    }
     
    #nav {
    margin:0;
    padding:0;
    float:left;
    width:100%;
    border:1px solid #42432d
    border-width:1px 0;
    text-align: center;
    }
     
    #nav li {
    display:inline-block;
    padding:0;
    margin:0;
    }
     
    * html #nav li { display: inline; }
    *+html #nav li { display: inline; }
     
    #nav a:link,
    #nav a:visited {
    color:#000;
    background:#0033CC;
    padding:20px 40px 4px 10px;
    float:left;
    width:auto;
    border-right:1px solid #42432d;
    text-decoration:none;
    font:bold 1em/1em Arial, Helvetica, sans-serif;
    text-shadow: 2px 2px 2px #555;
    }
     
    #nav a:hover,
    #nav a:focus {
    color:#fff;
    background:#0033CC;
    }
     
    #nav li:first-child a {
    border-left:1px solid #42432d;
    }
     
    #home #nav-home a,
    #large format printing #nav-large format printing a,
    #scanning #nav-scanning a,
    #thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a, 
    #large format photo copying #nav-large format photo copying a, 
    #contacts #nav-contacts a,
    #about us #nav-about us a {
    background:#e35a00;
    color:#fff;
    text-shadow:none;
    }
     
    #home #nav-home a:hover,
    #large format printing #nav-large format printing a:hover,
    #scanning #nav-scanning a:hover,
    #thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover, 
    #large format photo copying #nav-large format photo copying a:hover, 
    #contacts #nav-contacts a:hover,
    #about us #nav-about us a:hover {
    background:#e35a00;
    }
     
    #nav a:active {
    background:#e35a00;
    color:#fff;
    }
     
    p{
    font-family: Verdana, Geneva, sans-serif;
    font-style: oblique;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    }
     
    p{
    font-family: Verdana, Geneva, sans-serif;
    font-style: oblique;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    }
     
     
    <script type="text/javascript">
    <!--
    var image1=new Image()
    image1.src="DesignPrinter.jpg"
    var image2=new Image()
    image2.src="print-design.jpg"
    var image3=new Image()
    image3.src="printingpress.jpg"
    var image4=new Image()
    image4.src="thermal.jpg"
    //-->
    </script>
     
    <script>
    <!--
    //variable that will increment through the images
    var step=1
    function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    if (step<3)
    step++
    else
    step=1
    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit()",2500)
    }
    slideit()
    //-->
    </script>
     
    </style>
    </head>
     
    <body>
     
    <div class="header"><img src="logo.jpg"></div>
     
      <ul id="nav">
        <li id="nav-Home"><a href="Home.html">Home</a></li>
        <li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
        <li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
        <li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
        <li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
        <li id="nav-Contacts"><a href="#">Contacts</a></li>
        <li id="nav-About Us"><a href="#">About Us</a></li></ul>
     
     
    <table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">
     
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>
     
    <p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>
     
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
     
    <embed src="beatles.mid" width="144" height="60">
     
    </body>
    Last edited by MarkL410; 06-17-2010 at 05:23 PM.

  • #2
    Banned
    Join Date
    Nov 2008
    Location
    not found
    Posts
    284
    Thanks
    0
    Thanked 53 Times in 51 Posts
    Quote Originally Posted by MarkL410 View Post

    I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code...
    You have put your code inside your <style> element.
    Also this function must not be called until its elements have rendered, so replace slideit(); with window.onload = slideit;

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the info, here is the amended code but I am still having the same problem...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title>Lyons Design and Print</title>
    	<style type="text/css" media="all">
            
    
    body
    {
    background-image:url('background.jpg');
    }
    
    .header {
    font-size: 24pt;
    font-weight: bold;
    padding: 20px;
    border-bottom: 1px solid #000;
    text-align:center;
    }
    
    #nav {
    margin:0;
    padding:0;
    float:left;
    width:100%;
    border:1px solid #42432d
    border-width:1px 0;
    text-align: center;
    }
    
    #nav li {
    display:inline-block;
    padding:0;
    margin:0;
    }
    
    * html #nav li { display: inline; }
    *+html #nav li { display: inline; }
    
    #nav a:link,
    #nav a:visited {
    color:#000;
    background:#0033CC;
    padding:20px 40px 4px 10px;
    float:left;
    width:auto;
    border-right:1px solid #42432d;
    text-decoration:none;
    font:bold 1em/1em Arial, Helvetica, sans-serif;
    text-shadow: 2px 2px 2px #555;
    }
    
    #nav a:hover,
    #nav a:focus {
    color:#fff;
    background:#0033CC;
    }
    
    #nav li:first-child a {
    border-left:1px solid #42432d;
    }
    
    #home #nav-home a,
    #large format printing #nav-large format printing a,
    #scanning #nav-scanning a,
    #thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a, 
    #large format photo copying #nav-large format photo copying a, 
    #contacts #nav-contacts a,
    #about us #nav-about us a {
    background:#e35a00;
    color:#fff;
    text-shadow:none;
    }
    
    #home #nav-home a:hover,
    #large format printing #nav-large format printing a:hover,
    #scanning #nav-scanning a:hover,
    #thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover, 
    #large format photo copying #nav-large format photo copying a:hover, 
    #contacts #nav-contacts a:hover,
    #about us #nav-about us a:hover {
    background:#e35a00;
    }
    
    #nav a:active {
    background:#e35a00;
    color:#fff;
    }
    
    p{
    font-family: Verdana, Geneva, sans-serif;
    font-style: oblique;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    }
    
    p{
    font-family: Verdana, Geneva, sans-serif;
    font-style: oblique;
    font-weight: normal;
    font-size: 16px;
    letter-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="header"><img src="logo.jpg"></div>
    
      <ul id="nav">
        <li id="nav-Home"><a href="Home.html">Home</a></li>
        <li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
        <li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
        <li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
        <li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
        <li id="nav-Contacts"><a href="#">Contacts</a></li>
        <li id="nav-About Us"><a href="#">About Us</a></li></ul>
    
    
    <table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>
    
    <script type="text/javascript">
    <!--
    var image1=new Image()
    image1.src="DesignPrinter.jpg"
    var image2=new Image()
    image2.src="print-design.jpg"
    var image3=new Image()
    image3.src="printingpress.jpg"
    var image4=new Image()
    image4.src="thermal.jpg"
    //-->
    </script>
    
    <script>
    <!--
    //variable that will increment through the images
    var step=1
    function window.onload = slideit;{
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    if (step<3)
    step++
    else
    step=1
    //call function "slideit;" every 2.5 seconds
    setTimeout("slideit;",2500)
    }slideit;
    //-->
    </script>
    
    <p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
    
    <embed src="beatles.mid" width="144" height="60">
    
    </body>

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Mark:

    Wouldn't you like something better than that?

    Do you have a URL to your site?

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sciliano View Post
    Mark:

    Wouldn't you like something better than that?

    Do you have a URL to your site?
    In the long run yes but this is my first ever website and I'm basically practising javascript at the moment. I can't understand why I can't get that code to work.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm still having trouble, is there anyone that can tell me what's wrong with the code above?

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    This is very poor code, as Sciliano has indicated.

    To correct:-

    Code:
    <body onload = "slideit()">
    and the final part of the script alter as follows:-

    Code:
    //variable that will increment through the images
    var step=1
    
    function slideit() {
    document.images.slide.src=eval("image"+step+".src")
    if (step<3) {step++}  // there are 4 images so surely should be if (step<4)
    else {step=1}
    //call function "slideit;" every 2.5 seconds
    setTimeout("slideit()",2500)
    }
    </script>
    The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that (as here) you are looking at ancient and perhaps unreliable code.

    Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.


    "Dives sum, si non redo eis quibus debeo. - I am a rich man as long as I do not pay my creditors"
    Last edited by Philip M; 06-17-2010 at 04:51 PM.

  • #8
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Apologies for the poor post title and thank you for the information, I have got the following code now...

    Code:
    <script type="text/javascript">
    
    <body onload = "slideit()">
    
    var image1=new Image()
    image1.src="DesignPrinter.jpg"
    var image2=new Image()
    image2.src="print-design.jpg"
    var image3=new Image()
    image3.src="printingpress.jpg"
    var image4=new Image()
    image4.src="thermal.jpg"
    </script>
    
    <script>
    
    //variable that will increment through the images
    var step=1
    
    function slideit() {
    document.images.slide.src=eval("image"+step+".src")
    if (step<4) 
    {step++}
    else
    {step=1}
    //call function "slideit;" every 2.5 seconds
    setTimeout("slideit;",2500)
    }
    
    </script>
    
    <p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>
    Is that right? Sorry I am totally new to javascript so I may be making stupid mistakes.
    Last edited by MarkL410; 06-17-2010 at 05:24 PM.

  • #9
    New Coder
    Join Date
    May 2008
    Location
    Europe
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Creating a JavaScript slideshow

    Do you want to learn JavaScript or do you just want to add a nice looking slideshow to your site? If the latter, then use an existing slideshow script that already does what you want, works in all browsers and is easy to install. e.g. Magic Slideshow.

    If you want to learn JavaScript then use some of the good online tutorials.
    Magic Toolbox - spice up your website


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •