Gmail / Facebook Style Chat Application
Details Live Demo Download


Posted: Tuesday 5th of February 2013

Auto News Scroller using Ajax, Jquery and PHP



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); 
        }
    });
}




That's it guys...



Comments
1

 

Announcement x
Dear Users and Clients,

This is to inform you that we have recently updated our website generally.

If you experience any problem viewing any part of this website or if you notice that any of our scripts or tutorials are not functioning properly as should be, please click on the Contact Link at the top of this page to report the issue to us.

Our priority is to give you the best of service!


Thank You,
The Vasplus Team

Announcement