Log in

View Full Version : Trouble Adding Image Script into Continuous Marquee Script - please help!


tronicuk
08-16-2008, 01:36 PM
1) Script Title: Continuous Content Horizontal Marquee

2) Script URL (on DD): http://home.comcast.net/~jscheuer1/side/marqueeh.htm

3) Describe problem: I am trying to add the following script to this Marquee Script which has images on a horizontal line. I want the images to continously scroll across with no wait in between.

My content Script:

<div id='wl_ad2337'></div><script type='text/javascript' src='/widget.php?app=admanager&a=adjs&id=2176423:WLBannerCo347:2337&cid=2337'></script>

Dynamic Forums Script:

<html>
<head>
<title>Continuous Content Horizontal Marquee - Demo</title>
</head>
<body>
<script language="JavaScript1.2">

/*
Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
Modified by jscheuer1 for continuous content. Credit MUST stay intact
*/

//Specify the marquee's width (in pixels)
var marqueewidth="300px"
//Specify the marquee's height
var marqueeheight="25px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=3
//Specify initial pause before scrolling in milliseconds
var initPause=0
//Specify start with Full(1)or Empty(0) Marquee
var full=0
//configure background color:
var marqueebgcolor="#DEFDD9"
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

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

var marqueecontent='<nobr><font face="Arial" size="2">Thank you for visiting <a href="http://www.dynamicdrive.com">Dynamic Drive.</a> If you find this script useful, please consider linking to us by <a href="../link.htm">click here.</a> Enjoy your stay!</font></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
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:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, cross_marquee2, ns_marquee
function populate(){
if (iedom){
var initFill=(full==1)? '8px' : parseInt(marqueewidth)+8+"px"
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=initFill
cross_marquee2=document.getElementById? document.getElementById("iemarquee2") : document.all.iemarquee2
cross_marquee2.innerHTML=cross_marquee.innerHTML=marqueecontent
cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+8)+"px" //indicates following #1
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)',initPause)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)<(actualwidth*(-1)+8))
cross_marquee.style.left=(parseInt(cross_marquee2.style.left)+actualwidth+8)+"px"
if (parseInt(cross_marquee2.style.left)<(actualwidth*(-1)+8))
cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+8)+"px"
cross_marquee2.style.left=parseInt(cross_marquee2.style.left)-copyspeed+"px"
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:3px;display:inline;"></div>')
write('<div id="iemarquee2" style="position:absolute;left:0px;top:3px;display:inline;"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=3 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
</body>
</html>


thanks for your help.
jscheuer1
08-16-2008, 01:56 PM
This script is better suited to images:

http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm
tronicuk
08-16-2008, 02:52 PM
Thanks John

These is the style im looking for, however the code that i have provided has to be entered somewhere instead of individual URLs for the images - basically the code links to an AD Manager that is set up in my admin allowing me to just upload new images without the need to alter code.

<div id='wl_ad2337'></div><script type='text/javascript' src='/widget.php?app=admanager&a=adjs&id=2176423:WLBannerCo347:2337&cid=2337'></script>


When i display this on my site in an HTML/PHP page it shows a row of images displayed horizontally.

Is there a way of using this?

thanks
jscheuer1
08-17-2008, 10:26 AM
I can't guarantee results, no way for me to test. But I doubt that you could take that widget script and just slap it into either of the two scrolling scripts we are discussing here.

But I'm thinking that the widget probably fills the div that comes before it with images, or maybe linked images. If so, if we could make it like:


<nobr><span id="wl_ad2337"></span></nobr>
<script type="text/javascript" src="/widget.php?app=admanager&a=adjs&id=2176423:WLBannerCo347:2337&cid=2337"></script>

Put that right after the opening <body> tag and use these styles in the head:


#wl_ad2337 {
visibility: hidden!important;
white-space: nowrap!important;
position: absolute!important;
left: -9000px!important;
top: -1000px!important;
}

Then in Cmotion, we could get rid of this array:


//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>'
}

And get rid of this line:


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


Change this line:


leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'


to:


leftrightslide='<nobr>'+document.getElementById("wl_ad2337").innerHTML+'</nobr>'


And change this line:


actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth


to:


actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("wl_ad2337").offsetWidth


Depending upon just what your script does, and when it does it, it could work out quite well, perhaps with some tweaking. But if your script fires onload, we may have to do more to get the two scripts working together.