I'm trying to combine the functionality of the 3 codes below to produce a delayed redirect to a random URL while displaying a bar filling up by %. Each one works great, but I need all 3. Any help would be greatly appreciated. Thanks!
The first redirects after a delay
<script type="text/JavaScript">
<!--
setTimeout("location.href = 'http://www.yourURL.com';",1500);
-->
</script>
The second redirects to a random URL
<script type="text/javascript">
(function(n){
var pages = ['http://www.thestormybrain.com/2013/11/malcolm-gladwell-choice-happiness-and.html', 'http://www.thestormybrain.com/2013/11/steve-jobs-how-to-live-before-you-die.html', 'http://www.thestormybrain.com/2013/11/david-blaine-how-i-held-my-breath-for.html'];
n = n < 3? 0 : n < 8? 1 : 2;
window.location.replace(pages[n]);
})(Math.floor(Math.random() * 10));
</script>
The third redirects using a bar being filled with %
<style>
* { font-family: "Arial", sans-serif; }
#wrap { margin-top: 50px;text-align: center; }
#barwrap {
position: relative; /* to contain outer */
margin: 0 auto; /* to centre */
width: 500px;height: 20px; /* size of our bar - required */
text-align: left;
font-weight: bold;
border: 1px solid black;
}
#barwrap P { /* to contain text */
margin: 0; /* FF needs this or text drops below bar */
width: 500px; /* use this node to position text */
text-align: center;
}
#barwrap #outer { /* bar 'background' */
position: absolute;
width: 100%; height: 100%; /* match parent size */
background: gray;
color: #330000; /* original colour of text */
}
#barwrap #inner {
position: relative; /* otherwise outer hides us */
width: 0; height: 100%; /* match parent */
overflow: hidden; /* to hide new text/prevent it wrapping */
background: black;
color: #ff0000; /* colour of changed text */
}
</style>
<script>
var time = 10000; // 10 secs
var steps = 50; // Five per second
var step = 1;
function progress() {
var bar = document.getElementById( "barwrap");
var aStep = (bar.offsetWidth -2) /steps;// 2px border removed from width
var x = Math.round( aStep *step);
var outer = document.getElementById( "outer");
var inner = document.getElementById( "inner");
// Work out seconds based on % progress from current step
var secs = (( time /1000) -Math.floor( ( step /steps) *10));
inner.style.width = x +"px";
step++;
// If 0 seconds, display waiting message instead
outer.firstChild.innerHTML = ( secs? secs +" seconds...": "Please Wait...");
// Match text
inner.firstChild.innerHTML = outer.firstChild.innerHTML;
if( step <= steps) setTimeout( "progress();", time /steps);
window.location = 'http://YourDomainName.com';
}
</script>
<div id='wrap'>
Finding you the perfect article. Hold tight...
<div id='barwrap'> <!-- P wrappers for text positioning -->
<div id='outer'><p></p></div> <!-- original colour/text -->
<div id='inner'><p></p></div> <!-- new colour/text -->
</div>
<br>
<body onload="progress();">
</div>
