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

    Javascript slider displaying incorrectly -Help a Noobie!

    First off, I know almost nothing about javascript, I'm just learning CSS and HTML, but a client wanted me to copy a working slider from one website to another associated clone site I'm making.

    On my own test page I got the slider working here, but when I transferred the same code to his site it doesn't work.

    The site is here.

    Per the clients requirement this site was built on the genesis framework for wordpress...

  2. #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,947 Times in 4,908 Posts
    Ummmm...when I bring up the problem page, all I see is
    Parse error: syntax error, unexpected ')' in /home/haloacer/public_html/wp-content/themes/halocorporateuniverities/functions.php on line 45
    Which of course means the problem is in PHP code and has nothing whatsoever to do with JavaScript.

    I have to say I don't think much of that slider even on your working test page: It only slides once (unless you use the manual buttons) from left to right. When it reaches the right end, it stops.

    Ugh. It should be a continuous strip, looping around forever.
    Be yourself. No one else is as qualified.

  3. #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,947 Times in 4,908 Posts
    What about this?
    <!DOCTYPE html>
    <style type="text/css">
    #bannerHolder {
        position: relative;
        margin-left: 100px;
        width: 900px;
        height: 100px;
        overflow: hidden;
    #bannerHolder div {
        position: absolute;
        height: 100px;
        width: 20000px;
    #bannerHolder div img {    
        padding-left: 20px;
    <div id="bannerHolder">
        <div id="banners1">
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/absorb.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/adobe.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/apple.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/athenaonline.png" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/books247.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/cisco.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/citrix.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/comptia.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/corel.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/emc.gif" alt="" />
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/getabstract.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/google.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/ibm.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/intuit.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/isc.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/java.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/k-alliance.gif" alt="" />
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/linux.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/lotus.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/microsoft.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/novell.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/oracle.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/pmi.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/quark.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/redhat.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/sap.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/skillsoft.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/sun.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/unix.gif" alt=""/>
            <img src="http://test.josiahmann.com/wp-content/themes/outreach/banner-logos/vmware.gif" alt=""/>
    <script type="text/javascript">
    var holder = document.getElementById("bannerHolder");
    var div1 = holder.getElementsByTagName("div")[0];
    var div2 = null;
    var pix = div1.getElementsByTagName("img");
    for ( var i = 0; i < pix.length; ++i )
        pix[i].onload = loadOne;
    var loaded = 0;
    function loadOne( )
        if ( loaded == pix.length ) setup( );
    var twidth = 0;
    function setup( )
        // now clone div1:
        div2 = document.createElement("div");
        for ( i = 0; i < pix.length; ++i )
            twidth += pix[i].width + 20; // 22??
            var image = new Image( );
            image.src = pix[i].src;
            image.alt = "";
            div2.appendChild( image );
        twidth += pix[pix.length-1].width + 20;
        holder.appendChild( div2 );
        div1.style.width = twidth + "px";
        div2.style.width = twidth + "px";
        div2.style.left = twidth + "px";  
        setInterval( scrollBanner, 20 );
    var d1left = 0;
    function scrollBanner( )
        if ( d1left < -twidth )
            // swap d1 and d2:
            var temp = div1;
            div1 = div2;
            div2 = temp;
            // and reset left, etc.
            d1left = 0;
        div1.style.left = d1left + "px";
        div2.style.left = ( d1left + twidth ) + "px";
    Be yourself. No one else is as qualified.


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