Code & the internet

Animating the address bar with replaceState

Post Image

I read a blog post on the Mozilla Developer blog on the new HTML5 javascript pushState and replaceState methods here.  They are to be used within AJAX web applications to alter the address bar and browser to allow improved usability and searchability for modern web applications.

It struck me that this allows amazing new functionality and things to play with.  It reminded me a lot of how we used to be able to change and animate the status bar in the browser through javascript.  I set out to see if I could animate the address bar in the same way (the idea came with a little help from Martin Gillow).

To see a demo of my animation, click here.  Source code is available below.

1
2
3
4
5
6
7
<script>
text = "====";
history.replaceState({}, "", text);
</script>

I decided to use the replaceState method instead of the pushState one because I didn’t want to fill the browser history with loads of junk – just keep replacing the current page value.  The parameters that are sent through firstly an object used for reference when the page is loaded, a title which is currently not used anywhere and finally the change to the address bar.

If I then put this in a loop, I can animate the address bar.  I have decided to put a + sign moving along a row of =s.  I tried altering the timeout between frames and discovered that the refresh rate is quite slow for the address bar.  I have found that in Safari on a Mac, the animation works best with a refresh rate of around 200ms.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
var count = 0;
var t;
function animate() {
text = "";
count++;
for(i=0;i<=20;i++) {
symbol = "=";
if(count == i) symbol = "+";
text = text + symbol;
}
if(count==20) count = 0;
history.replaceState({}, "", text);
t = setTimeout("animate()", 200);
}
</script>

Finally, set up the start and stop buttons and the rest of the html page.  The full source code can be found below.

If you have liked this post please check back soon and take a look through the archives.  Even better, sign up to the RSS feed and get updates sent straight to you!  Thanks for reading.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
<head>
<title>Animated Address Bar</title>
<script type="text/javascript" language="JavaScript">
var count = 0;
var t;
function animate() {
text = "";
count++;
for(i=0;i<=20;i++) {
symbol = "=";
if(count == i) symbol = "+";
text = text + symbol;
}
if(count==20) count = 0;
history.replaceState({}, "", text);
t = setTimeout("animate()", 200);
}
function stop() {
clearTimeout(t);
}
</script>
</head>
<body>
<input type="button" onclick="animate(); return false;" value="Start">
<input type="button" onclick="stop(); return false;" value="Stop">
<p><a href="">Back to blog</a></p>
</body>
</html>

Update:

My friend and colleague, Martin Gillow, has taken this idea and built upon it with an amazing address bar based game, it’s available at http://www.thegillowfamily.co.uk, go take a look!

Related Posts:

2 Responses to “Animating the address bar with replaceState”

  1. [...] the new javascript function of replaceState and the new possibilities this provides (take a look at Animating the address bar with replaceState).  My plan was to use this functionality to provide information on elements in the DOM within the [...]

Leave a Reply

Previously

Building a PHPDoc parser in PHP

This is the second in a series of posts about how I built Doqumentor – The Runtime PHP Documen


Using the PHP Reflection API to document your code

I have recently spent a bit of time writing a new PHP development tool for documenting code at runti


Exploring the iPhone’s accelerometer through Javascript

The iPhone has had an accelerometer in it since the start, allowing users to tilt the device and it