Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added dynamically changing favicons

  • Loading branch information...
commit 01bdabf012a8d409faab1817b709d521e93dbc98 1 parent 3c6b5b6
@dpskvn authored
View
BIN  images/favicons/favicon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/favicons/favicon2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/favicons/favicon3.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/favicons/favicon4.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/favicons/favicon5.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2  index.html
@@ -5,9 +5,11 @@
<title>Confused Tree</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/type.css" type="text/css" media="screen">
+ <link rel="icon" type="image/png" href="images/favicons/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="js/jquery.text-effects.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
+ <script src="js/favicon.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script type="text/javascript">
View
55 js/favicon.js
@@ -0,0 +1,55 @@
+var favicon = {
+
+defaultPause: 2000,
+
+change: function(iconURL, optionalDocTitle) {
+ clearTimeout(this.loopTimer);
+ if (optionalDocTitle) {
+ document.title = optionalDocTitle;
+ }
+ this.addLink(iconURL, true);
+},
+
+animate: function(iconSequence, optionalDelay) {
+ this.preloadIcons(iconSequence);
+ this.iconSequence = iconSequence;
+ this.sequencePause = (optionalDelay) ? optionalDelay : this.defaultPause;
+ favicon.index = 0;
+ favicon.change(iconSequence[0]);
+ this.loopTimer = setInterval(function() {
+ favicon.index = (favicon.index+1) % favicon.iconSequence.length;
+ favicon.addLink(favicon.iconSequence[favicon.index], false);
+ }, favicon.sequencePause);
+},
+
+loopTimer: null,
+
+preloadIcons: function(iconSequence) {
+ var dummyImageForPreloading = document.createElement("img");
+ for (var i=0; i<iconSequence.length; i++) {
+ dummyImageForPreloading.src = iconSequence[i];
+ }
+},
+
+addLink: function(iconURL) {
+ var link = document.createElement("link");
+ link.type = "image/x-icon";
+ link.rel = "shortcut icon";
+ link.href = iconURL;
+ this.removeLinkIfExists();
+ this.docHead.appendChild(link);
+},
+
+removeLinkIfExists: function() {
+ var links = this.docHead.getElementsByTagName("link");
+ for (var i=0; i<links.length; i++) {
+ var link = links[i];
+ if (link.type=="image/x-icon" && link.rel=="shortcut icon") {
+ this.docHead.removeChild(link);
+ return;
+ }
+ }
+},
+
+docHead:document.getElementsByTagName("head")[0]
+}
View
5 js/script.js
@@ -62,6 +62,7 @@ $(document).ready(function() {
$('#third').fadeOut(1000);
$('#fourth').fadeOut(1000);
$('#fifth').fadeOut(1000);
+ favicon.change('images/favicons/favicon.png');
});
$('.color2').click(function() {
$('#first').fadeOut(1000);
@@ -69,6 +70,7 @@ $(document).ready(function() {
$('#third').fadeOut(1000);
$('#fourth').fadeOut(1000);
$('#fifth').fadeOut(1000);
+ favicon.change('images/favicons/favicon2.png');
});
$('.color3').click(function() {
$('#first').fadeOut(1000);
@@ -76,6 +78,7 @@ $(document).ready(function() {
$('#third').fadeIn(1000);
$('#fourth').fadeOut(1000);
$('#fifth').fadeOut(1000);
+ favicon.change('images/favicons/favicon3.png');
});
$('.color4').click(function() {
$('#first').fadeOut(1000);
@@ -83,6 +86,7 @@ $(document).ready(function() {
$('#third').fadeOut(1000);
$('#fourth').fadeIn(1000);
$('#fifth').fadeOut(1000);
+ favicon.change('images/favicons/favicon4.png');
});
$('.color5').click(function() {
$('#first').fadeOut(1000);
@@ -90,6 +94,7 @@ $(document).ready(function() {
$('#third').fadeOut(1000);
$('#fourth').fadeOut(1000);
$('#fifth').fadeIn(1000);
+ favicon.change('images/favicons/favicon5.png');
});
};
});
Please sign in to comment.
Something went wrong with that request. Please try again.