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

    Unhappy Need help with a scrolling ad banner, please

    This is my first post here, so I hope I've done this right.

    This is for a school assignment, so please just give me a hint or suggestion as to where I've gone wrong.

    I'm supposed to be creating a scrolling banner ad at the top of the page, and the ads are to change every 10 seconds.

    The first ad is showing up, but the ads are not changing with the code I'm using, and I'm getting an error in the moveNextAd function in the banners.js file. "Cannot read property style of undefined".

    So I'm thinking I may have incorrectly assigned the next ad to the nextAd variable? I've been staring at this and attempting to tweak it for 3 days, I'm stumped.

    If I haven't given enough info, let me know and I will explain further. My most heartfelt thanks for any help you can offer!!

    The banner ad images are named banner0.jpg through banner10.jpg and the ad links are named testpage0.htm through testpage10.htm.


    Here is the books.htm file:

    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>Online Bookworms</title>
       <link href="bw.css" rel="stylesheet" type="text/css" />
       <link href="bannerstyles.css" rel="stylesheet" type="text/css" />
       <script src="ads.js" type="text/javascript"></script>
       <script src="banners.js" type="text/javascript"></script>
    </head>
    
    <body>
       <div id="page">
          <h1 id="heading"><img src="bwlogo.jpg" alt="Online Bookworms" /></h1>
    
          <ul id="menu">
             <li><a href="#">Home</a></li>
             <li><a href="#">Reviews</a></li>
             <li><a href="#">Forums</a></li>
             <li><a href="#">Book Swaps</a></li>
             <li><a href="#">OBW Store</a></li>
             <li><a href="#">Author's Corner</a></li>
             <li><a href="#">My Account</a></li>
          </ul>
    
          <ul id="menu2">
    
             <li><a href="#">My Reading List</a></li>
             <li><a href="#">Review a Book</a></li>
             <li><a href="#">Join a Discussion</a></li>
             <li><a href="#">Post to a Forum</a></li>
             <li><a href="#">My Mail</a></li>
             <li><a href="#">My Posts</a></li>
    
             <li class="newgroup"><a href="#">Reading Recommendations</a></li>
             <li><a href="#">Books of the Month</a></li>
    
             <li class="newgroup"><a href="#">MP3 Downloads</a></li>
             <li><a href="#">Podcast</a></li>
             <li><a href="#">RSS Feeds</a></li>
    
             <li class="newgroup"><a href="#">Tech Support</a></li>
             <li><a href="#">Comments</a></li>
             <li><a href="#">About online BookWorms</a></li>
          </ul>
    
          <div id="main">
             <h2>Welcome</h2>
             <p>Welcome to <strong>online BookWorms</strong> &mdash; your location on
                the Web for books, magazines, short stories, poetry, and essays.
                Please explore our online bookstore for the lowest prices on new
                and rare books. Share your love of reading by joining one of our
                many forums and discussion groups. Are you an aspiring critic?
                We welcome book reviews and essays on your favorite authors and
                works.
             </p>
             <h2>News</h2>
             <p>We are very happy to introduce the <a href="#">online BookWorms
                Podcast</a>. The podcast will contain free excerpts from great
                works of fiction and reviews of current books. You can quickly
                subscribe to this new BookWorms feature <a href="#">here</a>.
             </p>
             <p>Take a few moments now to explore our book shelves. And remember to
                patronize our sponsors by clicking the banner ads at the top of the
                page. Enjoy browsing our site!
             <p id="signature">
                <img src="signature.jpg" alt="Helen Ungerstatz" />
             </p>
          </div>
    
       </div>
    </body>
    
    </html>
    Here is the ads.js file:

    Code:
    var adsURL = new Array();
    
    for (var i = 0; i < 11; i++) {
        adsURL[i] = "testpage" + i + ".htm";
    }
    and here is the banners.js file:
    Code:
    var nextAd;
    
    function addEvent(object, evName, fnName, cap) {
       if (object.attachEvent)
           object.attachEvent("on" + evName, fnName);
       else if (object.addEventListener)
           object.addEventListener(evName, fnName, cap);
    }
    
    addEvent(window, "load", makeBannerAds, false);
    
    function makeBannerAds() {
        var bannerBox = document.createElement("div");
        bannerBox.id = "bannerBox";
    
        for (var i = 0; i < adsURL.length; i++) {
            bannerAd = document.createElement("div");
            bannerAd.className = "bannerAd";
            bannerAd.style.zIndex = i;
    
            var adLink = document.createElement("a");
            adLink.href = adsURL[i];
            bannerBox.appendChild(adLink);
    
            var adImg = document.createElement("img");
            adImg.src = "banner" + i + ".jpg";
            adLink.appendChild(adImg);
        }
    
        document.body.appendChild(bannerBox);
        setInterval(changeBannerAd(), 10000);
    }
    
    function changeBannerAd() {
        // alert("changing banner ad");
        var adArray = document.getElementsByClassName("bannerAd");
        var timeDelay = 0;
    
        for (var i = 0; i < adArray.length; i++) {
                if (adArray[i].zIndex == 0) {
                adArray[i].style.top = "-50px";
                nextAd = adArray[i];
            }
        }
    
        for (var i = 0; i < adArray.length; i++) {
            adArray[i].zIndex--;
            if (adArray[i].zIndex < 0) {
                adArray[i].zIndex = adArray.length - 1;
            }
        }
    
        for (var i = -50; i <= 0; i++) {
            setInterval("moveNextAd(" + i + ")", timeDelay);
            timeDelay += 15;
        }
    }
    
    function moveNextAd(top) {
        nextAd.style.top = top + "px";
    }

  • #2
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Hi,

    just glanced, but...

    if nextAd is an array:

    nextAd = adArray[i];

    you really can't set an individual element of that array like this:

    function moveNextAd(top) {
    nextAd.style.top = top + "px";

    you'd need to send the element as well as the 'top'

    hope this helps
    Where the world once stood
    the blades of grass
    cut me still

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    how is this site: i just want to buy from there, http://www.soccerjerseys-cleats.com

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Vincent Puglia View Post
    Hi,

    just glanced, but...

    if nextAd is an array:

    nextAd = adArray[i];

    you really can't set an individual element of that array like this:

    function moveNextAd(top) {
    nextAd.style.top = top + "px";

    you'd need to send the element as well as the 'top'

    hope this helps
    Thanks for your reply. nextAd isn't an array, it's a global variable that is to contain the next ad to be shown, and it's supposed to hide (top at -50px) until 10 seconds pass, then it's supposed to scroll down and replace the current ad, while the following ad is then placed in the nextAd variable, and is hidden above the page. Then 10 seconds pass, and this ad scrolls down, and so on.


  •  

    Posting Permissions

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