« »

Flashing Rich HTML Sticky Board - an useful and practical JavaScript code to rotate your the important news (or notice) on your website, with fading effects on appearing and disappearing. Content can be defined on the same web page, or can be obtained from other pages via AJAX technology; the script also uses cookie to store the last message that users clicked.

Label: flashing, rich HTML, sticky board, rotate, important news, appear, disappear, cookie

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

jquery-1.2.6.min.js

Copy All x2

<style type="text/css">

.tickerstyle{width:200px; height:180px; border:1px solid black; background:lightyellow; padding:8px; overflow:hidden;}

.messagediv{display: none;background:lightyellow}

</style>

Copy All x2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" name="richhtmlticker.js">

/***********************************************
* Rich HTML Ticker- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
/*
* Rich HTML Ticker- by JavaScript Kit (http://www.javascriptkit.com)
* Freeware. Created Sept 13th, 08'
* This credit must stay intact for use
*/

var richhtmlticker={
loadingtext: '<em>Fetching Ticker Contents. Please wait...</em>', //Loading text if content is being fetched via Ajax

getajaxcontent:function($, config){
	config.$ticker.html(this.loadingtext)
	$.ajax({
		url: config.msgsource,
		error:function(ajaxrequest){
			config.$ticker.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
		},
		success:function(content){
			config.$ticker.html(content)
			richhtmlticker.setupticker(config)
		}
	})
},

rotate:function(config){
	if (config.$ticker.get(0)._hoverstate=="over"){
		setTimeout(function(){richhtmlticker.rotate(config)}, config.rotatespeed)
	}
	else{
		config.$messages.eq(config.currentmsg).fadeOut(config.animateduration, function(){
			config.currentmsg=(config.currentmsg<config.$messages.length-1)? config.currentmsg+1 : 0
			config.$messages.eq(config.currentmsg).fadeIn(config.animateduration, function(){
				setTimeout(function(){richhtmlticker.rotate(config)}, config.rotatespeed)
			})
		})
	}
},

getCookie:function(Name){ 
	var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
	if (document.cookie.match(re)) //if cookie found
		return document.cookie.match(re)[0].split("=")[1] //return its value
	return null
},

setCookie:function(name, value){
	document.cookie = name+"="+value
},

setupticker:function(config){
	config.$messages=config.$ticker.find('div.'+config.msgclass).hide()
	config.currentmsg=Math.min(parseInt(richhtmlticker.getCookie(config.id) || 0), config.$messages.length-1)
	config.$messages.hide().eq(config.currentmsg).fadeIn(config.animateduration)
	setTimeout(function(){richhtmlticker.rotate(config)}, config.rotatespeed)
	$(window).bind('unload', function(){richhtmlticker.cleanup(config)})
},

define:function(config){
  jQuery(document).ready(function($){
		config.$ticker=$('#'+config.id)
		if (config.$ticker.length==0)
			return
		config.$ticker.css({overflow:'hidden'}).hover(
			function(){this._hoverstate="over"},
			function(){this._hoverstate="out"}
		)
		if (config.msgsource=="inline"){
			richhtmlticker.setupticker(config)
		}		
		else{
			richhtmlticker.getajaxcontent($,config)
		}
	})
},

cleanup:function(config){
	this.setCookie(config.id, config.currentmsg)
}

} //end richhtmlticker object




//////////// Declare instance of Rich HTML Ticker (invoked when page has loaded): ///////////////////////////

richhtmlticker.define({
	id: "myhtmlticker", //main ticker DIV id
	msgclass: "messagediv", //CSS class of DIVs containing each ticker message
	msgsource: "inline", //Where to look for the messages: "inline", or "path_to_file_on_your_server"
	rotatespeed: 3000, //pause in milliseconds between rotation
	animateduration: 1000 //duration of fade animation in milliseconds 
})
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
</script>

Copy All x2

<div id="myhtmlticker" class="tickerstyle">
<div class="messagediv"><b><a href="/loan-payment-calculator.html/en/">Loan Payment Calculator</a></b><br />A <a href="/javascript/">JavaScript</a> <a href="/javascript/calculation/calculator/">calculator code</a> that calculates your monthly loan payment.</div><div class="messagediv"><b><a href="/epoch-dhtml-calendar-index.html/en/">Epoch DHTML Calendar</a></b><br />Epoch is a flexible DHTML calendar that supports several display formats, such as inline on the page, as a DHTML date picker, or an calendar that with the ability to select multiple dates. Best of all, it's released under the GNU Lesser General Public License, so you can use and distribute this calendar for free inside your web pages and applications.</div><div class="messagediv"><b><a href="/newsscroller.html/en/">NewsScroller</a></b><br />A pausing <a href="/javascript/scroller/">news scroller</a>. Easy to implement, highly configurable, and hyperlink capable.</div><div class="messagediv"><b><a href="/robots-text-generator.html/en/">Robots Text Generator</a></b><br />This <a href="/javascript/utility/generator/">generator</a> creates the meta tag for robots. It also includes the code for the Googlebot.</div><div class="messagediv"><b><a href="/blur-name-typer.html/en/">Blur name Typer</a></b><br />This is a very stylish <a href="/title=DHTML">DHTML</a> ticker with an eyecatching blur effect by asking visitors type string to display.</div></div>