auto image scrolling

[ashishj10]

I am working on a site where some physician list is coming from a xml and showing in a page and this list is going to scroll left and right if you click on left right arrows. Now i want to make this scroll auto. Instead of click on left and right buttons, this list will run automatically. I dont want to use some other script now because i implement the xml and other stuff on this script. Please see this link: http://www.veinclinics.com/vcaphilosophy/test/. There are 2 external js files which i am using for it. plz see below:

(1) dw_glidescroll.js
/* glide onclick scrolling for dw_scrollObj (in dw_scrollObj.js) */
dw_scrollObj.slideDur = 500; // duration of glide
// intermediary functions needed to prevent errors before page loaded
dw_scrollObj.scrollBy = function(wnId, x, y, dur) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].glideBy(x, y, dur);
}
dw_scrollObj.scrollTo = function(wnId, x, y, dur) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].glideTo(x, y, dur);
}
// Resources for time-based slide algorithm:
dw_scrollObj.prototype.glideBy = function(dx, dy, dur) {
if ( !document.getElementById || this.sliding ) return;
this.slideDur = dur || dw_scrollObj.slideDur;
this.destX = this.destY = this.distX = this.distY = 0;
this.lyr = document.getElementById(this.lyrId);
this.startX = this.x; this.startY = this.y;
if (dy < 0) this.distY = (this.startY + dy >= -this.maxY)? dy: -(this.startY + this.maxY);
else if (dy > 0) this.distY = (this.startY + dy <= 0)? dy: -this.startY;
if (dx < 0) this.distX = (this.startX + dx >= -this.maxX)? dx: -(this.startX + this.maxX);
else if (dx > 0) this.distX = (this.startX + dx <= 0)? dx: -this.startX;
this.destX = this.startX + this.distX; this.destY = this.startY + this.distY;
this.slideTo(this.destX, this.destY);
}
dw_scrollObj.prototype.glideTo = function(destX, destY, dur) {
if ( !document.getElementById || this.sliding) return;
this.slideDur = dur || dw_scrollObj.slideDur;
this.lyr = document.getElementById(this.lyrId);
this.startX = this.x; this.startY = this.y;
this.destX = -Math.max( Math.min(destX, this.maxX), 0);
this.destY = -Math.max( Math.min(destY, this.maxY), 0);
this.distY = this.destY - this.startY;
this.distX = this.destX - this.startX;
this.slideTo(this.destX, this.destY);
}

dw_scrollObj.prototype.slideTo = function(destX, destY) {
this.per = Math.PI/(2 * this.slideDur); this.sliding = true;
this.slideStart = (new Date()).getTime();
this.aniTimer = setInterval(this.animString + ".doSlide()",10);
this.on_slide_start(this.startX, this.startY);
}

dw_scrollObj.prototype.doSlide = function() {
var elapsed = (new Date()).getTime() - this.slideStart;
if (elapsed < this.slideDur) {
var x = this.startX + this.distX * Math.sin(this.per*elapsed);
var y = this.startY + this.distY * Math.sin(this.per*elapsed);
this.shiftTo(this.lyr, x, y); this.on_slide(x, y);
} else { // if time's up
clearInterval(this.aniTimer); this.sliding = false;
this.shiftTo(this.lyr, this.destX, this.destY);
this.lyr = null; this.on_slide_end(this.destX, this.destY);
}
}

dw_scrollObj.prototype.on_slide_start = function() {}
dw_scrollObj.prototype.on_slide = function() {}
dw_scrollObj.prototype.on_slide_end = function() {}


(2) dw_scrollObj

dw_scrollObjs = {};
dw_scrollObj.speed = 100; // default speed for mouseover scrolling
// constructor arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll,
// id of table or other element that scrolling content is nested in.
// ns6+/moz need that extra container to get width for horizontal scrolling.
// (not needed for vertical scrolling)
function dw_scrollObj(wnId, lyrId, cntId) {
this.id = wnId; dw_scrollObjs[this.id] = this;
this.animString = "dw_scrollObjs." + this.id;
this.load(lyrId, cntId);
}

dw_scrollObj.loadLayer = function(wnId, id, cntId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].load(id, cntId);
}

dw_scrollObj.prototype.load = function(lyrId, cntId) {
if (!document.getElementById) return;
var wndo, lyr;
if (this.lyrId) {
lyr = document.getElementById(this.lyrId);
lyr.style.visibility = "hidden";
}
lyr = document.getElementById(lyrId);
wndo = document.getElementById(this.id);
lyr.style.top = this.y = 0; lyr.style.left = this.x = 0;
this.maxY = (lyr.offsetHeight - wndo.offsetHeight > 0)? lyr.offsetHeight - wndo.offsetHeight: 0;
this.wd = cntId? document.getElementById(cntId).offsetWidth: lyr.offsetWidth;
this.maxX = (this.wd - wndo.offsetWidth > 0)? this.wd - wndo.offsetWidth: 0;
this.lyrId = lyrId; // hold id of currently visible layer
lyr.style.visibility = "visible";
this.on_load(); this.ready = true;
}

