I used the code posted by Mr. Sean on this group and a working example is at this url http://www.levelfield.com/ticker.html. Thanks Sean and all who helped him develop further.
I added few lines to this code to make something like Yahoo movie home page module. It works nicely but I have noticed that on repeated clicks on the navigation it seems like the module goes berserk and it start to behave weird. Another thing is that inbetween at random the translucent box does not show up and all the text gets aligned to left as if it did not get the css to place it where it should be. Here is my code jQuery.noConflict() var ppdelay = <?php echo $ppdelay; ?>; var newsitems; var curritem=0; var iPause=0; var tbtype=''; var indicdelay = ppdelay-3000; jQuery(document).ready(function(){ var protect = jQuery("a.navig_link:eq(0)").text(); if (protect.charAt(0) != "P"){ alert("Are you trying to copy this code?"); history.back(); } jQuery("#imagebx").css("display","block"); var tickerSelector = "#imagebx .imageitem"; newsitems = jQuery(tickerSelector).hide().hover( function(){ jQuery(this).addClass("hovered"); iPause=1; }, function(){ jQuery(this).removeClass("hovered"); iPause=0; } ).filter(":eq(0)").show().add(tickerSelector).size(); //jQuery("#indic").animate({opacity: 0.0}, 3); jQuery(".navig_item:eq("+curritem+")").addClass("navig_item_active"); var ntext = jQuery(".ntext:eq("+curritem+")").html(); var csstype = jQuery(".transboxpos:eq("+curritem+")").text(); switch(csstype) { case "right": var tbtype = 'tbright'; break; case "bottom": var tbtype = 'tbbottom'; break; default: var tbtype = 'tbleft'; } jQuery("#opaquetext").html(ntext); jQuery("#translucentbox").addClass(tbtype).slideDown("slow",function() { indictimeset = setInterval(function(){showanim()},indicdelay); //jQuery("#indic").animate({opacity: 0.01}, indicdelay).animate({opacity: 1.0}, 3); }); timeset = setInterval(function(){ticknews()},ppdelay); }); function ticknews(itemnum) { if (iPause==0){ jQuery(".navig_item:eq("+curritem +")").removeClass("navig_item_active"); //jQuery("#indic").animate({opacity: 0.0}, 3); jQuery("#indic").hide(); jQuery("#translucentbox").slideUp("slow",function(){ jQuery("#translucentbox").removeClass(tbtype); }); jQuery("#imagebx .imageitem:eq("+curritem +")").fadeOut("slow",function(){ jQuery(this).hide(); }); if (itemnum !=undefined){ curritem = itemnum; }else{ curritem = ++curritem%newsitems; } jQuery(".navig_item:eq("+curritem+")").addClass("navig_item_active"); jQuery("#imagebx .imageitem:eq("+curritem +")").fadeIn("slow",function(){ var ntext = jQuery(".ntext:eq("+curritem+")").html(); jQuery("#opaquetext").html(ntext); var csstype = jQuery(".transboxpos:eq("+curritem+")").text(); switch(csstype) { case "right": var tbtype = 'tbright'; break; case "bottom": var tbtype = 'tbbottom'; break; default: var tbtype = 'tbleft'; } jQuery("#translucentbox").addClass(tbtype).slideDown("slow",function() { indictimeset = setInterval(function(){showanim()},indicdelay); //jQuery("#indic").animate({opacity: 0.01}, indicdelay).animate({opacity: 1.0}, 3); }); }); } } function showanim(){ jQuery("#indic").show(); clearInterval(indictimeset); } function ticknews_new(elnum){ clearInterval(timeset); //clearInterval(indictimeset); ticknews(elnum); timeset = setInterval(function(){ticknews()},ppdelay); } The function ticknews_new is what is called by navigation links. I have tried all day to solve this but to no luck so at last the place to seek help. Thanks in advance