Posted: Tuesday 5th of February 2013

This tutorial teaches you how to create a simple but powerful Auto News or Content Scroller using Ajax, Jquery and PHP.

The system uses the Mouse-enter and Mouse-leave Events to Play and Pause the scrolling of the items or contents.

This is a very simple to understand application as the scripts are well commented to ease usability.

To install the system on your server, please download the zipped folder containing the required files, extract it to your system and then, open the file named README.txt and follow the three steps instructions given in that file.

To see the script in action, please click on the Live Demo button below and download if you like what you see.

HTML CODE:

<!-- Required header files -->
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/vpb_news_scroller_loader.js"></script>


<!-- Scroller Code Begins -->
<div id="vpb_auto_display_news_scroller"></div>
<!-- Scroller Code Ends -->



PHP CODE:

<?php
include "config.php"; //Include the database connection file

//Check for all tutorials in the database
$check_tutorials = mysql_query("select * from `auto_new_scroller_demo` order by `id` desc");
if(mysql_num_rows($check_tutorials) < 1) 
{
    echo '<div class="info">There is no item in the database table to display at the moment.</div>';
}
else {
    ?>
    <div id="vpb_news_scroller_wrapper">
    <div class="vpb_news_scroller_header">Tutorial Topics</div>
    <div class="vpb_news_scroller">
    <ul>
    <?php
    while($get_tutorials = mysql_fetch_array($check_tutorials)) 
    {
        ?>
         <li>
         <a href="http://www.vasplus.info/tutorial.php?id=<?php echo strip_tags($get_tutorials["id"]); ?>&topic=<?php echo strip_tags($get_tutorials["topic"]); ?>" target="_blank">
         <?php echo strip_tags($get_tutorials["topic"]); ?>
         </a>
         </li> 
        <?php
    }
    ?>
    </ul>
    </div>
    </div>
    <?php
}
?>
<script type="text/javascript" src="js/vpb_news_scroller.js"></script>

Ajax/Jquery CODE:

/* We have used window.load function to be sure that all required contents are loaded before the scroller begins to scroll the items */
$(window).load(function()
{
    $(document).ready(function() 
    {
        vpb_auto_display_news_scroller();
    });
});


//This function loads the news scroller
function vpb_auto_display_news_scroller()
{
    $.ajax({
        type: "POST",
        url: "vpb_auto_display_news_scroller.php",
        data: '',
        cache: false,
        beforeSend: function() 
        {
            $("#vpb_auto_display_news_scroller").html('<div style="height:150px;padding-top:120px;min-width:200px;width:auto;margin: 0 auto;font-family:Verdana, Geneva, sans-serif;font-size:12px;" align="center">Loading <img src="images/loadings.gif" align="absmiddle" alt="Loading..." /></div>');
        },
        success: function(response) 
        {
            $('#vpb_auto_display_news_scroller').fadeIn(400).html(response); 
        }
    });
}

Download Live Demo