Skip to content

Instantly share code, notes, and snippets.

@kzkamiya

kzkamiya/index.html

Last active August 29, 2015 14:10
Show Gist options
  • Save kzkamiya/3556ca11a7cfcd610d21 to your computer and use it in GitHub Desktop.
Save kzkamiya/3556ca11a7cfcd610d21 to your computer and use it in GitHub Desktop.
Download ZIP
material-design-icons home
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>material-design-icons home</title>
</head>
<body>
<style>
* {
border: 0;
margin: 0;
padding: 0;
}
.home_button {
position: fixed;
top: 10px;
right: 10px;
box-shadow: 0px 5px 5px lightgray;
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: once;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 0.3s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.3s;
animation-name: dropHeader;
animation-iteration-count: once;
animation-timing-function: ease-in;
animation-duration: 0.3s;
background: #ccc;
border: 2px solid #aaa;
}
.home_button,
.home_button:before,
.home_button:after {
-webkit-transition: all .3s;
transition: all .3s;
}
.home_button:hover {
background: #999;
}
.home_button_title {
color: #111;
text-decoration: none;
font-weight: bold;
text-align: center;
font-size: 11px;
width: 40px;
height: 40px;
padding: 10px;
vertical-align: middle;
display: table-cell;
}
.home_button > svg > path:nth-child(1) {
fill: #fff;
}
@-moz-keyframes dropHeader {
0% {
-moz-transform: translateY(-40px);
}
100% {
-moz-transform: translateY(0);
}
}
@-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes dropHeader {
0% {
transform: translateY(-40px);
}
100% {
transform: translateY(0);
}
}
</style>
- Home Button
<div>
https://google.github.io/material-design-icons/action/svg/ic_home_24px.svg
</div>
<div>
Sample URL: <a href='http://bl.ocks.org/kzkamiya/3556ca11a7cfcd610d21' target='_blank'>http://bl.ocks.org/kzkamiya/3556ca11a7cfcd610d21</a>
</div>
<div>
Sample Link URL: <a href='javascript:location.href = location.href;'>Link</a>
</div>
<div>
Sample winod.open URL: <a href='javascript:window.open(location.href);'>window.open</a>
</div>
<script>
/*<![CDATA[*/
(function() {
var makeHomeButton = function() {
/*close or back button*/
var home_button = document.createElement('div');
home_button.className = "home_button";
if (window.opener) {
home_button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24"> <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/> < path d = "M0 0h24v24h-24z" fill = "none" / > < foreignObject display = "none" > < div class = "home_button_title" > Close < /div></foreignObject > ';
home_button.onclick = function() {
window.close()
};
} else if (!document.referrer) {
home_button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3l-10-9-10 9h3v8z" /><path d="M0 0h24v24h-24z" fill="none" /><foreignObject display="none"><div class="home_button_title">Home</div></foreignObject>';
home_button.onclick = function() {
location.href = "/"
};
} else {
if (window.addEventListener) {
window.addEventListener('unload', function() {
backResult = true;
}, false);
} else if (window.attachEvent) {
window.attachEvent('unload', function() {
backResult = true;
});
}
if (window.addEventListener) {
window.addEventListener('beforeunload', function() {
backResult = true;
}, false);
} else if (window.attachEvent) {
window.attachEvent('beforeunload', function() {
backResult = true;
});
}
/*
YAHOO.util.Event.addListener(window, "unload", function() {
backResult = true;
});
YAHOO.util.Event.addListener(window, "beforeunload", function() {
backResult = true;
});
*/
home_button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24"><path d="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z"/><foreignObject display="none"> <path d="M0 0h24v24h-24z" fill="none"/><div class="home_button_title">Back</div></foreignObject>';
home_button.onclick = function() {
history.back()
setTimeout(function() {
if (!backResult) {
alert('Move to the top page.');
location.href = "/";
}
}, 100);
};
}
var objBody = document.getElementsByTagName('body').item(0);
objBody.appendChild(home_button);
}
if (window.addEventListener) {
window.addEventListener('load', makeHomeButton, false);
} else if (window.attachEvent) {
window.attachEvent('load', makeHomeButton);
}
})(); /*]]>*/
</script>
<!---
<div class="home_button">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3l-10-9-10 9h3v8z" />
<path d="M0 0h24v24h-24z" fill="none" />
<foreignObject display="none">
<div class="home_button_title">HOME</div>
</foreignObject>
</svg>
</div>
-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment