Text Effects : News Display with Graphic

JavaScriptSource Staff Sep 22, 2008

General

Use this script to display a series of rotating news stories, including graphics and a link to the story. Easy to implement.

Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. [read more]
Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. [read more]
Mirum est notare quam littera gothica, quam nunc putamus parum claram. [read more]

Notes

Created by: Fang
Web Site: WebDeveloper.com Forums
Posted: September 22, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: newsDisplay.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Fang | http://www.webdeveloper.com/forum/showthread.php?t=191419Licensed under: Public Domain
 */

function postNews() {
  aLI=document.getElementById('news').getElementsByTagName('li');
  for(var i=0; i<aLI.length; i++)  {
    aLI[i].style.display="none";
    aLI[i].getElementsByTagName('p')[0];
  }
  rotate(aLI.length-1);
};

var aLI=[];
var timerRUN=null;
var Speed=3000; // change as required

function rotate(idx) {
  aLI[idx].style.display="none";
  idx=(idx<aLI.length-1)? ++idx : 0;
  aLI[idx].style.display="block";
  timerRUN=setTimeout('rotate('+idx+')', Speed);
}

function inView() {
  var newsItem=0;
  for(var i=0; i<aLI.length; i++) {
    if(aLI[i].style.display=="block") {newsItem= i;}
  }
  return newsItem;
}


// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  postNews();
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#news li {
  width: 200px;
  overflow: hidden;
  border: 1px solid #000;
  list-style-type: none;
  color: #000;
  background: #ddd;
  display: none;
}

#news li img {
  display: block;
}

#news li p {
  margin: 0;
  padding: 3px;
  font-size: .8em;
  border-top: 1px solid #000;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="newsDisplay.js"></script>

Body

Paste this code into the BODY section of your HTML document


<ul id="news">
  <li><img src="pix1-sm.gif" width="200" height="150" alt="Picture 1">
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. [<a href="#" onclick="return false;">read more</a>]</p>
  </li>
  <li><img src="pix2-sm.gif" width="200" height="150" alt="Picture 2">
    <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. [<a href="#" onclick="return false;">read more</a>]</p>
  </li>
  <li><img src="pix3-sm.gif" width="200" height="150" alt="Picture 3">
    <p>Mirum est notare quam littera gothica, quam nunc putamus parum claram. [<a href="#" onclick="return false;">read more</a>]</p>
  </li>
</ul>

Leave a Response

(4 comments)

That's correct. You would need to add the links you want the user to go to.

Lee Nov 6, 2008

It's fixed now. Thanks.

Lee Oct 31, 2008

Hi Fang,[br /][br /]Really nice script. But link goes anywhere. What could happen?[br /][br /]Thanks a lot for your help.[br /][br /]Paulo

Paulo Oct 14, 2008

ERROR: Script news-display-with-graphic.html is missing at /www2/jss/cgi-bin/scriptbot2.cgi line 53.

Tony Rogers Sep 29, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details