Method
August 24th, 2007, 03:35 PM
Hey all,
Does anyone know of a template or tutorial on how to create a interactive scroller like the one on this site?
http://www.trade-a-plane.com/index.html
thats all folks
August 24th, 2007, 03:50 PM
Did you try looking at the source code! They import the JS <SCRIPT type="text/javascript" src="adscroller.js"></SCRIPT>
Method
August 24th, 2007, 04:18 PM
Yeah I got a hold of the JS but does it refere to an XML file for the list of ads?
Or is it getting it's ads from a database?
Here is the script code:
var initscrollx;
var scrollx;
var isautoscrolling;
var isscrolling;
var isfadingin;
var isfadingout;
var numads;
var startad;
var xmlHttp;
var xmlHttp_adlist;
var popupDiv;
var x,y;
var playbtnimage;
var stopbtnimage;
var allbtnimage_on;
var allbtnimage_off;
var aircraftbtnimage_on;
var aircraftbtnimage_off;
var realestatebtnimage_on;
var realestatebtnimage_off;
var adlist;
var tnurlbase="/classified/images/thumbnails/";
var clsfdsearchbase="/classified";
// Set scrolling parms ticks*step must = 220
var man_ticks=22;
var man_step=10;
var man_dwell=10;
var auto_ticks=110;
var auto_step=2;
var auto_dwell=50;
var typefilter='';
// Called on load
function init(startflag) {
// Initialize some values
initscrollx=220;
scrollx=0;
isautoscrolling=0;
isscrolling=0;
isfadingin=0;
isfadingout=0;
startad=0;
adlist=new Array();
// Load button images
playbtnimage=new Image();
playbtnimage.src="/graphics/homepage/btn_adscroller_play.gif";
stopbtnimage=new Image();
stopbtnimage.src="/graphics/homepage/btn_adscroller_stop.gif";
allbtnimage_on=new Image();
allbtnimage_on.src="/graphics/homepage/btn_adscroller_all_on.gif";
allbtnimage_off=new Image();
allbtnimage_off.src="/graphics/homepage/btn_adscroller_all_off.gif";
aircraftbtnimage_on=new Image();
aircraftbtnimage_on.src="/graphics/homepage/btn_adscroller_aircraft_on.gif";
aircraftbtnimage_off=new Image();
aircraftbtnimage_off.src="/graphics/homepage/btn_adscroller_aircraft_off.gif";
realestatebtnimage_on=new Image();
realestatebtnimage_on.src="/graphics/homepage/btn_adscroller_realestate_on.gif";
realestatebtnimage_off=new Image();
realestatebtnimage_off.src="/graphics/homepage/btn_adscroller_realestate_off.gif";
UpdateFilterButtons();
var canvas=document.getElementById('canvas');
popupDiv = document.getElementById("popup");
canvas.style.left=-1*initscrollx+"px";
// Register a mouse handler
var viewport=document.getElementById('viewport');
viewport.onmousemove=mousemove;
getadlist();
wait_for_adlist(startflag);
}
function reset(runflag){
var canvas=document.getElementById('canvas');
canvas.style.display='none';
// Turn off autoscrolling and loop until all scrolling has stopped
isautoscrolling=0;
if (isscrolling){
setTimeout("reset("+runflag+")",200);
} else {
// Remove DIVs from scrolling canvas
for (t=0; t<canvas.childNodes.length;t++){
var elem=canvas.childNodes[t];
if (elem.nodeName == 'DIV') {
canvas.removeChild(elem);
t--; // Since we removed an item in the list
}
}
canvas.style.left=-1*initscrollx+"px";
startad=0;
canvas.style.display='block';
init(runflag);
}
}
function All(){
typefilter='';
UpdateFilterButtons();
var runflag=isautoscrolling;
reset(runflag);
}
function RealEstate(){
typefilter='realestate';
UpdateFilterButtons();
var runflag=isautoscrolling;
reset(runflag);
}
function Aircraft(){
typefilter='aircraft';
UpdateFilterButtons();
var runflag=isautoscrolling;
reset(runflag);
}
function UpdateFilterButtons(){
var allbtn = document.getElementById("allbtn");
var aircraftbtn = document.getElementById("aircraftbtn");
var realestatebtn = document.getElementById("realestatebtn");
if (typefilter=='realestate'){
allbtn.src=allbtnimage_off.src;
aircraftbtn.src=aircraftbtnimage_off.src;
realestatebtn.src=realestatebtnimage_on.src;
}else if (typefilter=='aircraft'){
allbtn.src=allbtnimage_off.src;
aircraftbtn.src=aircraftbtnimage_on.src;
realestatebtn.src=realestatebtnimage_off.src;
}else{
allbtn.src=allbtnimage_on.src;
aircraftbtn.src=aircraftbtnimage_off.src;
realestatebtn.src=realestatebtnimage_off.src;
}
}
function HideButtons(){
// Hide left and right buttons
var btn = document.getElementById("buttonleftcol");
btn.style.display = 'none';
btn = document.getElementById("buttonrightcol");
btn.style.display = 'none';
}
function ShowButtons(){
// Hide left and right buttons
var btn = document.getElementById("buttonleftcol");
btn.style.display = 'inline';
btn = document.getElementById("buttonrightcol");
btn.style.display = 'inline';
}
function startstop(){
if (isautoscrolling){
isautoscrolling=0;
ShowButtons();
var btn = document.getElementById("startstopbtn");
btn.src=playbtnimage.src;
} else {
autoscroll();
}
}
function autoscroll() {
HideButtons();
var btn = document.getElementById("startstopbtn");
btn.src=stopbtnimage.src;
isautoscrolling=1;
shiftrt(auto_ticks,auto_dwell,auto_step,true);
}
function autoscroll2() {
scrollrt();
setTimeout("autoscroll2()",2000);
}
function scrollrt() {
// If scrollx is zero (meaning we're not already scrolling), then start the motion
if (!isscrolling){ setTimeout("shiftrt("+man_ticks+")",10); }
}
function shiftrt(ticks,dwell,step,repeat){
var canvas=document.getElementById('canvas');
if ((dwell==auto_dwell) && (!isautoscrolling)){
// User has pressed Stop mid-animation. Quickly shift over
var remainingscrollpix=(auto_ticks-(auto_ticks-ticks))*auto_step;
step=man_step;
ticks=parseInt(remainingscrollpix/step);
var remainder=remainingscrollpix-step*ticks;
scrollx=scrollx+remainder;
canvas.style.left=-1*initscrollx-scrollx+"px";
dwell=man_dwell;
}
if ( (!dwell) ){ dwell=man_dwell;}
if (!step){ step=man_step;}
if (ticks>0){
isscrolling=1;
scrollx=scrollx+step;
canvas.style.left=-1*initscrollx-scrollx+"px";
ticks--;
setTimeout("shiftrt("+ticks+","+dwell+","+step+","+repeat+")",dwell);
}else{
startad++;
startad++;
isscrolling=0;
// If we've scrolled past the very end, then reset back to
// the beginning. Since we overlapped bit, this should seem
// like a seamless loop
if (startad==numads){
scrollx=0;
canvas.style.left=-1*initscrollx-scrollx+"px";
startad=0;
}
paintads();
if (repeat){
if (isautoscrolling){
setTimeout("shiftrt(110,"+dwell+","+step+","+repeat+")",dwell);
}
}
}
}
function scrolllt() {
// If scrollx is zero (meaning we're not already scrolling), then start the motion
if (!isscrolling){ setTimeout("shiftlt("+man_ticks+")",10); }
}
function shiftlt(ticks){
var canvas=document.getElementById('canvas');
if (ticks>0){
isscrolling=1;
scrollx=scrollx-10;
canvas.style.left=-1*initscrollx-scrollx+"px";
ticks--;
setTimeout("shiftlt("+ticks+")",10);
}else{
startad--;
startad--;
isscrolling=0;
// If we've scrolled before the first ad, then we'll jump to the end
// of the list. Since we overlap a bit, we can make this look like
// a seamless loop
if (startad<0){
startad=numads-2;
scrollx=(parseInt(numads/2)-1)*220;
canvas.style.left=-1*initscrollx-scrollx+"px";
}
paintads();
}
}
function getadlist() {
xmlHttp_adlist=createXMLHttpRequest();
var url = "/adscroller/getlist";
if (typefilter){
url=url+'?typefilter='+typefilter;
}
xmlHttp_adlist.open("GET", url, true);
xmlHttp_adlist.onreadystatechange = recv_adlist;
xmlHttp_adlist.send(null);
}
function recv_adlist(id) {
if (xmlHttp_adlist.readyState == 4) {
if (xmlHttp_adlist.status == 200) {
parse_adlist(xmlHttp_adlist.responseXML);
}
}
}
function parse_adlist (xmlDoc) {
var ads=xmlDoc.getElementsByTagName('ad');
numads=0;
for (var t=0; t<ads.length; t++){
var photo=ads[t].getAttribute('photo');
var caption=ads[t].childNodes[0].nodeValue;
adlist[t]=photo+'|'+caption;
numads++;
}
// We must ensure that we always have an even number of ads
// If we have an odd #, then we omit the last one. This is ok
// because the order is random, so no single ad will always be
// ignored
if ( ((numads/2)-parseInt(numads/2))>0){
numads--;
}
}
// Wait for the adlist to become available, then call paintads()
// This is done at initialization
function wait_for_adlist(startflag) {
if (adlist.length<10){
setTimeout("wait_for_adlist("+startflag+")",100);
} else {
paintads();
if (startflag){
autoscroll(); // Start the autoscroll
}
}
}
// Load up and position active ads on the canvas DIV. Remove non-active
// ads.
function paintads() {
var canvas=document.getElementById('canvas');
// Set width to accommodate all of the ads
canvas.style.width=220*(parseInt(numads/2)+3)+"px";
// Create an object to hold our list of currently active
// ads (meaning ad should be on the canvas)
var activeadlist=new Object();
// Start adding ads to the canvas. Ad visible
// and invisible ads
var adnum=startad;
for (i=0; i<5; i++){
for (k=0;k<2;k++){
var adindex=adnum;
if (adindex>=numads){
adindex=adnum-numads;
}
var idstring=adlist[adindex].substring(0,15);
var div=document.getElementById(idstring);
if (!div){
div=makediv(adindex);
div.style.position="absolute";
}
div.style.left=(parseInt(adnum/2))*220+"px";
div.style.top=k*150+"px";
// Add the ad to the active ad list (meaning it's on the canvas)
activeadlist[idstring]=1;
canvas.appendChild(div);
adnum++;
}
}
// Remove extraneous images
for (t=0; t<canvas.childNodes.length;t++){
var elem=canvas.childNodes[t];
if (elem.nodeName == 'DIV') {
if (!activeadlist[elem.id]){
canvas.removeChild(elem);
t--; // Since we removed an item in the list
}
}
}
}
// Create the div for each photo ad.
function makediv(adindex) {
var idstring=adlist[adindex].substring(0,15);
var desc=adlist[adindex].substring(16,99);
var shortid=removeLeadingZeros(idstring.substring(0,10 ));
var div=document.createElement("div");
div.setAttribute("id",idstring);
div.setAttribute("class","photoaddiv");
div.style.backgroundColor="#292B2A";
// div.style.borderColor="#292B2A";
// div.style.borderStyle="Solid";
// div.style.borderWidth="Medium";
// div.style.padding="5px 5px 5px 5px";
// div.style.margin="5px 5px 5px 5px";
// div.width=200;
// div.height=130;
var img=document.createElement("img");
img.src=tnurlbase+idstring+".jpg";
img.style.position="absolute";
img.setAttribute("id","photo"+idstring);
var adlink=clsfdsearchbase+"/search?browse=single&usealttemplate=1&adnum="+shortid;
var onclick="window.open('"+adlink+"','ClassifiedAd','toolbar=yes,location=no,director ies=no,status=no,menubar=no,resizable=yes,scrollba rs=yes,copyhistory=no,width=600,height=500'); return false;";
div.appendChild(img);
div.innerHTML="<DIV style='background-color: #595959; width:200px; height:125px; margin-top: 10px; padding-top: 10px; overflow: hidden; text-align: center;'><A class=\"photoadlink\" id=\"link"+idstring+"\" href=\""+adlink+"\"><img id=\"photo"+idstring+"\" onclick=\""+onclick+"\" onMouseOver=\"getAdText(this)\" onMouseOut=\"clearData()\" src='"+img.src+"' width=\"158\" height=\"79\" style='border-color: #FFFFFF; border-style: solid; border-width: medium;'><BR><DIV onclick=\""+onclick+"\" class=\"adcaptiondiv\">"+desc+"</DIV></A></DIV>";
return div;
}
function removeLeadingZeros(thestring){
while (thestring.charAt(0)=="0") {
thestring=thestring.substring(1,thestring.length);
}
if (thestring.charAt(0)==".")
thestring="0"+thestring;
return thestring;
}
// Generic routine it create a XmlHttpRequest object and return it to the caller
function createXMLHttpRequest() {
var xmlHttpObj;
if (window.XMLHttpRequest) {
xmlHttpObj = new XMLHttpRequest();
}else if (window.ActiveXObject) {
var aVersions=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0","MSXML2.XMLHttp",
"Microsoft.XMLHttp"];
for (var i = 0; i < aVersions.length; i++){
try {
xmlHttpObj = new ActiveXObject(aVersions[i]);
return xmlHttpObj;
}catch(oError){}
}
}
return xmlHttpObj;
}
// User has moved the mouse over an image. Retrieve the associated ad.
// the onmouseover event should point here
function getAdText(element) {
xmlHttp=createXMLHttpRequest();
// Extract the ad number from the id of the image (example id: photo59878)
var url = "/adscroller/getad?adnum=" + escape(element.id.substring(5,99));
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
// Callback function for the XmlHttpRequest that grabs
// the ad text. If everything was good, then this routine
// casll showAdText().
function callback(id) {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
showAdText(xmlHttp.responseText);
}
}
}
// User is moving the mouse. Position the popup DIV relative to
// the mouse cursor
function mousemove(event) {
// For IE
if(!event) event=window.event;
x=event.clientX;
y=event.clientY;
popupDiv.style.left =x+10+"px";
popupDiv.style.top = y+10+"px";
}
// The XmlHttpRequest object has returned and passed in the adText
// Position the popup DIV and fade it in for display
function showAdText(adText) {
popupDiv.style.left =x+10+"px";
popupDiv.style.top = y+10+"px";
popupDiv.innerHTML=adText;
popupDiv.style.opacity=0;
popupDiv.style.filter = "alpha(opacity:0)";
popupDiv.style.display='block';
isfadingin=1;
isfadingout=0;
// Wait 30ms, then call the fade-in routine (30ms should be
// enuff time to stopp a fade-out if one is in progress)
window.setTimeout("fadepopupin(0)",1000);
}
// Show the popup DIV by slowly fading it in
function fadepopupin(opac){
var passed = parseInt(opac);
var newOpac=(passed+10);
// So long as we haven't started a fade out, continue the fade-in sequence
if (!isfadingout){
if ( newOpac < 90 ) {
popupDiv.style.opacity = '.'+newOpac;
popupDiv.style.filter = "alpha(opacity:"+newOpac+")";
window.setTimeout("fadepopupin('"+newOpac+"')",20);
} else {
popupDiv.style.opacity = '.90';
popupDiv.style.filter = "alpha(opacity:90)";
isfadingin=0;
}
}
}
// Hide the popup DIV by slowly fading it out
function fadepopupout(opac){
var passed = parseInt(opac);
var newOpac=(passed-10);
// So long as we haven't started a fade in, continue the fadeout sequence
if (!isfadingin){
if ( newOpac >=10 ) {
popupDiv.style.opacity = '.'+newOpac;
popupDiv.style.filter = "alpha(opacity:"+newOpac+")";
window.setTimeout("fadepopupout('"+newOpac+"')",20);
} else {
popupDiv.style.opacity = '0';
popupDiv.style.filter = "alpha(opacity:0)";
popupDiv.style.display='none';
isfadingout=0;
}
}
}
// Hide the popup DIV
function clearData() {
isfadingin=0;
isfadingout=1;
// Wait 30ms, then call the fadeout routine (30ms should be
// enuff time to stopp a fade-in if one is in progress)
window.setTimeout("fadepopupout(90)",30);
}
randomagain
August 27th, 2007, 07:07 AM
I'm guessing xml...
function getadlist() {
xmlHttp_adlist=createXMLHttpRequest();
var url = "/adscroller/getlist";
if (typefilter){
url=url+'?typefilter='+typefilter;
}
xmlHttp_adlist.open("GET", url, true);
xmlHttp_adlist.onreadystatechange = recv_adlist;
xmlHttp_adlist.send(null);
}
function recv_adlist(id) {
if (xmlHttp_adlist.readyState == 4) {
if (xmlHttp_adlist.status == 200) {
parse_adlist(xmlHttp_adlist.responseXML);
}
}
}
function parse_adlist (xmlDoc) {
var ads=xmlDoc.getElementsByTagName('ad');
numads=0;
for (var t=0; t<ads.length; t++){
var photo=ads[t].getAttribute('photo');
var caption=ads[t].childNodes[0].nodeValue;
adlist[t]=photo+'|'+caption;
numads++;
}
Method
August 27th, 2007, 12:50 PM
Hey could anyone go through this java script and give descriptions of what the lines of code means? This way I can make the changes needed to refere to my own XML file?
randomagain
August 29th, 2007, 10:48 AM
I think it is something like...
<ad>
<ads photo="url "> caption</>
<ads photo="url "> caption</>
<ads photo="url "> caption</>
<ads photo="url "> caption</>
</ad>
function parse_adlist (xmlDoc) {
var ads=xmlDoc.getElementsByTagName('ad');
numads=0;
for (var t=0; t<ads.length; t++){
var photo=ads[t].getAttribute('photo');
var caption=ads[t].childNodes[0].nodeValue;
adlist[t]=photo+'|'+caption;
numads++;
}
Powered by vBulletin® Version 4.1.10 Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.