I am currently trying to write web page that will display the current status of our continuous integration system. Let me preface this by saying that web development is not my area of expertise. We don't have any web developers here so I am going into all of this blind learning as I go. Please excuse my ignorance with regards to the current technologies out there for web development.
The main page shows the status of state of the current build. I have an html page with a jQuery script that is constantly refreshing the page and loading a php script that queries a MySQL db. The code I use is here,
<script src="./js/jquery-1.11.2.min.js"></script>
<script src="./js/jquery-1.11.2.js"></script>
<script>
$(document).ready(function() {
$("#refreshpage").load("index.php");
var refreshId = setInterval(function() {
$("#refreshpage").load('index.php');
}, 5000);
refreshId = null;
$("#refreshpage").unload();
});
</script>
<body class=bground>
<center>
<div id="refreshpage"></div>
</center>
</body>
The page needs to be reloaded automatically so it will reflect the current status of the builds and with the current setup it works fantastically. I would like to extend this by adding additional pages that will relay other relevant information that a pull from a variety of sources. As this needs to be up to date I use that same code above we slight variations on for two more pages.
As each page needs to be refreshed in order to stay current with up to date information I decided on three separate and one page cycling through each one similiar to the techinique used here How to auto refresh cycle multiple website page under one browser window like screen saver? . The code I use is this:
<script type="text/javascript" charset="utf-8">
var sites = [
"http://build/index.html",
"http://proj1/next.html",
"http://proj2/last.html"
];
var activePage = sites.length;
$(document).ready(function () {
var $iframe = $("iframe").attr("src","http://build/index.html");
setInterval(function() {
(activePage == 0) ? activePage = sites.length -1 : activePage = currentSite -1;
$iframe.attr("src",sites[activePage]);
}, 10000);
});
</script>
</head>
<body>
<iframe></iframe>
</body>
This works fine except when ever it cycles to the next page it flashes to white. I know you can preload things on a single page but does anyone know the correct way when cycling though web pages so you don't see that jump?
