We often show latest news from various News Site RSS feed in our site. We can show this news as like as scrolling news in the TV channels. We called it news ticker. Here i show the steps that i do to show those news like TV channel scrolling news. I use this javascript file to do this. Here is my steps

1. create a index.php file and add these lines between body tag:

<DIV ID="TICKER" STYLE="width:520px; overflow:hidden"  onmouseover="TICKER_PAUSED=true" onMouseOut="TICKER_PAUSED=false">
<?php
include("xmlparser.php");
?>
</DIV>
<script type="text/javascript" src="webticker_lib.js" language="javascript"></script>

2. Download the webticker_lib.js javascript file from here

3. create a .php file name xmlparser.php and put those line:

<?php

$insideitem = false;
$tag = "";
$title = "";
$description = "";
$link = "";

function startElement($parser, $name, $attrs) {
 global $insideitem, $tag, $title, $description, $link;
 if ($insideitem) {
  $tag = $name;
 } elseif ($name == "ITEM") {
  $insideitem = true;
 }
}

function endElement($parser, $name) {
 global $insideitem, $tag, $title, $description, $link;
 if ($name == "ITEM") {
  printf("<a href='%s' target='_blank'>%s</a> ",
   trim($link),htmlspecialchars(trim($title)));
  $title = "";
  $description = "";
  $link = "";
  $insideitem = false;
 }
}

function characterData($parser, $data) {
 global $insideitem, $tag, $title, $description, $link;
 if ($insideitem) {
 switch ($tag) {
  case "TITLE":
  $title .= $data;
  break;
  case "DESCRIPTION":
  $description .= $data;
  break;
  case "LINK":
  $link .= $data;
  break;
 }
 }
}


  $xml_parser = xml_parser_create();
  xml_set_element_handler($xml_parser, "startElement", "endElement");
  xml_set_character_data_handler($xml_parser, "characterData");
  $fp = fopen("http://bangla.irib.ir/index.php?option=com_rss&feed=RSS2.0&no_html=1","r")
   or die("Error reading RSS data.");
  while ($data = fread($fp, 4096))
   xml_parse($xml_parser, $data, feof($fp))
    or die(sprintf("XML error: %s at line %d", 
     xml_error_string(xml_get_error_code($xml_parser)), 
     xml_get_current_line_number($xml_parser)));
  fclose($fp);
  xml_parser_free($xml_parser);

?>

Here "http://bangla.irib.ir/index.php?option=com_rss&feed=RSS2.0&no_html=1" is the rss feed address, from that i retrieve news. So we to change this address when we want to retrieve news from other RSS feeder.
Thats all. Now Run the index.php file and get news ticker in action.

Often we to create Javascript menu to use in website. Opencube provides a tremendous software to produce various type(horizontal/vertical) of menu and use it our site. This software can be downloaded from this link. For Linux/mac download from here. Use it and enjoy it :).

Ajax tab menu is very useful to show contents without reloading the full page. Last week i create a Ajax based tab menu. Basically i modified my menu by getting help from this link. Here i'll show the steps that i do to create this menu functional.

1. create a simple html file (index.html). Between body tag put these

<ul id="tabmenu">
<li onclick="makeactive(1)"><a class="" id="tab1">First Tab</a></li>
<li onclick="makeactive(2)"><a class="" id="tab2">Second Tab</a></li>
<li onclick="makeactive(3)"><a class="" id="tab3">Third Tab</a></li>
</ul>
<div id="content"></div>

Between head tag put these lines

<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<script language="JavaScript" type="text/javascript">
function makeactive(tab)
{
 document.getElementById("tab1").className = "";
 document.getElementById("tab2").className = "";
 document.getElementById("tab3").className = "";
 document.getElementById("tab"+tab).className = "active";
 callAjax('content.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error');
}
</script>

2. Now create the ajax.js that we add in our head section. These are the content of ajax.js

function callAjax(url, pageElement, callMessage, errorMessage) {
    document.getElementById(pageElement).innerHTML = callMessage;
    try {
    req = new XMLHttpRequest(); /* e.g. Firefox */
    } catch(e) {
      try {
      req = new ActiveXObject("Msxml2.XMLHTTP");  /* some versions IE */
      } catch (e) {
        try {
        req = new ActiveXObject("Microsoft.XMLHTTP");  /* some versions IE */
        } catch (E) {
         req = false;
        }
      }
    }
    req.onreadystatechange = function() {responseAjax(pageElement, errorMessage);};
    req.open("GET",url,true);
    req.send(null);
 }

function responseAjax(pageElement, errorMessage) {
  var output = '';
  if(req.readyState == 4) {
     if(req.status == 200) {
        output = req.responseText;
        document.getElementById(pageElement).innerHTML = output;
        } else {
        document.getElementById(pageElement).innerHTML = errorMessage+"\n"+output;
        }
     }
 }

3. Now we need another php file where output will be processed. Nmae it "content.php" and put these lines in it

<?php
if ($_GET['content'] == 1)
{
 echo 'Content for Page 1';
}
if ($_GET['content'] == 2)
{
 echo 'Content for Page 2';
}
if ($_GET['content'] == 3)
{
 echo 'Content For Page 3';
}
?>

Thats all. Now run the index file and see the tab menu in action.
To get First Tab selected when the page loaded just add this( onload="makeactive(1)") to body tag. So in index.html body tag will look as like as that : <body onload="makeactive(1)">