jQuery Auto Browsing URLs or Websites

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="http://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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>