Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member shoffman3572's Avatar
    Join Date
    Jul 2008
    Location
    Fullerton, CA
    Posts
    137
    Member #
    16990
    I'm working on a web site right now, where I have included a javascript sliding banner. The home page code hasn't changed, other than me adding a

    include("sliding_banner.html"); // where the banner has to go on the page

    The banner bascially opens, and then waits for 5 seconds, then accelerates as it slides to the left. if the visitor doesn't click any of the controlling arrows, it waits 5 seconds and then slides to the right. And back and forth etc.. the user can click an arrow to control the banner. Works great and looks nice, and you're free to use the code if you want to add this kind of thing to your own web site - just having a little issue with it..

    sliding_banner.html looks like this:

    <table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFDE68" height="100">
    <tr>
    <td align="left" bgcolor="#FFDE68">
    <div id="leftArrow">
    <script language="javascript">
    document.getElementById("leftArrow").innerHTML='<i mg src="ADimages/left_arrow.png" border="0" onClick="animateLeft(-800, 0, 0);"></a>';

    </script>
    </div>


    </td>
    <td align="center" width="800" bgcolor="#FFDE68">
    <div id="window">
    <div id="graphic">
    <script type="text/javascript">document.write(pic[0] + pic[1] + pic[2] + pic[3] + pic[4] + pic[5] + pic[6] + pic[7]);
    </script></div>
    </div> </td>
    <td align="right" bgcolor="#FFDE68">

    <div id="rightArrow">
    <script language="javascript">
    document.getElementById("rightArrow").innerHTML='< img src="ADimages/right_arrow_out.png" border="0">';

    </script>
    </div>

    </td>
    </tr>
    </table>

    for this to work - two other files are called - bannerCSS.css and bannerJS.js

    BannerCSS.css looks like this:

    #graphic {
    position: relative;
    width: 1600px;
    height: 75px;
    left: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    }


    #window {
    position:relative; overflow:hidden;
    width:800px;
    height:75px;


    }

    #leftArrow {
    position:relative;
    width:20px;
    }

    #rightArrow {
    position:relative;
    width:20px;
    }

    and bannerjs.js looks like this:

    pic = new Array(8);
    pic[0] = '<a href="#"><img src="ADimages/ad1.jpg" border="0"></a>';
    pic[1] = '<a href="#"><img src="ADimages/ad2.jpg" border="0"></a>';
    pic[2] = '<a href="#"><img src="ADimages/ad3.jpg" border="0"></a>';
    pic[3] = '<a href="#"><img src="ADimages/ad4.jpg" border="0"></a>';
    pic[4] = '<a href="#"><img src="ADimages/ad5.jpg" border="0"></a>';
    pic[5] = '<a href="#"><img src="ADimages/ad6.jpg" border="0"></a>';
    pic[6] = '<a href="#"><img src="ADimages/ad7.jpg" border="0"></a>';
    pic[7] = '<a href="#"><img src="ADimages/ad8.jpg" border="0"></a>';

    // This function animates the graphic to the right
    function animateRight(dist, counter, step)

    {
    s = step;
    document.getElementById("rightArrow").innerHTML='< img src="ADimages/right_arrow_out.png">';
    document.getElementById("leftArrow").innerHTML='<i mg src="ADimages/left_arrow.png" border="0" onClick="animateLeft(-800, 0, 0);">';

    c = dist;
    clearTimeout(autoMateRight);
    if (s >= 15) { s = 17; } else { s = s +1; }
    elem = document.getElementById("graphic");
    elem.style.left = '' + dist + 'px';
    if (c == 0)
    {
    autoMate = setTimeout("animateLeft(-800, 0, 0)", 5000);
    return;
    }
    c = c + s;
    delay = setTimeout("animateRight(c, 0, s)", 5);

    }

    // This function animates the graphic to the left
    function animateLeft(dist, counter, step)
    {
    s = step;
    document.getElementById("leftArrow").innerHTML='<i mg src="ADimages/left_arrow_out.png">';
    document.getElementById("rightArrow").innerHTML='< img src="ADimages/right_arrow.png" border="0" onClick="animateRight(-800, 0, 0);">';
    clearTimeout(autoMate);
    if (s >= 15) { s = 17; } else {s = s +1;}

    c = counter;
    total = dist;

    c = c - s;
    elem = document.getElementById("graphic");
    elem.style.left = '' + c + 'px';

    if (c == total)
    {
    autoMateRight = setTimeout("animateRight(-800, 0, 0)", 5000);
    return;
    }
    delay = setTimeout("animateLeft(-800, c, s)", 5);


    }

    so basically, the home pages loads - seems to finish loading just fine. But I'm seeing issues on our server logs where the page doesn't seem to load completely for some visitors, causing a lag on my server - almost like a DOS attack, but if I switch out the javascript banner for just some static images - the site and server are just fine. I believe something about this banner is causing the page not to load correctly for some visitors to my site. But i can't see what might be doing it..

  2.  

  3. #2
    Senior Member shoffman3572's Avatar
    Join Date
    Jul 2008
    Location
    Fullerton, CA
    Posts
    137
    Member #
    16990
    I believe I've actually figured out what I did wrong. On the sliding banner, there are arrows on the left and right of the banner. When the image slides left, the left arrow greys out and isn't clickable, when the right is, and via versa. The problem was, I was calling the graphics for those arrows within the function that moves the banner. So they were in fact, being called 50 to 60 times each way. That would probably cause problems as it's generating 1000's of requests as 100's of visitors hit the site.
    I separated those requests away within there own function so that they are only called once. That should fix the problem, but if not - I'm sure I'll be back here!
    Here's the new bannerJS.js file. (note, I didn't include where I set up the array that includes the pictures and links that going in to the banner - that part wasn't changed from my previous post)
    function getarrows_rightMove()
    {
    document.getElementById("rightArrow").innerHTML='< img src="ADimages/right_arrow_out.png">';
    document.getElementById("leftArrow").innerHTML='<i mg src="ADimages/left_arrow.png" border="0" onClick="getarrows_leftMove();">';

    animateRight(-1000, 0 , 0);
    }


    function getarrows_leftMove()
    {
    document.getElementById("leftArrow").innerHTML='<i mg src="ADimages/left_arrow_out.png">';
    document.getElementById("rightArrow").innerHTML='< img src="ADimages/right_arrow.png" border="0" onClick="getarrows_rightMove();">';

    animateLeft(-1000, 0, 0);
    }

    // This function animates the graphic to the right
    function animateRight(dist, counter, step)
    {
    s = step;
    c = dist;
    clearTimeout(autoMateRight);
    if (s >= 24) { s = 25; } else { s = s +1; }
    elem = document.getElementById("graphic");
    elem.style.left = '' + dist + 'px';
    if (c == 0)
    {
    autoMate = setTimeout("getarrows_leftMove()", 5000);
    return;
    }
    c = c + s;
    delay = setTimeout("animateRight(c, 0, s)", 20);
    }


    // This function animates the graphic to the left
    function animateLeft(dist, counter, step)
    {
    s = step;
    clearTimeout(autoMate);
    if (s >= 24) { s = 25; } else { s = s +1; }
    c = counter;
    total = dist;
    c = c - s;
    elem = document.getElementById("graphic");
    elem.style.left = '' + c + 'px';
    if (c == total)
    {
    autoMateRight = setTimeout("getarrows_rightMove()", 5000);
    return;
    }
    delay = setTimeout("animateLeft(-1000, c, s)", 20);
    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:30 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com