Free fun JavaScript: vertical text ticker

» 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

Vertical text ticker
This is probably the first vertical JavaScript text ticker that works fine with Internet Explorer 6x/7x/8x/9x, Firefox 3.6x, Opera 10.5x and Google Chrome 3x/4x/5x/6x. Older Browsers don't display the ticker. You may add as many messages as you like. Each message can be linked. The ticker can be put into the top-right-hand corner or into the the top-left-hand corner or adjusted to your needs. The typing-direction can be set within the style-zone: from bottom to top or from top to bottom.

Rate 'this script' on Hot Scripts

Demo ticker, position on the left (with slight opacity effect)
Click here

Demo ticker, position on the right
Click here

Demo ticker, position adjusted to your needs
Click here

prosoftix.com - Fast and free software download directory

Configuration:

Step 1: Open your webpage and paste the following code right above the </body>-tag (almost at the end of the HTML-code):

<style>

a.textstyle {
color:#ffffff; /* You may change it */
font-family:Arial; /* You may change it */
font-size:20pt; /* You may change it */
font-weight:bold; /* You may change it */
text-decoration:none; /* You may change it */
}

a.textstyle:visited {
color:#ffffff; /* You may change it */
}

a.textstyle:hover {
color:#CCCCCC; /* You may change it */
}

/* PLEASE NOTE that padding, width and height of ticker, border-width must be set within the script-code. See script code below! */
/* IMPORTANT you may change the direction of typing from bottom to top. See comments below within this style-zone */
.boxstyle {
background-color:#668811;/* You may change it */
border-color:#DDDDDD;/* You may change it */
opacity:0.8; /* Set the opacity for Firefox, Opera, Safari and Chrome. Values may range from 0 to 1 */
position:absolute; /* Do not change */
overflow:hidden; /* Do not change */
display: inline-block; /* Do not change */
-moz-transform: scale(1) rotate(90deg) translate(0px); /* Set rotate(-90deg) to change typing from bottom to top */
-webkit-transform: scale(1) rotate(90deg) translate(0px); /* Set rotate(-90deg) to change typing from bottom to top */
-o-transform: scale(1) rotate(90deg) translate(0px); /* Set rotate(-90deg) to change typing from bottom to top */
filter: /* Do not change */  
progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=6.123233995736766e-17, M12=-1,M21=1, M22=6.123233995736766e-17), 
/* Set M12=1,M21=-1 to change typing from bottom to top */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand')"
/* Set M12=1,M21=-1 to change typing from bottom to top */
alpha(opacity=80); /* Set the opacity for Internet Explorer. Values may range from 0 to 100*/

/* rounded corners for Firefox */
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
/* rounded corners for Chrome and Safari */
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
/* rounded corners for Opera */
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}

</style>

<script>
// CREDITS:
// Vertical text ticker
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

var text=new Array()
var textlink=new Array()
var texttarget=new Array()

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// Your messages. Add as many as you like. Experienced webmasters may even embed simple HTML-tags 
// Use short messages as this is a one-line-ticker
text[0]="Experience the joy of JavaScript."
text[1]="Download crazy code dear friends."
text[2]="Try to be happy and come back soon."

// Add a link for each message
// Enter "#" if you don't want to link a message (see sample below)
textlink[0]="http://www.fabulant.com"
textlink[1]="http://www.fabulant.com"
textlink[2]="#"

// Add the target of the link
// Accepted values are "_blank","_top", "_self", "_parent" or the name of any frame
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_parent"

// width and height of ticker (pixels)
var textwidth=580
var textheight=54

// pause between the messages (seconds)
var textpause=2

// border-width (enter 0 if you don't want to add a border)
var textborder=4

// padding of text, distance to border (pixels)
var textpadding=7

// speed (higher=slower)
var speed=80

// set the position of the ticker. Acceptable values are "rightposition" or "leftposition" or "myposition"
// "rightposition" places the ticker into the top-corner on the right
// "leftposition" places the ticker into the top-corner on the left
// "myposition" sets the the horizontal (x_position) and vertical (y_position) position to your needs

var tickerposition="leftposition"

// if you set "myposition" you should enter the x_position amd y_position below (pixels)
var x_position=800
var y_position=140

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
/////////////////////////////////////////////////

// Do not edit below this line