dw_scrollObj.prototype.on_load = function() {}

dw_scrollObj.prototype.shiftTo = function(lyr, x, y) {
lyr.style.left = (this.x = x) + "px";
lyr.style.top = (this.y = y) + "px";
}

// remove layers from table for ns6+/mozilla (needed for scrolling inside tables)
// recent versions of ns/moz (ns7.2 and moz 1.73) don't need it (ns 7.1 and moz 1.5 do)
dw_scrollObj.GeckoTableBugFix = function() {
var ua = navigator.userAgent;
if ( ua.indexOf("Gecko") > -1 && ua.indexOf("Firefox") == -1
&& ua.indexOf("Safari") == -1 && ua.indexOf("Konqueror") == -1 ) {
dw_scrollObj.hold = []; // holds id's of wndo and its container
for (var i=0; arguments[i]; i++) {
if ( dw_scrollObjs[ arguments[i] ] ) {
var wndo = document.getElementById( arguments[i] );
var holderId = wndo.parentNode.id;
var holder = document.getElementById(holderId);
document.body.appendChild( holder.removeChild(wndo) );
wndo.style.zIndex = 1000;
var pos = getPageOffsets(holder);
wndo.style.left = pos.x + "px"; wndo.style.top = pos.y + "px";
dw_scrollObj.hold[i] = [ arguments[i], holderId ];
}
}
window.addEventListener("resize", dw_scrollObj.rePositionGecko, true);
}
}

// ns6+/mozilla need to reposition layers onresize when scrolling inside tables.
dw_scrollObj.rePositionGecko = function() {
if (dw_scrollObj.hold) {
for (var i=0; dw_scrollObj.hold[i]; i++) {
var wndo = document.getElementById( dw_scrollObj.hold[i][0] );
var holder = document.getElementById( dw_scrollObj.hold[i][1] );
var pos = getPageOffsets(holder);
wndo.style.left = pos.x + "px"; wndo.style.top = pos.y + "px";
}
}
}

function getPageOffsets(el) {
var left = el.offsetLeft;
var top = el.offsetTop;
if ( el.offsetParent && el.offsetParent.clientLeft || el.offsetParent.clientTop ) {
left += el.offsetParent.clientLeft;
top += el.offsetParent.clientTop;
}
while ( el = el.offsetParent ) {
left += el.offsetLeft;
top += el.offsetTop;
}
return { x:left, y:top };
}

and the css is:

div#hold {
position:relative; overflow:hidden;
width:320px; height:160px; z-index:100;
}
div#wn {
position:relative;
left:0px; top:0px;
width:320px; height:160px;
clip:rect(0px, 200px, 44px, 0px);
overflow:hidden;
z-index:1;
}
div.content {
position:absolute; visibility:hidden;
left:0px; top:0px; right:0px;
z-index:2;
}
div#lyr1 {
position:absolute; visibility:hidden;
left:0px; top:0px;
z-index:1;
}
#t1 {
width:2865px;
list-style:none;
list-style-type: none;
margin-top:5px;
margin-left:6px;
padding-left:0px;
}
li {
width:91px;
float: left;
margin-right:15px;
color:#2b0d2e;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
}
li a {
color:#2b0d2e;
font-size:10px;
font-weight:bold;
text-decoration:underline;
}
li a:hover {
color:#2b0d2e;
font-size:10px;
font-weight:bold;
text-decoration:none;
}
/* Styles for demo, not necessary for scrolling layers */

a img { border:none }
table.main {
width:326px;
background-color:#fefadf;
}
#divheight{
height:44px;
}
.doc_img {
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
.doc_img a {
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
.doc_img a img {
float:left;
position:absolute;
top:-20px;
left:-50px;
}
doc_img a:hover{
overflow:visible;
z-index:1000;
border:none;
}
doc_img a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}


Please help me to run it automatically.
Thanks in advance

Cheers
Ashish

[Nile]

I think that it looks great with the onclick. Just my opinion.

[ashishj10]

yes it looks gud.. but client wants automatic scrolling.

[ashishj10]

Anybody help me to find out how can first physician image will be shown after going over the last, and the other way around. The physycian list should come in loop, there will be no gap between last and first. I think it will be better instead of automatic scrolling.

Thanks in advance.

Cheers
Ashish