Posted By

fabulant on 02/23/11

Tagged

Versions (?)

Last Edited at 02/23/11 02:26am

Statistics

Viewed 660 times

Favorited by 0 user(s)

Related snippets

Vertical text ticker (using tilted letters)

/ Published in: JavaScript

This is probably the first vertical JavaScript text ticker that sues tilted letters. Works with Internet Explorer 6x/7x/8x/9x, Firefox 3.6x, Opera 10.5x and Google Chrome 4x/5x/6x. Older Browsers show no ticker.

Highlighted TextExpand

<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:1; /* 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=100); /* 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="rightposition"

// 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=false
var okbr=false
var agt=navigator.userAgent.toLowerCase();

okbr= (agt.indexOf("opera 9") != -1 || agt.indexOf("opera/9") != -1);
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 10") != -1 || agt.indexOf("opera/10") != -1);
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 11") != -1 || agt.indexOf("opera/11") != -1); 
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 12") != -1 || agt.indexOf("opera/12") != -1); 
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 13") != -1 || agt.indexOf("opera/13") != -1);  
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 14") != -1 || agt.indexOf("opera/14") != -1);
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 15") != -1 || agt.indexOf("opera/14") != -1);
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 16") != -1 || agt.indexOf("opera/14") != -1);
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 17") != -1 || agt.indexOf("opera/14") != -1);
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 18") != -1 || agt.indexOf("opera/14") != -1);
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 19") != -1 || agt.indexOf("opera/14") != -1);
if (okbr) {okbrowser=true}
okbr= (agt.indexOf("opera 20") != -1 || agt.indexOf("opera/14") != -1);
if (okbr) {okbrowser=true}

okbr = (agt.indexOf("chrome/3") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("chrome/4") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("chrome/5") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("chrome/6") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("chrome/7") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("chrome/8") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("chrome/9") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("chrome/10") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("chrome/11") !=-1);
if (okbr) {okbrowser=true} 
okbr = (agt.indexOf("chrome/12") !=-1);
if (okbr) {okbrowser=true} 
okbr = (agt.indexOf("chrome/13") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("chrome/14") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("chrome/15") !=-1); 
if (okbr) {okbrowser=true}

okbr = (agt.indexOf("firefox/3.6") !=-1 || agt.indexOf("firefox/.36") !=-1 || agt.indexOf("firefox/0.36") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("firefox/3.7") !=-1 || agt.indexOf("firefox/.37") !=-1 || agt.indexOf("firefox/0.37") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("firefox/3.8") !=-1 || agt.indexOf("firefox/.38") !=-1 || agt.indexOf("firefox/0.38") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("firefox/3.9") !=-1 || agt.indexOf("firefox/.39") !=-1 || agt.indexOf("firefox/0.39") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("firefox/4") !=-1 || agt.indexOf("firefox/.4") !=-1 || agt.indexOf("firefox/0.4") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("firefox/5") !=-1 || agt.indexOf("firefox/.5") !=-1 || agt.indexOf("firefox/0.5") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("firefox/6") !=-1 || agt.indexOf("firefox/.6") !=-1 || agt.indexOf("firefox/0.6") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("firefox/7") !=-1 || agt.indexOf("firefox/.7") !=-1 || agt.indexOf("firefox/0.7") !=-1); 
if (okbr) {okbrowser=true}
okbr = (agt.indexOf("firefox/8") !=-1 || agt.indexOf("firefox/.9") !=-1 || agt.indexOf("firefox/0.8") !=-1);
if (okbr) {okbrowser=true} 
okbr = (agt.indexOf("firefox/9") !=-1 || agt.indexOf("firefox/.9") !=-1 || agt.indexOf("firefox/0.9") !=-1); 
if (okbr) {okbrowser=true}

okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/3')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
if (okbr) {okbrowser=true}
okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/4')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
if (okbr) {okbrowser=true}
okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/5')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
if (okbr) {okbrowser=true}
okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/6')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
if (okbr) {okbrowser=true}
okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/7')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
if (okbr) {okbrowser=true}
okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/8')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
if (okbr) {okbrowser=true}
okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/9')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
if (okbr) {okbrowser=true}

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 (okbrowser) {
   	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>

URL: http://www.fabulant.com/downloadcenter/texttickervertical/texttickervertical.html

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.