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:
The php:
The javascript:
Thanks in advance.
-Tj
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:
Code:
<!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>
Code:
<?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" 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" 12v LCD TV/DVD Combo Skyworth SLC-1369A-3</h3>
<h4>Features:</h4>
<ul>
<li>TV adopts 13" 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>
Code:
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;
-Tj
Comment