Full version: jsB@nk » Framework » jQuery » Flashing Rich HTML Sticky Board
URL: https://www.javascriptbank.com/flashing-rich-html-sticky-board.html
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.
Full version: jsB@nk » Framework » jQuery » Flashing Rich HTML Sticky Board
URL: https://www.javascriptbank.com/flashing-rich-html-sticky-board.html
<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><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 Ajaxgetajaxcontent: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 : 0config.$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 pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn 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)returnconfig.$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 idmsgclass: "messagediv", //CSS class of DIVs containing each ticker messagemsgsource: "inline", //Where to look for the messages: "inline", or "path_to_file_on_your_server"rotatespeed: 3000, //pause in milliseconds between rotationanimateduration: 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><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>
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js