Log in

View Full Version : Scrolling Banner Script Help



harddrummer
08-06-2008, 05:51 AM
Hi sorry to start a new thread on this , but been looking all over for some help. How can I make this script display random banners each time the page loads. In other words I want a different banner to start the scroll each time. I have the same banners here obviously but I think you get what I mean.

<p align="center"><marquee onmouseover='this.stop()' onmouseout='this.start()' width="500" behavior="scroll" scrollamount="4" direction="right">
<a href="http://www.mypublicshopping.com/hugehitsbanner4.gif "><img src="http://www.mypublicshopping.com/hugehitsbanner4.gif " border="0"></a>
<a href="http://www.mypublicshopping.com/hugehitsbanner4.gif "><img src="http://www.mypublicshopping.com/hugehitsbanner4.gif " border="0"></a>
<a href="http://www.mypublicshopping.com/hugehitsbanner4.gif "><img src="http://www.mypublicshopping.com/hugehitsbanner4.gif " border="0"></a></marquee>

Thanks for the help.
:confused:

rangana
08-06-2008, 06:20 AM
I should note at your end that marquee is an invalid tag and thus makes your page to fail on validation.
DD has a crossbrowser script for its replacement: http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm

align and border are deprecated (http://www.codehelp.co.uk/html/deprecated.html).

Meanwhile, for your problem, you mght find this modification useful:


<script type="text/javascript">
var img=[
'http://www.mypublicshopping.com/hugehitsbanner4.gif',
'http://h1.ripway.com/rangana/images/Picture4.jpg',
'http://h1.ripway.com/rangana/images/Picture3.jpg',
'http://h1.ripway.com/rangana/images/Picture7.jpg'
]; // Set all the images in this array
window.onload=function(){
var rand=Math.floor(Math.random()*img.length);
document.getElementById('banner').getElementsByTagName('a')[0].setAttribute('href',img[rand]);
document.getElementById('banner').getElementsByTagName('img')[0].src=img[rand];
}
</script>
<p style="text-align:center;"><marquee onmouseover='this.stop()' onmouseout='this.start()' width="500" behavior="scroll" scrollamount="4" direction="right">
<div id="banner">
<a href="">
<img src="" style="border:0px;width:125px;height:125px;"></a>
</div></marquee>


I haven't set a default link and image source. Hope it fits your heart's desire.

harddrummer
08-06-2008, 06:38 AM
Thanks so much for the help, however I should have mentioned that I want all the banners to scroll at the same time one after another, just have a different one start every time the page loads. I see you got that working, but none of the other banners follow. It only scrolls one at a time. What can I do to fix that? Thanks (I hate html sometimes)

jscheuer1
08-06-2008, 07:04 AM
Try this version:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#test2 img, #test3 img {
vertical-align:middle;
}
</style>
</head>
<body>
<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow 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
* Modified here for Left or Right Direction w/optional Reverse by jscheuer1
* Modifications ©2008 John Davenport Scheuer (jscheuer1)
* Visit Dynamic Drive Forums at http://www.dynamicdrive.com/forums/
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="400px";
//Specify the slider's height
var sliderheight="200px";
//Specify the slider's alignment (left, center, right)
var slidealign="center";
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3;
//Specify the slider's direction 0 for left 1 for right
var slideDirect=1;
//Allow reverse? 0 for no 1 for yes
var allowReverse=0;
//configure background color:
var slidebgcolor="#EAEAEA";
//Randomize order? 0 for no 1 for yes
var sliderandom=1;

//Specify the slider's images
var leftrightslide=[];
leftrightslide[1]='<a href="http://www.mypublicshopping.com/hugehitsbanner3.gif"><img alt="" src="http://www.mypublicshopping.com/hugehitsbanner3.gif" border="0"><\/a>'
leftrightslide[2]='<a href="http://www.mypublicshopping.com/hugehitsbanner4.gif"><img alt="" src="http://www.mypublicshopping.com/hugehitsbanner4.gif" border="0"><\/a>'
leftrightslide[3]='<a href="http://www.mypublicshopping.com/hugehitsbanner5.gif"><img alt="" src="http://www.mypublicshopping.com/hugehitsbanner5.gif" border="0"><\/a>'
leftrightslide[4]='<a href="http://www.mypublicshopping.com/hugehitsbanner6.gif"><img alt="" src="http://www.mypublicshopping.com/hugehitsbanner6.gif" border="0"><\/a>'

//Specify gap between each image (use HTML):
var imagegap=" ";

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5;

//////////// NO NEED TO EDIT BELOW THIS LINE ////////////

