Skip to content

Instantly share code, notes, and snippets.

@lili2311

lili2311/A-Pen-by-Liliana-Kastilio.markdown

Created March 4, 2014 14:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lili2311/9347303 to your computer and use it in GitHub Desktop.
Save lili2311/9347303 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Liliana Kastilio.
Raw
index.html
<body>
<div id="container">
<div class = "text">Your browser is</div>
</div>
</body>
Raw
script.js
/** Find out the browser version and name **/
function get_browser(){
var N=navigator.appName, ua=navigator.userAgent, tem;
var M=ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
M=M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
return M[0];
}
function get_browser_version(){
var N=navigator.appName, ua=navigator.userAgent, tem;
var M=ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
M=M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
return M[1];
}
// Browser
var browser = document.createElement("div");
browser.innerHTML = get_browser();
browser.setAttribute('class', 'browser-version');
document.getElementById("container").appendChild(browser);
// text
var text = document.createElement("div");
text.innerHTML = "version";
text.setAttribute('class', 'text');
document.getElementById("container").appendChild(text);
// Version
var version = document.createElement("div");
version.innerHTML = get_browser_version();
version.setAttribute('class', 'browser-version');
document.getElementById("container").appendChild(version);
Raw
style.css
.text {
margin: 0 auto;
padding: 50px;
text-align: center;
color: #1b6872;
font-size: 4em;
}
#container {
height: 100%;
width: 100%;
}
.browser-version {
text-decoration: underline;
margin: 0 auto;
text-align: center;
color: #fff;
font-size: 7em;
text-decoration: underline;
}
body {
width: 100%;
height: 100%;
margin: 0 auto;
background-color: #3fbcb3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment