Advanced Search

Vertical text ticker (using tilted letters)

/ Published in: JavaScript
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!-- BEGINNING OF THE CODE FOR THE VERTICAL TEXT TICKER -->
  2.  
  3. <!----------------------------------------->
  4. <!-- STYLE-CONFIGURATION STARTS HERE -->
  5. <!----------------------------------------->	
  6.  
  7. <style>
  8.  
  9. a.textstyle {
  10. color:#ffffff; /* You may change it */
  11. font-family:Arial; /* You may change it */
  12. font-size:20pt; /* You may change it */
  13. font-weight:bold; /* You may change it */
  14. text-decoration:none; /* You may change it */
  15. }
  16.  
  17. a.textstyle:visited {
  18. color:#ffffff; /* You may change it */
  19. }
  20.  
  21. a.textstyle:hover {
  22. color:#CCCCCC; /* You may change it */
  23. }
  24.  
  25. /* PLEASE NOTE that padding, width and height of ticker, border-width must be set within the script-code. See script code below! */
  26. /* IMPORTANT you may change the direction of typing from bottom to top. See comments below within this style-zone */
  27. .boxstyle {
  28. background-color:#668811;/* You may change it */
  29. border-color:#DDDDDD;/* You may change it */
  30. opacity:1; /* Set the opacity for Firefox, Opera, Safari and Chrome. Values may range from 0 to 1 */
  31. position:absolute; /* Do not change */
  32. overflow:hidden; /* Do not change */
  33. display: inline-block; /* Do not change */
  34. -moz-transform: scale(1) rotate(90deg) translate(0px); /* Set rotate(-90deg) to change typing from bottom to top */
  35. -webkit-transform: scale(1) rotate(90deg) translate(0px); /* Set rotate(-90deg) to change typing from bottom to top */
  36. -o-transform: scale(1) rotate(90deg) translate(0px); /* Set rotate(-90deg) to change typing from bottom to top */
  37. filter: /* Do not change */  
  38. progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=6.123233995736766e-17, M12=-1,M21=1, M22=6.123233995736766e-17), 
  39. /* Set M12=1,M21=-1 to change typing from bottom to top */
  40. -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand')"
  41. /* Set M12=1,M21=-1 to change typing from bottom to top */
  42. alpha(opacity=100); /* Set the opacity for Internet Explorer. Values may range from 0 to 100*/
  43.  
  44. /* rounded corners for Firefox */
  45. -moz-border-radius-topleft: 15px;
  46. -moz-border-radius-bottomright: 15px;
  47. /* rounded corners for Chrome and Safari */
  48. -webkit-border-top-left-radius: 15px;
  49. -webkit-border-bottom-right-radius: 15px;
  50. /* rounded corners for Opera */
  51. border-top-left-radius: 15px;
  52. border-bottom-right-radius: 15px;
  53. }
  54.  
  55. </style>
  56.  
  57. <!----------------------------------------->
  58. <!-- STYLE-CONFIGURATION ENDS HERE -->
  59. <!----------------------------------------->
  60.  
  61. <script>
  62. // CREDITS:
  63. // Vertical text ticker
  64. // By Peter Gehrig
  65. // Copyright (c) 2010 Peter Gehrig. All rights reserved.
  66. // Permission given to use the script provided that this notice remains as is.
  67. // Additional scripts can be found at http://www.fabulant.com
  68.  
  69. // IMPORTANT:
  70. // If you add this script to a script-library or script-archive
  71. // you have to add a highly visible link to
  72. // http://www.fabulant.com on the webpage
  73. // where this script will be featured
  74.  
  75. var text=new Array()
  76. var textlink=new Array()
  77. var texttarget=new Array()
  78.  
  79. /////////////////////////////////////////////////
  80. // SCRIPT-CONFIGURATION STARTS HERE
  81. /////////////////////////////////////////////////
  82.  
  83. // Your messages. Add as many as you like. Experienced webmasters may even embed simple HTML-tags 
  84. // Use short messages as this is a one-line-ticker
  85. text[0]="Experience the joy of JavaScript."
  86. text[1]="Download crazy code dear friends."
  87. text[2]="Try to be happy and come back soon."
  88.  
  89. // Add a link for each message
  90. // Enter "#" if you don't want to link a message (see sample below)
  91. textlink[0]="http://www.fabulant.com"
  92. textlink[1]="http://www.fabulant.com"
  93. textlink[2]="#"
  94.  
  95. // Add the target of the link
  96. // Accepted values are "_blank","_top", "_self", "_parent" or the name of any frame
  97. texttarget[0]="_blank"
  98. texttarget[1]="_self"
  99. texttarget[2]="_parent"
  100.  
  101. // width and height of ticker (pixels)
  102. var textwidth=580
  103. var textheight=54
  104.  
  105. // pause between the messages (seconds)
  106. var textpause=2
  107.  
  108. // border-width (enter 0 if you don't want to add a border)
  109. var textborder=4
  110.  
  111. // padding of text, distance to border (pixels)
  112. var textpadding=7
  113.  
  114. // speed (higher=slower)
  115. var speed=80
  116.  
  117. // set the position of the ticker. Acceptable values are "rightposition" or "leftposition" or "myposition"
  118. // "rightposition" places the ticker into the top-corner on the right
  119. // "leftposition" places the ticker into the top-corner on the left
  120. // "myposition" sets the the horizontal (x_position) and vertical (y_position) position to your needs 
  121.  
  122. var tickerposition="rightposition"
  123.  
  124. // if you set "myposition" you should enter the x_position amd y_position below (pixels)
  125. var x_position=800
  126. var y_position=140
  127.  
  128. /////////////////////////////////////////////////
  129. // SCRIPT-CONFIGURATION ENDS HERE
  130. /////////////////////////////////////////////////
  131.  
  132. // Do not edit below this line
  133.  
  134. if (document.all) {
  135. 	var marginright=document.body.clientWidth-textheight
  136. }
  137. else {
  138. 	var marginright=window.innerWidth-textheight
  139. }
  140.  
  141. var okbrowser=false
  142. var okbr=false
  143. var agt=navigator.userAgent.toLowerCase();
  144.  
  145. okbr= (agt.indexOf("opera 9") != -1 || agt.indexOf("opera/9") != -1);
  146. if (okbr) {okbrowser=true}
  147. okbr= (agt.indexOf("opera 10") != -1 || agt.indexOf("opera/10") != -1);
  148. if (okbr) {okbrowser=true}
  149. okbr= (agt.indexOf("opera 11") != -1 || agt.indexOf("opera/11") != -1); 
  150. if (okbr) {okbrowser=true}
  151. okbr= (agt.indexOf("opera 12") != -1 || agt.indexOf("opera/12") != -1); 
  152. if (okbr) {okbrowser=true}
  153. okbr= (agt.indexOf("opera 13") != -1 || agt.indexOf("opera/13") != -1);  
  154. if (okbr) {okbrowser=true}
  155. okbr= (agt.indexOf("opera 14") != -1 || agt.indexOf("opera/14") != -1);
  156. if (okbr) {okbrowser=true}
  157. okbr= (agt.indexOf("opera 15") != -1 || agt.indexOf("opera/14") != -1);
  158. if (okbr) {okbrowser=true}
  159. okbr= (agt.indexOf("opera 16") != -1 || agt.indexOf("opera/14") != -1);
  160. if (okbr) {okbrowser=true}
  161. okbr= (agt.indexOf("opera 17") != -1 || agt.indexOf("opera/14") != -1);
  162. if (okbr) {okbrowser=true}
  163. okbr= (agt.indexOf("opera 18") != -1 || agt.indexOf("opera/14") != -1);
  164. if (okbr) {okbrowser=true}
  165. okbr= (agt.indexOf("opera 19") != -1 || agt.indexOf("opera/14") != -1);
  166. if (okbr) {okbrowser=true}
  167. okbr= (agt.indexOf("opera 20") != -1 || agt.indexOf("opera/14") != -1);
  168. if (okbr) {okbrowser=true}
  169.  
  170. okbr = (agt.indexOf("chrome/3") !=-1); 
  171. if (okbr) {okbrowser=true}
  172. okbr = (agt.indexOf("chrome/4") !=-1); 
  173. if (okbr) {okbrowser=true}
  174. okbr = (agt.indexOf("chrome/5") !=-1); 
  175. if (okbr) {okbrowser=true}
  176. okbr = (agt.indexOf("chrome/6") !=-1); 
  177. if (okbr) {okbrowser=true}
  178. okbr = (agt.indexOf("chrome/7") !=-1); 
  179. if (okbr) {okbrowser=true}
  180. okbr = (agt.indexOf("chrome/8") !=-1); 
  181. if (okbr) {okbrowser=true}
  182. okbr = (agt.indexOf("chrome/9") !=-1); 
  183. if (okbr) {okbrowser=true}
  184. okbr = (agt.indexOf("chrome/10") !=-1); 
  185. if (okbr) {okbrowser=true}
  186. okbr = (agt.indexOf("chrome/11") !=-1);
  187. if (okbr) {okbrowser=true} 
  188. okbr = (agt.indexOf("chrome/12") !=-1);
  189. if (okbr) {okbrowser=true} 
  190. okbr = (agt.indexOf("chrome/13") !=-1); 
  191. if (okbr) {okbrowser=true}
  192. okbr = (agt.indexOf("chrome/14") !=-1); 
  193. if (okbr) {okbrowser=true}
  194. okbr = (agt.indexOf("chrome/15") !=-1); 
  195. if (okbr) {okbrowser=true}
  196.  
  197. okbr = (agt.indexOf("firefox/3.6") !=-1 || agt.indexOf("firefox/.36") !=-1 || agt.indexOf("firefox/0.36") !=-1); 
  198. if (okbr) {okbrowser=true}
  199. okbr = (agt.indexOf("firefox/3.7") !=-1 || agt.indexOf("firefox/.37") !=-1 || agt.indexOf("firefox/0.37") !=-1); 
  200. if (okbr) {okbrowser=true}
  201. okbr = (agt.indexOf("firefox/3.8") !=-1 || agt.indexOf("firefox/.38") !=-1 || agt.indexOf("firefox/0.38") !=-1); 
  202. if (okbr) {okbrowser=true}
  203. okbr = (agt.indexOf("firefox/3.9") !=-1 || agt.indexOf("firefox/.39") !=-1 || agt.indexOf("firefox/0.39") !=-1); 
  204. if (okbr) {okbrowser=true}
  205. okbr = (agt.indexOf("firefox/4") !=-1 || agt.indexOf("firefox/.4") !=-1 || agt.indexOf("firefox/0.4") !=-1); 
  206. if (okbr) {okbrowser=true}
  207. okbr = (agt.indexOf("firefox/5") !=-1 || agt.indexOf("firefox/.5") !=-1 || agt.indexOf("firefox/0.5") !=-1); 
  208. if (okbr) {okbrowser=true}
  209. okbr = (agt.indexOf("firefox/6") !=-1 || agt.indexOf("firefox/.6") !=-1 || agt.indexOf("firefox/0.6") !=-1); 
  210. if (okbr) {okbrowser=true}
  211. okbr = (agt.indexOf("firefox/7") !=-1 || agt.indexOf("firefox/.7") !=-1 || agt.indexOf("firefox/0.7") !=-1); 
  212. if (okbr) {okbrowser=true}
  213. okbr = (agt.indexOf("firefox/8") !=-1 || agt.indexOf("firefox/.9") !=-1 || agt.indexOf("firefox/0.8") !=-1);
  214. if (okbr) {okbrowser=true} 
  215. okbr = (agt.indexOf("firefox/9") !=-1 || agt.indexOf("firefox/.9") !=-1 || agt.indexOf("firefox/0.9") !=-1); 
  216. if (okbr) {okbrowser=true}
  217.  
  218. okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/3')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
  219. if (okbr) {okbrowser=true}
  220. okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/4')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
  221. if (okbr) {okbrowser=true}
  222. okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/5')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
  223. if (okbr) {okbrowser=true}
  224. okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/6')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
  225. if (okbr) {okbrowser=true}
  226. okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/7')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
  227. if (okbr) {okbrowser=true}
  228. okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/8')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
  229. if (okbr) {okbrowser=true}
  230. okbr= ((agt.indexOf('safari')!=-1)&&(agt.indexOf('version/9')!=-1)&&(agt.indexOf('mac')!=-1))?true:false;
  231. if (okbr) {okbrowser=true}
  232.  
  233. var i_mes=0
  234. var i_substring=0
  235. var i_presubstring=0
  236. var i_text=0
  237. var textcontent=""
  238. var notag=true
  239. var textpresubstring=""
  240. var textaftersubstring=""
  241. textpause*=1000
  242.  
  243. var browserinfos=navigator.userAgent 
  244. var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
  245. var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
  246. var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
  247. var opera=browserinfos.match(/Opera/)  
  248.  
  249. function gettextcontent() {
  250. 	tablewidth=textwidth-2*textborder
  251. 	tableheight=textheight-2*textborder
  252. 	textpresubstring=text[i_text].substring(0,i_presubstring)
  253. 	var i_prepre=i_presubstring-1
  254. 	if (i_prepre<0) {i_prepre=0}
  255. 	if (text[i_text].substring(i_prepre,i_presubstring)=="<"){notag=false}
  256. 	if (text[i_text].substring(i_prepre,i_presubstring)==">"){notag=true}
  257. 	if (notag) {
  258. 		textcontent="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' class='textstyle'>"
  259. 		textcontent+=textpresubstring
  260. 		textcontent+="</a>"
  261. 	}
  262. }
  263.  
  264. function showticker() {
  265. 	if (i_substring<=text[i_text].length) {
  266. 		i_substring++
  267. 		i_presubstring=i_substring-1
  268. 		if (i_presubstring<0) {i_presubstring=0}
  269. 		gettextcontent()
  270. 		document.getElementById("ticker").innerHTML=textcontent
  271. 		var timer=setTimeout("showticker()", speed)
  272. 	}
  273. 	else {
  274. 		clearTimeout(timer)
  275. 		var timer=setTimeout("changetext()", textpause)
  276. 	}
  277. }
  278.  
  279. function changetext() {
  280. 	i_substring=0
  281. 	i_presubstring=0
  282. 	i_text++
  283. 	if (i_text>text.length-1) {
  284. 		i_text=0
  285. 	}
  286. 	showticker()
  287. }
  288.  
  289.  
  290. if (okbrowser) {
  291.    	textwidth-=(2*textborder+2*textpadding)
  292. 	textheight-=(2*textborder+2*textpadding)
  293.  
  294. 	if (tickerposition=="rightposition") {
  295. 		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;">')
  296. 		document.write('</div>')	
  297. 	}
  298. 	else if (tickerposition=="leftposition") {
  299. 		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;">')
  300. 		document.write('</div>')	
  301. 	}
  302. 	else if (tickerposition=="myposition") {
  303. 		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;">')
  304. 		document.write('</div>')	
  305. 	}
  306. 	window.onload=showticker
  307. }
  308. else if (document.all) {
  309. 	textwidth-=(2*textborder+2*textpadding)
  310. 	textheight-=(2*textborder+2*textpadding)
  311. 	if (tickerposition=="rightposition") {
  312. 		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;">')
  313. 		document.write('</div>')
  314. 	}
  315. 	else if (tickerposition=="leftposition") {
  316. 		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;">')
  317. 		document.write('</div>')
  318. 	}
  319. 	else if (tickerposition=="myposition") {
  320. 		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;">')
  321. 		document.write('</div>')
  322. 	}
  323. 	window.onload=showticker
  324. }
  325.  
  326. </script>
  327.  
  328. <!-- END OF THE CODE FOR THE VERTICAL TEXT TICKER -->

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.