I have div container with dynamic text coming from a DB. How can I rotate this text with JavaScript? I am a ColdFusion Programmer with little JavaScript experience. I am including the URL of what I am working on. The text banner is in a yellow box on the left.
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Rotating text Box
- Thread starter murphyhg
- Start date
If you are looking for a text scroller, there are already many well built ones.
I don't know the answer but my good friend Google does.
I don't know the answer but my good friend Google does.
- Thread starter
- #4
I am not really looking for a scroller. I am looking for some JavaScript where I can put a recordset populate it to a javascript array and display the different recordsets at 10 second intervals. Sorry about not communicating very well. I have looked at Google but I have not been able to find it.
theniteowl
Programmer
What server-side language will you be using to retrieve the recordset?
How many fields in the recordset need to go into the array?
Or do you already have code working to retrieve and display a recordset and you just want code to switch what is shown?
If you have code, show the array structure, the html for the div and how you currently populate it.
Google, you're my hero!
How many fields in the recordset need to go into the array?
Or do you already have code working to retrieve and display a recordset and you just want code to switch what is shown?
If you have code, show the array structure, the html for the div and how you currently populate it.
Google, you're my hero!
Code:
<html>
<head>
<style type="text/css">
/*Modify attributes of #contentwrapper below as desired*/
#contentwrapper{
width: 230px;
height: 200px;
border: 1px solid black;
background-color: #C6FFC6;
padding: 5px;
}
.billcontent{
width: 100%;
display:block;
}
</style>
<script type="text/javascript">
/***********************************************
* DHTML Billboard script- © Dynamic Drive ([URL unfurl="true"]www.dynamicdrive.com)[/URL]
* This notice must stay intact for use
* Visit [URL unfurl="true"]http://www.dynamicdrive.com/[/URL] for full source code
***********************************************/
//List of transitional effects to be randomly applied to billboard:
var billboardeffects=["GradientWipe(GradientSize=1.0 Duration=0.7)", "Inset", "Iris", "Pixelate(MaxSquare=5 enabled=false)", "RadialWipe", "RandomBars", "Slide(slideStyle='push')", "Spiral", "Stretch", "Strips", "Wheel", "ZigZag"]
//var billboardeffects=["Iris"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.
var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=500 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=1 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).
var filterid=Math.floor(Math.random()*billboardeffects.length)
document.write('<style type="text/css">\n')
if (document.getElementById)
document.write('.billcontent{display:none;\n'+'filter:progid:DXImageTransform.Microsoft.'+billboardeffects[filterid]+'}\n')
else if (hidecontent_from_legacy)
document.write('#contentwrapper{display:none;}')
document.write('</style>\n')
var selectedDiv=0
var totalDivs=0
function contractboard(){
var inc=0
while (document.getElementById("billboard"+inc)){
document.getElementById("billboard"+inc).style.display="none"
inc++
}
}
function expandboard(){
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
contractboard()
if (selectedDivObj.filters){
if (billboardeffects.length>1){
filterid=Math.floor(Math.random()*billboardeffects.length)
selectedDivObj.style.filter="progid:DXImageTransform.Microsoft."+billboardeffects[filterid]
}
selectedDivObj.filters[0].duration=effectduration/1000
selectedDivObj.filters[0].Apply()
}
selectedDivObj.style.display="block"
if (selectedDivObj.filters)
selectedDivObj.filters[0].Play()
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandboard()",tickspeed)
}
function startbill(){
while (document.getElementById("billboard"+totalDivs)!=null)
totalDivs++
if (document.getElementById("billboard0").filters)
tickspeed+=effectduration
expandboard()
}
if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill
</script>
</head>
<body>
<div id="contentwrapper">
<div id="billboard0" class="billcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents.
</div>
<div id="billboard1" class="billcontent">
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master.
</div>
<div id="billboard2" class="billcontent">
Real life billboards use interesting transtional effects in between messages to catch viewers' attention. Well, so does this DHTML billboard script!
</div>
</div>
</body>
</html>I don't know the answer but my good friend Google does.
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question