How to add jquery fade effect on ajax html banner rotator?

Hi guys,
I am new to this and need a little help.
I have an html block to be rotated and placed in an array via php as well as printed as an xml format then. Without refreshing the page, the banner will randomly rotate using ajax technique.
I wanted to add a jquery fade effect or a code in which every time the block of html code rotates, or a transition effect. The code are shown below for html, php & javascript:

the html page:

Expand|Select|Wrap|Line Numbers

 
<!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" xml:lang="en">

    <head>

        <title>AJAX banner demo</title>

        <style type="text/css">

            #ajax-banner {

                background: #ceeffd;

                padding:10px;

                border: 1px solid black;

                width: 760px; height: 460px; position: relative; margin: 0 auto 15px; 

            }

        </style>
 
    </head>
 
    <body>

        <div id="ajax-banner"></div>

<script type="text/javascript" src="ajax-banner.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<!-- include Cycle plugin --> 

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 

    </body>

</html>

The php:

Expand|Select|Wrap|Line Numbers

 
<?php

// an array of banners

$banners = array (

    '<img src="images/12-volt-engel-products/engel-12-volt-acdc-fridge-freezer-43-quart-mt45-sm.jpg" alt="Engel 12-Volt Fridge Freezer" style="float: right; margin: 0 0 2px 10px;">

                                <h3>Medium Engel 12 Volt AC/DC Fridge-Freezer 34 Quart MT35F-U1</h3>

                                <h4>Features:</h4>

                                <ul>

                                <li>Input rating DC12V - 2.5A</li>

                                <li>AC 110V - 0.7A</li>

                                <li>Fuse 10A external fuse</li>

                                <li>Max Noise 38 dB</li>

                                <li>Shipping Weight 59 lbs.</li>

                                <li>Warranty 2 years</li>

                                </ul>

                                <br>

                                <h3 style="text-align: right;color:#ff0000;margin-right:30px">Now $763.99</h3>

                                <br>

                                <form action="http://www.romancart.com/cart.asp" method="post">

                                <p style="text-align: right;"><input type="hidden" name="itemcode" value="00620402024">

                                <input type="hidden" name="storeid" value="00000">

                                Quantity: <input name="quantity" size="1" type="text" value="1">

                                <input name="Submit" type="submit" value="Add to cart" style="background-color:#3366FF;font-weight:bold;color:#fff"></p>

                                </form>',

    '<img src="images/gps-truck-rout-products/rand-mcnally-intelliRoute-trucker-gps-tnd700-sm.jpg" alt="TND700" style="float: right; margin: 0 0 2px 10px;">

                                <h3>Rand McNally TND700 IntelliRoute 7&quot; Trucker GPS TND700</h3>

                                <h4>Features:</h4>

                                <ul>

                                    <li>Full U.S. and Canada maps</li>

                                    <li>Trucker Business Tools</li>

                                    <li>Access to updates and upgrades via the <a title="TND Dock" href="http://trucking.randmcnally.com/ctonline/products/intelliroute_tnd/tnd_dock.jsp">TND Dock</a></li>

                                    <li>Searchable truck stop information from the Trucker's Friend National Truck Stop Directory</li>

                                </ul>

                                <h3 style="text-align: right;color:#ff0000;">Before: <span style="text-decoration:line-through;">$499.00</span><br>now $449.00</h3>

                                <br>

                                <form action="http://www.romancart.com/cart.asp" method="post">

                                <p style="text-align: right;"><input type="hidden" name="itemcode" value="00020502083">

                                <input type="hidden" name="storeid" value="00000">

                                Quantity: <input name="quantity" size="1" type="text" value="1">

                                <input name="Submit" type="submit" value="Add to cart" style="background-color:#3366FF;font-weight:bold;color:#fff"></p>

                                </form>',

    '<img src="images/12-volt-lcd-tv-dvd-widescreen-products/skyworth-15.6in-tv-dvd-slc-1569a-3-small.jpg" alt="12 Volt TV" style="float: right; margin: 0 0 2px 10px;">

                                <h3>13&quot; 12v LCD TV/DVD Combo Skyworth SLC-1369A-3</h3>

                                <h4>Features:</h4>

                                <ul>

                                    <li>TV adopts 13&quot; LCD display screen</li>

                                    <li>HDTV Compatible( 480p,720p, 1080i, 1080p)</li>

                                    <li>Support American TV Standard 8VSB/Free 64/256QAM,NTSC System, ATSC System</li>

                                </ul>

                                <h3 style="text-align: right;color:#ff0000;margin-right:50px;">Now $212.90</h3>

                                <br>

                                <form action="http://www.romancart.com/cart.asp" method="post">

                                <p style="text-align: right;"><input type="hidden" name="itemcode" value="00020202082">

                                <input type="hidden" name="storeid" value="00000">

                                Quantity: <input name="quantity" size="1" type="text" value="1">

                                <input name="Submit" type="submit" value="Add to cart" style="background-color:#3366FF;font-weight:bold;color:#fff"></p>

                                </form>',

);

// pick a random one

$html = $banners[array_rand($banners)];
 
// send XML headers

header('Content-type: text/xml');

echo '<?xml version="1.0" ?>';
 
// print the XML response

?>

<banner>

    <content><?php echo htmlentities($html); ?></content>

    <reload>4000</reload>

</banner>

The javascript:

