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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript slideshow not working on ie

    Hello guys and gals ,

    I am using one of the JavaScript codes provided at http://www.javascriptkit.com, and it works great on Chrome and Firefox. But Internet Explorer is giving me trouble

    Here is the HTML:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="Keywords go here" name="keywords" />
    <meta content="Description goes here" name="description" />
    <meta content="This website is coded and maintained by ***** " name="author" />
    <meta content="@2004 ***** " name="copyright" />
    <meta http-equiv="Content-Style-Type" content="text/css2" />
    <title>Concepto MV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>
    
    <!--Website coded and maintained by Alexandra barvo
    Copyright @2011 w ww.alexandrabarvo.com -->
    </head>
    <body>
    <div id="background"></div><!--Backgroung-->
    <div id="wrapper">
    <div id="nav">
    <div id="logo">
    <img src="images/logo.png"/>
    </div><!--logo-->
    <ul id="main_nav">
    <li><a class="active" href="index.html">HOME</a></li>
    <li>|</a></li>
    <li><a href="about.html">OUR COMPANY</a></li>
    <li>|</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li>|</a></li>
    <li><a href="contact.html">CONTACT US</a></li>
    </ul>
    <ul id="social">
    <li><a href="http://www.twitter.com" target="blank"><img src="images/twitter.png" border="0"/></a></li>
    <li><a href="http://www.flickr.com" target="blank"><img src="images/flickr.png" border="0"/></a></li>
    <li><a href="http://www.facebook.com" target="blank"><img src="images/facebook.png" border="0"/></a></li>
    </ul>
    </div><!--nav-->
    <div id="slideshow">
    <script type="text/javascript">
    
    // Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
    // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
    // This notice must stay intact for use
    
    var ultimateshow=new Array()
    
    //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]
    
    ultimateshow[0]=['images/render1.jpg', '', '']
    ultimateshow[1]=['images/render2.jpg', '', '']
    ultimateshow[2]=['images/render3.jpg', '', '']
    
    //configure the below 3 variables to set the dimension/background color of the slideshow
    
    var slidewidth="900px" //set to width of LARGEST image in your slideshow
    var slideheight="400px" //set to height of LARGEST iamge in your slideshow
    var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
    var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
    var preloadimages="yes" //preload images? "yes" or "no"
    var slidebgcolor='white'
    
    //configure the below variable to determine the delay between image rotations (in miliseconds)
    var slidedelay=3000
    
    ////Do not edit pass this line////////////////
    
    var ie=document.all
    var dom=document.getElementById
    var curcycle=0
    
    if (preloadimages=="yes"){
    for (i=0;i<ultimateshow.length;i++){
    var cacheimage=new Image()
    cacheimage.src=ultimateshow[i][0]
    }
    }
    
    var currentslide=0
    
    function randomize(targetarray){
    ultimateshowCopy=new Array()
    var the_one
    var z=0
    while (z<targetarray.length){
    the_one=Math.floor(Math.random()*targetarray.length)
    if (targetarray[the_one]!="_selected!"){
    ultimateshowCopy[z]=targetarray[the_one]
    targetarray[the_one]="_selected!"
    z++
    }
    }
    }
    
    if (randomorder=="yes")
    randomize(ultimateshow)
    else
    ultimateshowCopy=ultimateshow
    
    function rotateimages(){
    curcycle=(currentslide==0)? curcycle+1 : curcycle
    ultcontainer='<center>'
    if (ultimateshowCopy[currentslide][1]!="")
    ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
    ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
    if (ultimateshowCopy[currentslide][1]!="")
    ultcontainer+='</a>'
    ultcontainer+='</center>'
    if (ie||dom)
    crossrotateobj.innerHTML=ultcontainer
    if (currentslide==ultimateshow.length-1) currentslide=0
    else currentslide++
    if (curcycle==parseInt(slidecycles) && currentslide==0)
    return
    setTimeout("rotateimages()",slidedelay)
    }
    
    if (ie||dom)
    document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
    
    function start_slider(){
    crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
    rotateimages()
    }
    
    if (ie||dom)
    window.onload=start_slider
    
    </script>
    </div><!--slideshow-->
    <div class="push"></div><!--push-->
    </div><!--wrapper-->
    <div class="footer">
    <p id="copy">Copyright &copy; 2012</p>
    </div><!--footer-->
    </div><!--body-->
    </body>
    </html>
    And here is the CSS


    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    
    body{
    	background:url(../images/bg.jpg) repeat;
    	padding: 0px;
    	font: 12px 'Comfortaa', Helvetica, sans-serif;
    	color: #CCC;
    }
    
    #wrapper{
    	margin:0 auto 75px auto;
    	width:960px;
    	min-height: 100%;
    	height:auto !important;
    	height:100%;
    }
    
    #background{
    	background:url(../images/nav_bg.png) repeat-x;
    	position:absolute;
    	left:0;
    	top:35px;
    	width:100%;
    	height:100%;
    	z-index:-1;
    }
    
    #website{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:99;
    }
    
    #nav{
    	/*background: url(../images/nav_bg.png) repeat-x;*/
    	width: 100%;
    	height: 75px;
    	margin-top: 35px;
    	margin-bottom: 75px;
    }
    
    #logo{
    	margin-left:40px;
    	float:left;
    }
    
    #main_nav{
    	margin-left: 22px;
    }
    
    ul#main_nav{
    	list-style:none;
    	float:left;
    	margin-top: 38px;
    }
    
    ul#main_nav li{
    	display:inline;
    	padding-left:7px;
    	font-size:14px;
    
    }
    
    ul#main_nav a{
    	text-decoration:none;
    	color:#ccc;
    }
    
    ul#main_nav a:hover{
    	text-decoration:none;
    	color:#666;
    }
    
    ul#social{
    	list-style:none;
    	float:left;
    	margin-top: 34px;
    	margin-left: 22px;
    }
    
    ul#social li{
    	display:inline;
    	padding-left:10px;
    	font-size:18px;
    }
    
    ul#social a{
    	text-decoration:none;
    	color:#ccc;
    }
    
    ul#social a:hover{
    	text-decoration:none;
    	color:#666;
    }
    
    #slideshow{
    	width:900px;
    	height:400px;
    	border:#101010 solid 5px;
    	padding: 0px;
    	margin: 0px auto;
    }
    
    .footer{
    	text-align:center;
    	background-color: #000; 
    	padding: 37px 0px 0px 0px;
    	margin:0px;
    	width:100%;
    	background:url(../images/nav_bg.png) repeat-x;
    }
    
    .footer, .push{
    	height: 75px;
    }

    Can anyone tell me of I am doing something wrong, or if I just need to use another code for the slideshow to work on ie?

    Thank you so much for you time.
    Ale

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Are you sure you have the right paths to the CSS and image files? It runs just fine for me on IE (I just created 3 sample colored images for testing the slideshow) but you can see it working here on my server: http://epicwebdesignsolutions.com/cl...lideshow2.html

    Note: the only thing I changed was the to rename the CSS file as style2.css and moved it to the same directory as the actual page so I didn't have to create another css subdirectory on my my server and/or over-write the existing style.css file I already had.

  • #3
    New Coder
    Join Date
    May 2008
    Location
    Europe
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It'll save you time if you choose a slideshow that already works in all major browsers + iPhone, Android etc.

    For example, Magic Slideshow.

    The JavaScript slideshow you are currently using keeps the images within the JS script whereas ideally the images should be separated from the script because they form part of the content of your web page.
    Magic Toolbox - spice up your website

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your help guys!!!

    IT WORKS NOW!

  • #5
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Stafford, VA near Washington, DC
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation How did you fix your javascript slide show?

    How did you fix your slide show?

    Can someone please take a look at my
    post about having a problem with my
    javascript slide not show showing up in IE?
    Thank you so much.

    My post is located here.


  •  

    Tags for this Thread

    Posting Permissions

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