Adding rotating text to rotating banner coding

[azgold472]

Hi there I have the following code.

    <script language="text/javascript">
                        banner1 = new Banner('banner1');
<?php
$con = mysql_connect("localhost:3306","User","Pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("barndata", $con);
$today = date("Y-m-d");
$result = mysql_query("SELECT * FROM event where Date >= '$today' ORDER BY Date ASC LIMIT 0, 7")  ;
   while ($row = mysql_fetch_array($result)) {
   echo 'banner1.add("text","';
   echo $row['ArtistDate'];
   echo '" , ,,, ';
   echo '"';
   echo $row['ImgLink'];
   echo '"';
   echo ');';

   }
   mysql_close($con);
?>
                        document.write(banner1);
                        banner1.start();
        </script>

What i am trying to do is add the Date for the banner below the image. It displays the rotation of the images perfectly without modification but when i add the date from the database it does not show the images nor the text. To see a working copy of this please go to www.thebarninsanford.com. The rotating banner on the right of the main page is what im working on. I am trying to reuse images and just have the show date appear under the images. Any help would be aprechiated!!

Thanks

[Taywin]

What is the syntax of funcion add() for Banner object? Are you sure that you add it correctly? Have you taken a look at the source (using view source)?

[azgold472]

// BANNER OBJECT
function Banner(objName){
    this.obj = objName;
    this.aNodes = [];
    this.currentBanner = 0;

};

// ADD NEW BANNER
Banner.prototype.add = function(bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
    this.aNodes[this.aNodes.length] = new Node(this.obj +"_"+ this.aNodes.length, bannerType, bannerPath, bannerDuration, height, width, hyperlink);
};

// Node object
function Node(name, bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
    this.name = name;
    this.bannerType = bannerType;
    this.bannerPath = bannerPath;
    this.bannerDuration = bannerDuration;
    this.height = height
    this.width = width;
    this.hyperlink= hyperlink;
//  alert (name +"|" + bannerType +"|" + bannerPath +"|" + bannerDuration +"|" + height +"|" + width + "|" + hyperlink);
};

// Outputs the banner to the page
Banner.prototype.toString = function() {
    var str = ""
    for (var iCtr=0; iCtr < this.aNodes.length; iCtr++){
        str = str + '<span name="'+this.aNodes[iCtr].name+'" '
        str = str + 'id="'+this.aNodes[iCtr].name+'" ';
        str = str + 'class="m_banner_hide" ';
        str = str + 'bgcolor="#FFFCDA" ';   // CHANGE BANNER COLOR HERE
        str = str + 'align="center" ';
        str = str + 'valign="top" >\n';
        if (this.aNodes[iCtr].hyperlink != ""){
            str = str + '<a href="'+this.aNodes[iCtr].hyperlink+'">';
        }

        if ( this.aNodes[iCtr].bannerType == "FLASH" ){
            str = str + '<OBJECT '
            str = str + 'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '
            str = str + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" '
            str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
            str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
            str = str + 'id="bnr_'+this.aNodes[iCtr].name+'" '
            str = str + 'ALIGN="" '
            str = str + 'VIEWASTEXT>'
            str = str + '<PARAM NAME=movie VALUE="'+ this.aNodes[iCtr].bannerPath + '">'
            str = str + '<PARAM NAME=quality VALUE=high>'
            str = str + '<PARAM NAME=bgcolor VALUE=#FFFCDA>'
            str = str + '<EMBED ';
            str = str + 'src="'+this.aNodes[iCtr].bannerPath+'" '
            str = str + 'quality=high '
//          str = str + 'bgcolor=#FFFCDA '
            str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
            str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
            str = str + 'NAME="bnr_'+this.aNodes[iCtr].name+'" '
            str = str + 'ALIGN="center" '
            str = str + 'TYPE="application/x-shockwave-flash" '
            str = str + 'PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">'
            str = str + '</EMBED>'
            str = str + '</OBJECT>'
        }else if ( this.aNodes[iCtr].bannerType == "IMAGE" ){
            str = str + '<img src="'+this.aNodes[iCtr].bannerPath+'" ';
            str = str + 'border="0" ';
            str = str + 'height="'+this.aNodes[iCtr].height+'" ';
            str = str + 'width="'+this.aNodes[iCtr].width+'">';
        }

        if (this.aNodes[iCtr].hyperlink != ""){
            str = str + '</a>';
        }

        str += '</span>';
    }
    return str;
};

// START THE BANNER ROTATION
Banner.prototype.start = function(){
    this.changeBanner();
    var thisBannerObj = this.obj;
    // CURRENT BANNER IS ALREADY INCREMENTED IN cahngeBanner() FUNCTION
    setTimeout(thisBannerObj+".start()", this.aNodes[this.currentBanner].bannerDuration * 1000);
}

// CHANGE BANNER
Banner.prototype.changeBanner = function(){
    var thisBanner;
    var prevBanner = -1;
    if (this.currentBanner < this.aNodes.length ){
        thisBanner = this.currentBanner;
        if (this.aNodes.length > 1){
            if ( thisBanner > 0 ){
                prevBanner = thisBanner - 1;
            }else{
                prevBanner = this.aNodes.length-1;
            }
        }
        if (this.currentBanner < this.aNodes.length - 1){
            this.currentBanner = this.currentBanner + 1;
        }else{
            this.currentBanner = 0;
        }
    }


    if (prevBanner >= 0){
        document.getElementById(this.aNodes[prevBanner].name).className = "m_banner_hide";
    }
    document.getElementById(this.aNodes[thisBanner].name).className = "m_banner_show";
}

[Taywin]

OH... After reread your post, I see that you do not correctly concatenate string in your PHP.

$result = mysql_query("SELECT * FROM event where Date >= '$today' ORDER BY Date ASC LIMIT 0, 7")

Look at your line 11, you are creating a string with $today in the query instead of adding the date value to the query. I believe you need to do...

$result = mysql_query("SELECT * FROM event where Date >= '".$today."' ORDER BY Date ASC LIMIT 0, 7")

It is just my guess under assumptions that your SQL can compare date as string, and also your "Date" field (case sensitive) exists in your table.

[azgold472]

I have it working showing a image im trying to add a date under the image or a caption to it. you can see the working model at www.thebarninsanford.com. its the image on the right that rotates.

[Taywin]

OK, lines 13~19, are you sure that you add an image to the Banner correctly? What do you think the output of the "echo" command would be? To me, it is as follows:

Banner.add("text","A_DATE" , ,,, "IMAGE_LINK")

Now look at what add() function is looking for...

function(bannerType, bannerPath, bannerDuration, height, width, hyperlink)

The 1st, 2nd, and 6th arguments are string. You did it correctly. The rest are number, you are passing undefined to the function. Inside the add() function, it passes those values to create a new Node, and the Node simply copies the values without sanitize them. As a result, variable which are supposed to be numbers become not-a-number. Then when you call start() function, the function broke at line 85 because NaN*1000 is equal to NaN and that stops JavaScript.