Array.prototype.jds_rand_sort=function (){ //jds_rand_sort by jscheuer1
var a=[], b=0, c;
for (var i = this.length-1; i > -1; --i)
a[i]=this[i];
if(!a.splice)
Array.prototype.jds_rand_sort_splice=function(c){
for(var i = 0, n = this.length-1; i < n; ++i)
this[c + i] = this[c + i + 1];
this.length = n;
}
else
Array.prototype.jds_rand_sort_splice=function(c){this.splice(c,1)};
while(a.length){
this[b++]=a[c=Math.floor(Math.random()*a.length)];
a.jds_rand_sort_splice(c);
};};

if(sliderandom) leftrightslide.jds_rand_sort();
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'<\/nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'<\/span>')
var actualwidth=''
var cross_slide, ns_slide, cross_slide2, lefttime;

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=slideDirect? setInterval("slideright()",30) : setInterval("slideleft()",30)
}
window.onload=fillup

function slideright(){
if (iedom){
if (parseInt(cross_slide.style.left)<(actualwidth+8))
cross_slide.style.left=parseInt(cross_slide.style.left)+copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+(actualwidth+slideshowgap)*(-1)+"px"

if (parseInt(cross_slide2.style.left)<(actualwidth+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)+copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+(actualwidth+slideshowgap)*(-1)+"px"

}
else if (document.layers){
if (ns_slide.left<(actualwidth+8))
ns_slide.left+=copyspeed
else
ns_slide.left=ns_slide2.left+(actualwidth+slideshowgap)*(-1)

if (ns_slide2.left<(actualwidth+8))
ns_slide2.left+=copyspeed
else
ns_slide2.left=ns_slide.left+(actualwidth+slideshowgap)*(-1)
}
}

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0" align="' + slidealign + '"><tr><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"><\/div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"><\/div>')
write('<\/div><\/div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"><\/layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"><\/layer>')
write('<\/ilayer>')
}
if (allowReverse&&!document.layers){
write('<\/td><\/tr><tr><td align="center"><br>')
document.write('<input type="button" value="Reverse" onclick="reverseSlide()">')
}
document.write('<\/td><\/tr><\/table>')
}
}

function reverseSlide(){
clearInterval(lefttime)
slideDirect=slideDirect? 0 : 1
lefttime=slideDirect? setInterval("slideright()",30) : setInterval("slideleft()",30)
}
</script>

<p style="text-align:center;font:8pt arial">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></p>
</body>
</html>

harddrummer
08-06-2008, 04:18 PM
Hey Thanks so much for the help. The last code works perfectly. I wish I had found this site a long time ago. I really appreciate it. Have a good day!:D

harddrummer
08-14-2008, 06:32 PM
Hi John. Hey thanks again for helping me with this scroller, but next problem is this. If I try to put two of them on the same page the bottom one wont display anything and the bottom one also controlls the top one. If I do any adding of banners or changing the speed on the bottom on it always changes the top one. I have put breaks (<br>) in between them but no use. How can I fix this problem. I want each one to work independent of each other. Thanks. Greg

jscheuer1
08-14-2008, 07:10 PM
The problem is that the two scripts conflict. You could put one on the page and another in an iframe, but that sometimes isn't all that great. Or you could use this version:

http://home.comcast.net/~jscheuer1/side/files/conveyor_oo.htm

Use your browser's 'view source' to see the code. However, I had made a few minor modifications to the generic Conveyor script to get it working optimally for those banners I used it on for you. Hopefully you will have either no trouble or no need to to make them to the OO version I linked to above. If you do have problems with it, let me know.

harddrummer
08-14-2008, 07:52 PM
Hi John.
Ok this new one looks great. Will this make the banners display randomly each time the page is reloaded? Sorry if I sound a little um stupid, but what is an iframe? Sorry not all that good with html and scripts. Greg

Ps better yet, do you have scrolling script available for sale that will do everything i want IE: randomly display banners on every page load, adjustable speed, banner size, direction etc. and come with an admin area with one site setup and be able to put it on various sites so I can sell impressions and provide a stats area for customers? I have one that will go up and down but not sideways and it is not for banners just text

jscheuer1
08-15-2008, 04:41 PM
I don't have a script like that, no. I don't even think I could easily code something that would do all that. I could fairly easily get the multi use version to do all of the things that my customized single use version does. When I get a chance, I'll work that up.

As I am a bit busy right now, feel free to remind me in a few days if I haven't gotten back to you.

harddrummer
08-26-2008, 04:02 PM
Hi John. I finally got a script that does what I want but I need to put it into an iframe. Can you show me how? This script interfers with the page, making parts of the page a hyperlink, so I need to isolate it so to speak. Here is the script. Thanks Greg

<script src="http://www.mypublicshopping.com/scrollingbannerads/showads.php?w=500&h=140&n=25&bw=125&bh=125&sp=4&dc=right"></script>