
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM

Search Site:

Home » DHTML » Article

DHTML News Bar

Article by:

Premshree Pillai (8/28/2002)

	Add to Favourites
	Tell a friend

Sponsored by:

FindMyHosting - Web Hosting Search

Summary:

This is the News Bar script which displays a number of messages and rotates them using DHTML.

Viewed: 49017 times

Rating (85 votes):

4.1 out of 5

Rate this Article

Read Comments

Post Comments

DHTML News Bar

This is the News Bar script which displays a number of messages. To display the next message click on the Right Arrow (Next). For previous message click Left Arrow (Previous). Another array target_url has been added for an option to open link in same or new window.

Also, you have an option whether you want to tick the messages or let it be static. View the source for customisation.

Select All Code

<script language="javascript">

//News Bar script- By Premshree Pillai (premshree@hotmail.com)
//http://www.qiksearch.com/javascripts.htm

//------------------------------CONFIGURE NEWS BAR--------------------------------

//Copy entire script and <style> section in the head of page
//************* SEE END OF SCRIPT FOR OPTION TO TICK MESSAGES *******************

 var msgs = new Array(
     "Welcome to Qiksearch",
     "FREE Javascripts from Qiksearch",
     "Intellisearch Bar 2.0",
     "DynamicDrive.com" ); // No comma after last ticker msg

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

 // For New Window, "1" 
 var target_url = new Array(
     "0",
     "0",
     "0",
     "1" );
     
var barwidth=350 //Enter main bar width in px or %
var setdelay=2000 //Enter delay between msgs, in mili-seconds
var mouseover_color='#B5D0FF' //Specify highlight color
var mouseout_color='#FFFFFF' //Specify default color

//---------------------------------------------------------------------------------

/////////////////////////////////////////////////////////////////////

var count=0;
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||ns6){
document.write('<form name="news_bar"><input type="button" value="3" onclick="moveit(0)" class="scrollerstyle" style="width:22; height:22; border-right-width:0px;" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#000000;background:' + mouseout_color + '; width:'+barwidth+'; height:22; border-width:1; border-color:#000000; cursor:hand" onmouseover="this.style.background=mouseover_color" onmouseout="this.style.background=mouseout_color"><input type="button" value="4" onclick="moveit(1)" class="scrollerstyle" style="width:22; height:22; border-left-width:0px;" name="next" title="Next News"></form>');
}
else{
document.write('<form name="news_bar"><input type="button" value="Previous" onclick="moveit(0)">')
if (navigator.userAgent.indexOf("Opera")!=-1)
document.write('<input type="button" name="news_bar_but" onclick="goURL();" style="width:'+barwidth+'" border="0">')
else
document.write('<input type="button" name="news_bar_but" onclick="goURL();" width="'+barwidth+'" border="0">')
document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')
}

function init_news_bar(){
  document.news_bar.news_bar_but.value=msgs[count];
}
//moveit function by Dynamicdrive.com
function moveit(how){
if (how==1){ //cycle foward
if (count<msgs.length-1)
count++
else
count=0
}
else{ //cycle backward
if (count==0)
count=msgs.length-1
else
count--
}
document.news_bar.news_bar_but.value=msgs[count];
}

function tick_bar(){
setInterval("moveit(1)",setdelay)
}

function goURL(){
 if(target_url[count]=="0")
 {
  location.href=msg_url[count];
 }
 else
 {
  window.open(msg_url[count]);
 }
}

//--------------------------------------Ticker Effect----------------------------------

tick_bar(); // delete this line if you don't want messages to tick

//-------------------------------------------------------------------------------------

init_news_bar();

</script>

Useful Links

Affordable Windows Hosting

Reseller Hosting

Web+Hosting=$1.66

Web Hosting

Hosting

Windows Hosting

Web Hosting Providers

Cheap Hosting

Advertise here

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: Poor Excellent

View highlighted Comments

User Comments on 'DHTML News Bar'

Posted by : Archive Import (durh) at 05:43 on Wednesday, October 09, 2002

where's the script preview option !!???

Posted by : Archive Import (John) at 00:03 on Sunday, October 13, 2002

Preview?

Posted by : Archive Import (Ian) at 19:46 on Wednesday, October 23, 2002

Is this the script or do I have to shot some kinda monkey to get this to work. This is only testing text. Do not read if you have not already