if (document.all) {
	var marginright=document.body.clientWidth-textheight
}
else {
	var marginright=window.innerWidth-textheight
}

var okbrowser=true
var okbr=true
var agt=navigator.userAgent.toLowerCase();

var i_mes=0
var i_substring=0
var i_presubstring=0
var i_text=0
var textcontent=""
var notag=true
var textpresubstring=""
var textaftersubstring=""
textpause*=1000

var browserinfos=navigator.userAgent 
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)

function gettextcontent() {
	tablewidth=textwidth-2*textborder
	tableheight=textheight-2*textborder
	textpresubstring=text[i_text].substring(0,i_presubstring)
	var i_prepre=i_presubstring-1
	if (i_prepre<0) {i_prepre=0}
	if (text[i_text].substring(i_prepre,i_presubstring)=="<"){notag=false}
	if (text[i_text].substring(i_prepre,i_presubstring)==">"){notag=true}
	if (notag) {
		textcontent="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' class='textstyle'>"
		textcontent+=textpresubstring
		textcontent+="</a>"
	}
}

function showticker() {
	if (i_substring<=text[i_text].length) {
		i_substring++
		i_presubstring=i_substring-1
		if (i_presubstring<0) {i_presubstring=0}
		gettextcontent()
		document.getElementById("ticker").innerHTML=textcontent
		var timer=setTimeout("showticker()", speed)
	}
	else {
		clearTimeout(timer)
		var timer=setTimeout("changetext()", textpause)
	}
}

function changetext() {
	i_substring=0
	i_presubstring=0
	i_text++
	if (i_text>text.length-1) {
		i_text=0
	}
	showticker()
}

if (!document.all) {
   	textwidth-=(2*textborder+2*textpadding)
	textheight-=(2*textborder+2*textpadding)
	
	if (tickerposition=="rightposition") {
		document.write('<div ID="ticker" class="boxstyle" style="width:'+textwidth+'px;height:'+textheight+'px;left:'+(-textwidth/2+marginright)+'px;top:'+(+textwidth/2-textheight/2)+'px;padding:'+textpadding+'px;border-width:'+textborder+'px;border-style:solid;">')
		document.write('</div>')	
	}
	else if (tickerposition=="leftposition") {
		document.write('<div ID="ticker" class="boxstyle" style="width:'+textwidth+'px;height:'+textheight+'px;left:'+(-textwidth/2+textheight/2)+'px;top:'+(+textwidth/2-textheight/2)+'px;padding:'+textpadding+'px;border-width:'+textborder+'px;border-style:solid;">')
		document.write('</div>')	
	}
	else if (tickerposition=="myposition") {
		document.write('<div ID="ticker" class="boxstyle" style="width:'+textwidth+'px;height:'+textheight+'px;left:'+(-textwidth/2+textheight/2+x_position)+'px;top:'+(+textwidth/2-textheight/2+y_position)+'px;padding:'+textpadding+'px;border-width:'+textborder+'px;border-style:solid;">')
		document.write('</div>')	
	}
	window.onload=showticker
}
else if (document.all) {
	textwidth-=(2*textborder+2*textpadding)
	textheight-=(2*textborder+2*textpadding)
	if (tickerposition=="rightposition") {
		document.write('<div ID="ticker" class="boxstyle" style="width:'+textwidth+'px;height:'+textheight+'px;left:'+marginright+'px;top:0px;padding:'+textpadding+'px;border-width:'+textborder+'px;border-style:solid;">')
		document.write('</div>')
	}
	else if (tickerposition=="leftposition") {
		document.write('<div ID="ticker" class="boxstyle" style="width:'+textwidth+'px;height:'+textheight+'px;left:0px;top:0px;padding:'+textpadding+'px;border-width:'+textborder+'px;border-style:solid;">')
		document.write('</div>')
	}
	else if (tickerposition=="myposition") {
		document.write('<div ID="ticker" class="boxstyle" style="width:'+textwidth+'px;height:'+textheight+'px;left:'+x_position+'px;top:'+y_position+'px;padding:'+textpadding+'px;border-width:'+textborder+'px;border-style:solid;">')
		document.write('</div>')
	}
	window.onload=showticker
}

</script>

Step 2: Go inside the <style>-tags and configure the style-elements according to the instructions

Step 3: Go into the <script>-code and configure the messages, links, ticker-size, border-width and speed.