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:
This post discuss how to make a simple Auto Browse URLs application with jQuery.
Leave a Reply