News Bar : Ticker « GUI Components « JavaScript DHTML






News Bar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>News Bar</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#008000; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#00B400; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#008000; font-weight:bold}
</style>
</head>
<body bgcolor="#FFFFFF">

<center>
<span class="header">News Bar</span>
<br>
<script language="javascript">
 
//**************************************************
// News Bar                                        *
// Date created : 1 March, 2002                    *
// (c) 2002 Premshree Pillai. All rights reserved. *
// http://www.qiksearch.com                        *
// premshree@hotmail.com                           *
// Visit http://www.qiksearch.com/javascripts.htm  *
//                               for FREE scripts  *
// Use freely as long as this message is intact    *
//**************************************************
// Location : http://www.qiksearch.com/javascripts/news-bar.htm

var count=0;

if (navigator.appName=="Microsoft Internet Explorer" || (navigator.appName=="Netscape" && navigator.appVersion >= "5"))
{
document.write('<form name="news_bar"><input type="button" value="3" onclick="javascript:prev_news()" style="width:22; height:22; font-family:webdings; background:#FFFFFF; border-left-width:1px; border-right-width:0px; border-top-width:1px; border-bottom-width:1px; border-color:#000000; cursor:hand" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#000000;background:#FFFFFF; width:350; height:22; border-width:1; border-color:#000000; cursor:hand" onmouseover="this.style.background=&#39;#E1FFE1&#39;;return true" onmouseout="this.style.background=&#39;#FFFFFF&#39;;return true" onmousedown="this.style.background=&#39;#00C000&#39;;return true"><input type="button" value="4" onclick="javascript:next_news();" style="width:22; height:22; font-family:webdings; background:#FFFFFF; border-left-width:0; border-right-width:1px; border-top-width:1px; border-bottom-width:1px; border-color:#000000; cursor:hand" name="next" title="Next News"></form>');
}
else
{
document.write('<form name="news_bar"><input type="button" value="Previous" onclick="javascript:prev_news();"><input type="button" name="news_bar_but" onclick="goURL();" width="300" border="0"><input type="button" value="Next" onclick="javascript:next_news();"></form>');
}

 var msgs = new Array(
     "Welcome to Qiksearch",
     "FREE Javascripts",
     "Intellisearch Bar NOW!",
     "www.qiksearch.com",
     "FREE Articles" ); // No comma after last ticker msg

 var msg_url = new Array(
     "http://www.qiksearch.com",
     "http://www.qiksearch.com/javascripts.htm",
     "http://intellisearch.cjb.net",
     "http://www.qiksearch.com",
     "http://www.qiksearch.com/articles.htm" ); // No comma after last ticker url

function init_news_bar()
{
  this.document.news_bar.news_bar_but.value=msgs[count];
}

function prev_news()
{ 
 if(count>0)
 {
  count-=1;
  this.document.news_bar.news_bar_but.value=msgs[count];
 }
 else
 {
  window.alert("This is the first News Item");
 }
}

function next_news()
{
 if(count<msgs.length-1)
 {
  count+=1;
  this.document.news_bar.news_bar_but.value=msgs[count];
 }
 else
 {
  window.alert("This is the last News Item");
 }
}

function goURL()
{
 location.href=msg_url[count];
}


init_news_bar();

</script>

<table width="400" align="center" cellspacing="0" cellpadding="0"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This is a Cross Browser Javascript News Bar that displays a number of messages on a button.
To see the next news item, click on the right arrow (Next). To view the previous news item, click on the left arrow. (Previous)
<br><br>This news bar is very easy to customise. You can add any number of messages and their corresponding URLs. Messages must be added to the array <font face="courier">msgs</font> and the URLs must
be added to the array <font face="courier">msg_url</font>.
<br><br>This news bar displays the messages on a button. You can change the style of the button easily.
<br><br>To use this script, you just have to copy the &lt;script&gt; section of the source and paste it wherever you require on your web page.
<br><br><hr style="width:100%; height:1; color:#007000">
<a href="mailto:premshree@hotmail.com?Subject=Javascripts" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a>

</font>
</td></tr></table>

</center>
</body>
</html>

           
       








Related examples in the same category

1.XML Ticker (IE)
2.Text Box Ticker
3.JavaScript Ticker using Tabular Data Control
4.Fading Ticker for IE
5.JavaScript Ticker 1.3 (IE)
6.Button Ticker