Expand|Select|Wrap|Line Numbers

 
function makeHttpRequest(url, callback_function, return_xml)

{

   var http_request = false;
 
   if (window.XMLHttpRequest) { // Mozilla, Safari,...

       http_request = new XMLHttpRequest();

       if (http_request.overrideMimeType) {

           http_request.overrideMimeType('text/xml');

       }
 
   } else if (window.ActiveXObject) { // IE

       try {

           http_request = new ActiveXObject("Msxml2.XMLHTTP");

       } catch (e) {

           try {

               http_request = new ActiveXObject("Microsoft.XMLHTTP");

           } catch (e) {}

       }

   }
 
   if (!http_request) {

       alert('Unfortunatelly you browser doesn\'t support this feature.');

       return false;

   }

   http_request.onreadystatechange = function() {

       if (http_request.readyState == 4) {

           if (http_request.status == 200) {

               if (return_xml) {

                   eval(callback_function + '(http_request.responseXML)');

               } else {

                   eval(callback_function + '(http_request.responseText)');

               }

           } else {

               alert('There was a problem with the request.(Code: ' + http_request.status + ')');

           }

       }

   }

   http_request.open('GET', url, true);

   http_request.send(null);

}
 
function loadBanner(xml)

{

    var html_content = xml.getElementsByTagName('content').item(0).firstChild.nodeValue;

    var reload_after = xml.getElementsByTagName('reload').item(0).firstChild.nodeValue;

    document.getElementById('ajax-banner').innerHTML = html_content;
 
    try {

        clearTimeout(to);

    } catch (e) {}
 
    to = setTimeout("nextAd()", parseInt(reload_after));
 
}
 
function nextAd()

{

    var now = new Date();

    var url = 'ajax-banner.php?ts=' + now.getTime();

    makeHttpRequest(url, 'loadBanner', true);

}
 
window.onload = nextAd;

Thanks in advance.

-Tj

Sep 29 '10 #1

Subscribe Post Reply

✓ answered by acoder

You need to use it where the change is made (in the loadBanner function)
document.getElementById('ajax-banner').innerHTML = html_content;

5820

acoder

16,027

Expert Mod 8TB

Use fadeIn and the corresponding fadeOut.

Sep 29 '10 #2

Tj Jurado

Thank you for the response.

I tried it and placing it on the html, but it did not work out. The fade In effect did not function.

Expand|Select|Wrap|Line Numbers

 
<script type="text/javascript">

$("#ajax-banner").load(function () {

  $("#ajax-banner").fadeIn('fast', function() {

    });

});

</script>

Any ideas on how to integrate it with my script?

Oct 1 '10 #3

acoder

16,027

Expert Mod 8TB

You need to use it where the change is made (in the loadBanner function)
document.getElementById('ajax-banner').innerHTML = html_content;

Oct 1 '10 #4

Tj Jurado

thanks a acoder lot it's working now.

Oct 4 '10 #5

by: Susanna | last post by:

Hi all, I'm using the following slideshow script that I found on the web to display changing images with a crossfade effect. Eventually I will be adding many more images to the slideshow. The...

Javascript

Are there any open source ajax html editors?

by: Sandy.Pittendrigh | last post by:

Are there any open source ajax html editors? I want to incorporate as simple (very simple) ajax based html editor into a webapp I'm making. I spent an hour or so downloading code and saw...

HTML / CSS

break iframe script not working with banner rotator

by: kwenterprise | last post by:

Hello All, I am normally great at figuring out ways around iframe issues that frustrate us all. I am using javasript to try and break an iframe that I have a banner rotator embedded in but it...

Javascript

? AJAX library/toolkit/frameset to use ?

by: Valentin L | last post by:

I'm new to AJAX .. In my IIS5 web apps I'm using the old VBScript in .asp pages. I've tested an AJAX banner rotator and is OK. Now I'm looking "the" library that will spare me to "re-invent...

ASP.NET

AJAX html won't refresh after data update

by: javelin | last post by:

I created a feature in a page where a DIV displays child records of the current record. From this same page, I can submit the insertion of a new child record. However, the while the previous child...

Javascript

Fade effect in a usercontrol

by: Ali Rizwan | last post by:

Hi all, I made a usercontrol and want to give fade effects to it. Now problem is that i m using alpha command as i use in my cool form. Nothing is happninig. How can i give fade effect to a...

Visual Basic 4 / 5 / 6

Making AJAX loaded content accessible

by: nicky77 | last post by:

Hi, apologies in advance is this may be a nonsensical ramble, but I'm hoping someone can give me some advice on how to solve the following problem: I'm developing a site where the main content is...

Javascript

How to get ride of the Caption that says "Rotator" on a bannerrotator?

by: Excel 009 | last post by:

Hi All, I have the appended code which I used for a banner rotator. It works great except that there 1. there is a border which I do not want and 2. on top of the banner there is a black bar...

Javascript

apply fade effect on innerHTML

by: pt36 | last post by:

Hi I have a small script function photo(a){ var photo = a ; document.getElementById(photoID).innerHTML = photo; } and on the body

Javascript

Automatic content exchange with fade effect

by: ilija | last post by:

Hello! As I am not much familiar with javascript (I know the basics of basics), I cannot find any script that would satisfy my needs. What I want is something like this:...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

How to add jquery fade effect on ajax html banner rotator?

✓ answered by acoder

Similar topics