Memory Scroller without delay?

[myrok24]

Hi there,
I am using the memory scroller on a website. (http://www.blikvoer.com/temp/bok/index.php But i want it to scroll without a delay.
So when the first image is off-screen on the left side, it directly appears on-screen on the right side. Without waiting for the rest of the images to disappear on the screen.
IS this poosible with a little tweak in the code?

my current code:

<script type="text/javascript">

/***********************************************
* Memory Scroller script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var memorywidth="1024px" //scroller width
var memoryheight="40px" //scroller height
var memorybgcolor="white" //scroller background
var memorypadding="0" //padding applied to the scroller. 0 for non.
var borderCSS="border: 0px solid black;" //Border CSS, applied to scroller to give border.

var memoryspeed=1 //Scroller speed (larger is faster 1-10)
var pauseit=1 //Pause scroller onMousever (0=no. 1=yes)?

var persistlastviewedmsg=1 //should scroller's position persist after users navigate away (1=yes, 0=no)?
var persistmsgbehavior="onload" //set to "onload" or "onclick".

//Specify the scroller's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var memorycontent='<?while($row = mysql_fetch_assoc($result)){extract($row);?><nobr><a target="_parent" href="index.php?pagina=klanten&klant=<?php echo $klant;?>"><? echo '<img src="logoimage/' . $logoname . '" />'; ?>
</a></nobr>&nbsp;<? } ?>'


////NO NEED TO EDIT BELOW THIS LINE////////////
var combinedcssTable="width:"+(parseInt(memorywidth)+6)+"px;background-color:"+memorybgcolor+";padding:"+memorypadding+";"+borderCSS+";"
var combinedcss="width:"+memorywidth+";height:"+memoryheight+";"

var divonclick=(persistlastviewedmsg && persistmsgbehavior=="onclick")? 'onClick="savelastmsg()" ' : ''
memoryspeed=(document.all)? memoryspeed : Math.max(1, memoryspeed-1) //slow speed down by 1 for NS
var copyspeed=memoryspeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)


document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-10000px">'+memorycontent+'</span>')


var actualwidth=''
var memoryscroller

if (window.addEventListener)
window.addEventListener("load", populatescroller, false)
else if (window.attachEvent)
window.attachEvent("onload", populatescroller)
else if (document.all || document.getElementById)
window.onload=populatescroller

function populatescroller(){
memoryscroller=document.getElementById? document.getElementById("memoryscroller") : document.all.memoryscroller
memoryscroller.style.left=parseInt(memorywidth)+8+"px"
if (persistlastviewedmsg && get_cookie("lastscrollerpos")!="")
revivelastmsg()
memoryscroller.innerHTML=memorycontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
lefttime=setInterval("scrollmarquee()",20)
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function savelastmsg(){
document.cookie="lastscrollerpos="+memoryscroller.style.left
}

function revivelastmsg(){
lastscrollerpos=parseInt(get_cookie("lastscrollerpos"))
memoryscroller.style.left=parseInt(lastscrollerpos)+"px"
}

if (persistlastviewedmsg && persistmsgbehavior=="onload")
window.onunload=savelastmsg

function scrollmarquee(){
if (parseInt(memoryscroller.style.left)>(actualwidth*(-1)+8))
memoryscroller.style.left=parseInt(memoryscroller.style.left)-copyspeed+"px"
else
memoryscroller.style.left=parseInt(memorywidth)+8+"px"
}

if (iedom){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0" style="'+combinedcssTable+'"><td>')
write('<div style="position:relative;overflow:hidden;'+combinedcss+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=memoryspeed">')
write('<div id="memoryscroller" style="position:absolute;left:0px;top:0px;" '+divonclick+'></div>')
write('</div>')
document.write('</td></table>')
}
}
</script>

thnx in advance!

[ddadmin]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

Try removing the following code in the .js file:

if (window.addEventListener)
window.addEventListener("load", populatescroller, false)
else if (window.attachEvent)
window.attachEvent("onload", populatescroller)
else if (document.all || document.getElementById)
window.onload=populatescroller

And then, add to the very end of the code the line in red below:

if (iedom){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0" style="'+combinedcssTable+'"><td>')
write('<div style="position:relative;overflow:hidden;'+combinedcss+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=memoryspeed">')
write('<div id="memoryscroller" style="position:absolute;left:0px;top:0px;" '+divonclick+'></div>')
write('</div>')
document.write('</td></table>')
}
}
populatescroller()

That should get the scroller running as soon as it's loaded. However, with this change you need to make sure all images shown within the scroller contain explicit width and height attributes, so their dimensions do not change after they have fully loaded.

[myrok24]

i tried your code, but i get a blank scroller now..
By the way i did'nt meant that i want the scroller to start right away. That's fine now.
But what i want is a continuous loop, not one "set" of images wich is scrolling from right to left.

[ddadmin]

If you mean modify the scroller so its contents runs continuously with no gap from one cycle to the next, there's no easy way to do that unfortunately. The closest thing that supports this by default would be Conveyor Belt slideshow script.

[myrok24]

aah that's exactly what i meant..
Do you by any chance know if this conveyor belt also remembers it's position, when the user navigates within the page?

I mean some of these "marque" scrollers keep starting at the begin position..

thnx anyway!

[myrok24]

mmm..im stuck with this part:

var finalslide=''
leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>' 

I want it to load images from my database.. but if i do something like this:

<?while($row = mysql_fetch_assoc($result)){extract($row);?><nobr><a target="_parent" href="index.php?pagina=klanten&klant=<?php echo $klant;?>"><? echo '<img src="logoimage/' . $logoname . '" />'; ?>
</a></nobr>&nbsp;<? } ?>

I don't have the "leftrightslide[3]" part in it..

Any idea how to load content from a database in this carousal?

thnx

[myrok24]

anyone? thnx

[ddadmin]

In general, the checklist for using any server side language to dynamically output client side JavaScripts is the same. As long as what gets output to the browser looks identical to as if you've manually included the script (in this case Carousel Viewer) on your page, it should work.

While trying to get the output to work, use the browser's view source feature often to check that the code that's being output comes closer and closer to how it should look. The idea is when you view source on your page, the script should appear verbatim, including the portion that will be dynamically constructed:

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>'

[myrok24]

yeah that exactly my problem.. if i load the images from database, i don't get the "leftrightslide[0]=" part.
At least not encounting (leftrightslide[2]= etc..)

[ddadmin]

It's up to you to ensure that the JavaScript code that's output dynamically on the server end conforms to the required syntax for the JavaScript, in this case, something like:

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>'

In other words, it's completely a server side operation, and has nothing to do with the JavaScript on the client side.