We already got enough knowledge to read and get an external text database, get individual records and looping through all records with jQuery. Let’s try to build a very simple application with jQuery, using the read and get text database methods we just learned.

Today I am going to use jQuery to make a simple auto browsing URLs or website application. This application is very useful. In fact this application are always asking by many webmasters.  Firstly, take a look at how this application works.

jQuery Auto Browsing URLs Demo:

Note:

  • There are only four URLs in the text database. However more URLs can be in the database.
  • The URLS will be changed in every 18 seconds.
  • The application can be modified easily to include more features.

Here’s the file of the jQuery application.

<head>
<title>jQuery Auto Browsing URLs</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $("document").ready(function() {

         $.get('http://localhost/xampp/jphp/autoBrowseURL.txt', function(data) {

                    // The result (data) now passed back is a whole trunk of data
                    // alert(data);    

            // Split the whole database trunk into individual lines or records
            // The record delimiter is carriage return. Therefore split it.
                    var lines = data.split("\n");

            var i = -1;

            function rotateURL() {

                i = i + 1;

                if (i < lines.length) {

                    // Each record can be get with lines[i]
                    // Display the URLs in the text database in iframe
                    $("#loadExternalURL iframe").attr("src", lines[i]);

                } else {
                    // Stop the process with clearInterval when all URLs displayed
                    clearInterval(timer);
                }

            }

            // Execute the function in set interval (milli-seconds)
            var timer = setInterval(rotateURL, 18000);
            });

    });
</script>

</head>
<body>

<h2>jQuery Auto Browsing URLs</h2>

<div id="loadExternalURL">
    <iframe width="420" height="300" src="https://www.flashwonderland.com"></iframe>
</div>

</body>
</html>

Actually we already discussed all the codes before. This is just a summary.

jQuery Example File:

Click here to download.

This post discuss how to make a simple Auto Browse URLs application with jQuery.