jQuery Auto Browsing URLs with Counter

I made a simple jQuery Auto Browse URLs application before. The application allow webmasters or visitors to browse a list of URLs or website automatically.  However this is always better to let the visitors to know when the next URL or website will be displayed, or when all the URLs are browsed. Let’s improve the jQuery Auto URLs browser a bit.

jQuery Auto Websites Browsing with Counter Demo:

Actually all the jQuery codes were discussed before. I simply assembled them together.

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

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
    $("document").ready(function() {
        
        // This is the first timer when the webpage is opened
        var t = 16;

        function loopCounting1() {
            
            // Display number on text field
            jQuery(".autoBrowseCounter").text(t);

            t = t - 1;
            
            if (t < 0) {
                clearInterval(timer1);
            }    
        }

        // Execute the function in set interval (milli-seconds)
        var timer1 = setInterval(loopCounting1, 1000);
    });
</script>

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

         $.get('http://www.gobiznow.com/blog/jquery-example-files/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]);

                        var t = 16;

                        function loopCounting() {
                            
                            // Display number on text field
                            jQuery(".autoBrowseCounter").text(t);

                            t = t - 1;
                            
                            if (t < 0) {
                                clearInterval(timer2);
                            }
                            
                        }
                
                        // Execute the function in set interval (milli-seconds)
                        var timer2 = setInterval(loopCounting, 1000);

                    
                } else {
                    // Display number on text field
                    jQuery(".autoBrowseCounter").text("Thanks you! Finished!");

                    // 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 Websites Browsing with Counter</h2>
Time for next website to display:<span>...</span>

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

</body>
</html>

Although the above jQuery codes works fine, it should not be written very well. I am sure that the codes can be written in a better and much simple way.

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>