Here is a script that I have found useful and a few of my friends have. This is a scrolling banner block. It scrolls one banner at a time. I found this block at dynamic drive and is free for anyone to use. Just keep all of the credits in the script pointing back to dynamic intact. The way i did it was to create a folder in your forum root called banners and then edit the script to point to the images in that folder. Enjoy. :)
Copy and paste this code in a script block. You can view a demo here (http://ticksplace.com)
It is on the right side blocks.
<style type="text/css">
/*Example CSS for the two demo scrollers*/
#pscroller1{
width: 140px;
height: 80px;
border: 1px solid black;
padding: 5px;
}
.someclass{ //class to apply to your scroller(s) if desired
}
</style>
<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent=new Array()
pausecontent[0]='<p align="center"><a href="http://url to where the banner will take you/" target="_blank"><img border="0" src="http://url to where the image is." /></a></p>'
pausecontent[1]='<p align="center"><a href="http://url to where the banner will take you" target="_blank"><img border="0" src="http://url to where the banner is" /></a></p>'
pausecontent[2]='<p align="center"><a href="http://url to where the banner will take you" target="_blank"><img border="0" src="http://url to where the banner is" /></a></p>'
pausecontent[3]='<p align="center"><a href="http://url to where the banner will take you" target="_blank"><img border="0" src="http://url to where the banner is" /></a></p>'
pausecontent[4]='<p align="center"><a href="http://url to where the banner will take you/" target="_blank"><img border="0" src="http://url to where the banner is." /></a></p>'
pausecontent[5]='<p align="center"><a href="url to where the banner will take you/" target="_blank"><img border="0" src="http://url to where the banner is" /></a></p>'
pausecontent[6]='<p align="center"><a href="http://url to where the banner will take you" target="_blank"><img border="0" src="http://url to where the banner is" /></a></p>'
pausecontent[7]='<p align="center"><a href="http:// url to where the banner will take you" target="_blank"><img border="0" src="http://url to where the banner is" /></a></p>'
pausecontent[8]='<p align="center"><a href="http://url to where the banner will take you" target="_blank"><img border="0" src="http://url to where the banner is." /></a></p>'
</script>
<script type="text/javascript">
/***********************************************
* Pausing up-down scroller- Ã,© Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------
pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>
<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)
</script>
Thanks for sharing Tick.I really like this script.You can also add as many links as you want.
Will it display any size banner or is this a set height and width?
It can if you add a width and height to each line. or it will display any size banner at the sizes you set it to....like
pausecontent[4]='<p align="center"><a href="http://www.ericsworld.eu/f2/" target="_blank"><img border="0" src="http://www.ericsworld.eu/f2/banners/ericban.gif" alt="ico" width="140" height="30" title="Visit ErIcSwOrLd"/></a></p>'
and a title gives to a tooltip on mouse over :)
I dont think so. I have not tested that though.
Edit: Did not see your post eeek. Thanks for the extra . :)
I 2nd that thanks eeek for the tip,it worked well. :up:
Is it possible to center the script?, to use in in a center block instead of left or right?
I'm currently using the script on the bottom of every page, but it's not displaying the banners in their correct width and height. I've already added that info to the script, but I only get a small box on the bottom left of each page - that DOESN'T display the full banner.
Any help?
Can you post the code you are using?
You'd have to adjust the size of the css values at the top of the script to get a bigger box
<style type="text/css">
/*Example CSS for the two demo scrollers*/
#pscroller1{
width: 140px;
height: 80px;
border: 1px solid black;
padding: 5px;
}
It's the same code that was posted...
Now, I changed the css values, but I don't know if it's just an Internet Explorer issue or what, but it shows up sometimes and sometimes it doesn't. Can someone with FF and IE check it for me?
I'm currently at work and they only have IE installed on these pcs. :uglystupid2:
Also, can the script be centered?
#pscroller1{
margin-left: auto;
margin-right: auto;
width: 140px;
height: 80px;
border: 1px solid black;
padding: 5px;
Will centre it in the part of the page its on. Depends where you put the code on the page :)
If in a centre block it will be centre. If its a side block it will be in the centre of the side block.
Edit..shows up ok in FF and IE for me...you could also make border: 0px to get rid of the line or padding:0px so the line matches the size of the banners and increase height as its cutting the bottoms off :)
That was perfect! Thank you!
Edit...
Fixed and again, thank you!! (https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fwww.thirdeyeconcept.com%2Fforums%2FSmileys%2Ftec%2Fwoohoo.gif&hash=cb0052bb200bea8a9ef5ac366c2bbc7d531f6ae1)