Posted by : Archive Import (Mike) at 16:59 on Thursday, October 31, 2002

Where's is the demo for the script ?? I wanna see it before i use it

Posted by : Archive Import (jay) at 08:27 on Monday, November 04, 2002

Where is the preview button!!!!???

Posted by : Archive Import (How do I reposition the bar?) at 10:08 on Thursday, November 14, 2002

Well its pretty self explanitory, but how do I reposition the bar? Its hiding under my menu.

Posted by : Archive Import (santosh) at 05:31 on Tuesday, November 26, 2002

thanks for your reference

Posted by : Archive Import (David) at 19:28 on Wednesday, November 27, 2002

Looks pretty easy.

Posted by : Archive Import (blue) at 05:48 on Monday, December 09, 2002

What a bunch of lame brains that visit this wonderful site... read a book sometime, dont just buy it and leave it on the shelf!!!

Posted by : Archive Import (ewe) at 17:18 on Saturday, December 28, 2002

Yo.

Posted by : Archive Import (kseo) at 16:01 on Friday, January 03, 2003

PREVIEW???

Posted by : Archive Import (skim) at 12:47 on Tuesday, January 07, 2003

thx a lot

Posted by : Archive Import (Ж▫вĻдк•ќліğђт▫Ж) at 20:22 on Tuesday, January 07, 2003

Ugh! Why cant I find the clock with DHTML?

Posted by : Archive Import (Ж▫вĻдк•ќліğђт▫Ж) at 20:23 on Tuesday, January 07, 2003

Will HTML work in the bar?
<MARQUEE>I hope so</MARQUEE>

Posted by : Archive Import (Richard M) at 03:46 on Tuesday, January 21, 2003

Nice. Great for new developers. Easy to use.

Posted by : Archive Import (Hamid iqbal) at 04:06 on Wednesday, January 29, 2003

Good Luck! Thanx for your Ref...

Posted by : Archive Import (Mohammed.Asif) at 14:37 on Friday, February 28, 2003

Billions of thanx....u know what, i got first place in a web designing competition which held in Bangalore/India on this january by using the ultimate dhtml's from this site.

Posted by : Archive Import (Some Random Surfer) at 04:32 on Saturday, April 05, 2003

awesome.....just the script i was looking for.....

Posted by : Archive Import (marco) at 14:07 on Friday, August 22, 2003

yes that one is right: read books do not just leave on the shelf!!!

To post comments you need to become a member. If you are already a member, please log in .

RELATED ARTICLES
Simple Thumbnail Browsing Solution by Troy Wolf This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets.

Creating CSS Buttons by Thomas D. Greer With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript.

DHTML Horizontal Scroller by Premshree Pillai Scroll text horizontally when the user hovers over a link.

DHTML Javascript Ticker by Premshree Pillai This is a JavaScript Ticker which ticks a number of messages like the one shown above. It also has a useful 'Show All' feature.

Manipulate Scrollbar Colors Using CSS and JavaScript by Mike Thompson The thing about the default color of scrollbars is that it's dull and ugly -- usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily, Cascading Style Sheets and JavaScript can be used to do just that!

DHTML Scrolling Image by Premshree Pillai Using this script the user can scroll an image left or right by clicking a buttong

DHTML News Bar by Premshree Pillai This is the News Bar script which displays a number of messages and rotates them using DHTML.

DHTML Zoom In and Out Script by Premshree Pillai Using zoOom, you can zoom in and zoom out any image that is specified in the code.

DHTML Image Zoom Out by Premshree Pillai Click on the image and it zooms out and disappears. This script could be a way to handle advertising or other images.

Simple Mouse Trail using VB Script by Jeff Anderson With IE gaining in prominence every day, it's becoming acceptable to use VBScript in web pages. That makes some activities like the mouse trail a real cinch.

Recent Forum Threads

•	Site Hacked javascript inserted...
•	Losing background/text color when converting HTML to PDF
•	hidden div block when displayed, displays at an offset of 200px only in IE 6..
•	help - sketch
•	Re: Perl Script - File Handling.
•	Open a file from website
•	Re: to open 5 terminals from one and also execute different commands on each terminal
•	read a selected multiple line, those should match some of the values read in the files..
•	Help me please

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

submit a link - privacy - contact - advertise - hot links - link to us - submit your article