Free JavaScript: newsticker with dotted transition effect

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Funticker with dotted transition effect animation
Messageboard with unique transition animation between the messages. Add as many messages as you like. Each message has a link of its own. Easy configuration of messages, links, font attributes, size of ticker, border, background-color, position and speed. True copy-and-paste installation! Browser: Internet Explorer 6x/7x/8x, Firefox 2x/3x, Opera 8x/9x/10x, Google Chrome 3x/4x.

Install it

Step 1: Open your webpage. Paste the following code anywhere between the <body> and </body> tag:

// If you add this script to a script-library or a script-archive 
// you have to insert a link to http://www.fabulant.com
// right into the webpage where the script will be displayed.

var message=new Array()
var messagelink=new Array()
var messagetarget=new Array()

///////////////////////////////////////////////////////////////////////////////////////
// CONFIGURATION ZONE STARTS HERE /////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////

// the messages. Add as many as you like.
message[0]="Welcome to fabulant, the new fun zone of DHTML and JavaScript."
message[1]="Download free scripts written by the maddest programmers online."
message[2]="Learn how to bring more excitement and surprise to your website."
message[3]="Use unique online tools to create great animations and visual effects."
message[4]="And try to enjoy life. Thank you for visiting fabulant.com"

// add a link for each message (enter "#" if you don't want a link, see sample below)
messagelink[0]="http://www.fabulant.com"
messagelink[1]="http://www.fabulant.com"
messagelink[2]="http://www.fabulant.com"
messagelink[3]="http://www.fabulant.com"
messagelink[4]="h#"

// add a target for each link
messagetarget[0]="_blank"
messagetarget[1]="_blank"
messagetarget[2]="_blank"
messagetarget[3]="_top"
messagetarget[4]="_self"

// fontsize, font and fontcolor
var fntsize=11
var fntfamily="Verdana"
var fntcolor="#AA0000"

// alignment of text ("left", "right", "center")
var textalign="left"

// rollover color
var rollovercolor="#AAAAAA"

// fontweight ("bold" or "normal")
var fntweight="normal"

// fontstyle ("italic" or "normal")
var fntstyle="normal"

// background-color of messagebox
var backgroundcolor="#FFDDDD"

// width and the height of the messagebox (pixels)
var messagewidth=150
var messageheight=150

// distance from text to border
var messagepadding=8

// width of messagebox border 
var borderwidth=3

// color of border
var bordercolor="#AA0000"

// borderstyle ("solid" or "dotted")
var borderstyle="solid"

// speed of the transition effect. A lower value means faster
var pause=50

// standstill-time of messages (seconds)
var standstill=3

////////////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE /////////////////////////////////////////////////////
// DO NOT EDIT BELOW THIS LINE
////////////////////////////////////////////////////////////////////////////////
var messages_top=borderwidth
var messages_left=borderwidth

var coverimage = new Array()
coverimage[0]="texttranspoint0.gif"
coverimage[1]="texttranspoint1.gif"
coverimage[2]="texttranspoint2.gif"
coverimage[3]="texttranspoint3.gif"
coverimage[4]="texttranspoint4.gif"
coverimage[5]="texttranspoint5.gif"
coverimage[6]="texttranspoint6.gif"
coverimage[7]="texttranspoint7.gif"
coverimage[8]="texttranspoint8.gif"
var covimgpreload=new Array()

var covimgpreload=new Array()
for (i=0;i<=coverimage.length-1;i++) {
	covimgpreload[i]=new Image()
	covimgpreload[i].src=coverimage[i]
}
var i_messages=0
var i_loop=0
var thisurl=0
var timer
var coverwidth
var coverheight
standstill=standstill*1000

function init() {
	document.getElementById('messagebox').style.top=0
    document.getElementById('messagebox').style.left=0
    document.getElementById('cover').style.top=messages_top
    document.getElementById('cover').style.left=messages_left
	messagebox.innerHTML=message[i_messages]
	      	cover.innerHTML="<a href='"+messagelink[i_messages]+"' target='"+messagetarget[i_messages]+"' onMouseOver='dorollover()' onMouseOut='undorollover()'><img src='"+coverimage[i_loop]+"' width="+(messagewidth-2*borderwidth)+" height="+(messageheight-2*borderwidth)+" border=0></a>"
    docover()
}

function docover() {
        if (i_loop<=coverimage.length-1) {   
			      	cover.innerHTML="<a href='"+messagelink[i_messages]+"' target='"+messagetarget[i_messages]+"' onMouseOver='dorollover()' onMouseOut='undorollover()'><img src='"+coverimage[i_loop]+"' width="+(messagewidth-2*borderwidth)+" height="+(messageheight-2*borderwidth)+" border=0></a>"
            i_loop++
            timer= setTimeout("docover()",pause)  
        }
        else {
            clearTimeout(timer)
            i_loop--
            timer= setTimeout("uncover()",standstill)
       }
}

function uncover() {
        if (i_loop>=0) {  
        	cover.innerHTML="<a href='"+messagelink[i_messages]+"' target='"+messagetarget[i_messages]+"' onMouseOver='dorollover()' onMouseOut='undorollover()'><img src='"+coverimage[i_loop]+"' width="+(messagewidth-2*borderwidth)+" height="+(messageheight-2*borderwidth)+" border=0></a>"
            i_loop--
            timer= setTimeout("uncover()",pause)
        }
        else {
            clearTimeout(timer)
            i_loop=0
            i_messages++
           
            if (i_messages>=message.length) {i_messages=0}
			messagebox.innerHTML=message[i_messages] 
            timer= setTimeout("docover()",(4*pause))
        }
}

function dorollover() {
	messagebox.style.color=rollovercolor
}

function undorollover() {
	messagebox.style.color=fntcolor
}

document.write('<style>')
document.write('.box {')
document.write('font-family:'+fntfamily+';')
document.write('font-size:'+fntsize+'pt;')
document.write('color:'+fntcolor+';')
document.write('font-style:'+fntstyle+';')
document.write('font-weight:'+fntweight+';')
document.write('border-width:'+borderwidth+'px;')
document.write('border-style:'+borderstyle+';')
document.write('border-color:'+bordercolor+';')

document.write('background-color:'+backgroundcolor+';')
document.write('width:'+messagewidth+'px;')
document.write('height:'+messageheight+'px;')
document.write('padding:'+messagepadding+'px;')
document.write('text-align:'+textalign+';')
document.write('}')
document.write('</style>')

document.write('<DIV ID="roof" style="position:relative;width:'+messagewidth+'px;height:'+messageheight+'px;">')
if (document.all) {
	document.write('<span ID="messagebox" class="box" style="position:absolute;"></span>')
}
else {
	document.write('<span ID="messagebox" class="box" style="position:absolute;height:'+(messageheight-2*borderwidth-2*messagepadding)+'px;width:'+(messagewidth-2*borderwidth-2*messagepadding)+'px;"></span>')
}
document.write('<DIV ID="cover" style="position:absolute;width:'+(messagewidth-2*borderwidth)+'px;height:'+(messageheight-2*borderwidth)+'px;"></DIV>')
document.write('</DIV>')
window.onload=init
</script>

Step 2: Go to the top of the script and configure the messages, links, font-attributes, border, size and the the speed of the messageboard.

Step 3: Save the 9 images (below). Put them all into the same folder as your HTML-file. Do not change their names.