Skip to content

Instantly share code, notes, and snippets.

@bkvirendra

bkvirendra/Fullpage.html

Created May 20, 2012 21:00
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 bkvirendra/2759522 to your computer and use it in GitHub Desktop.
Save bkvirendra/2759522 to your computer and use it in GitHub Desktop.
Download ZIP
A web page created at CodePen.io
Raw
Fullpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Facebook Like Alert &middot; CodePen</title>
<style>
#alert {
position: fixed;
display: none;
left: 50%;
margin-left: -300px;
top: 100px;
width: 600px;
text-align: center;
height: auto;
background: #eee;
padding: 30px 10px;
font-family:'Handlee',sans-serif;
font-size: 28px;
font-weight: bold;
border-radius: 10px;
box-shadow: 0px 5px 15px #333;
-webkit-box-shadow:0px 5px 15px #333;
-moz-box-shadow: 0px 5px 15px #333;
border:10px solid rgba(0, 0, 0, .5);
background-clip: padding-box;
text-shadow:0px 1px 0px # FFF;
cursor: default;
}
</style>
</head>
<body>
<div id="alert">
<div id="alertText"></div>
</div>
<button>Click Me</button>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function() {
function alert(textToshow, timeToShow) {
$("#alertText").html(textToshow);
$("#alert").fadeIn(1000, function () {
$("#alertText").fadeIn(700);
});
setTimeout(function () {
hideAlert();
}, timeToShow);
}
function hideAlert() {
$("#alert").fadeOut(700);
}
$(document).ready(function () {
alert("Loading...", 5000);
});
$("button").click(function () {
alert("You Clicked Me...", 5000);
});
})();
</script>
</body>
</html>
Raw
index.html
<div id="alert">
<div id="alertText"></div>
</div>
<button>Click Me</button>
Raw
index.js
function alert(textToshow, timeToShow) {
$("#alertText").html(textToshow);
$("#alert").fadeIn(1000, function () {
$("#alertText").fadeIn(700);
});
setTimeout(function () {
hideAlert();
}, timeToShow);
}
function hideAlert() {
$("#alert").fadeOut(700);
}
$(document).ready(function () {
alert("Loading...", 5000);
});
$("button").click(function () {
alert("You Clicked Me...", 5000);
});
Raw
style.css
#alert {
position: fixed;
display: none;
left: 50%;
margin-left: -300px;
top: 100px;
width: 600px;
text-align: center;
height: auto;
background: #eee;
padding: 30px 10px;
font-family:'Handlee',sans-serif;
font-size: 28px;
font-weight: bold;
border-radius: 10px;
box-shadow: 0px 5px 15px #333;
-webkit-box-shadow:0px 5px 15px #333;
-moz-box-shadow: 0px 5px 15px #333;
border:10px solid rgba(0, 0, 0, .5);
background-clip: padding-box;
text-shadow:0px 1px 0px # FFF;
cursor: default;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment