Skip to content

Instantly share code, notes, and snippets.

@tooky

tooky/movie_notice.html

Created November 19, 2009 21:59
Show Gist options
  • Save tooky/239080 to your computer and use it in GitHub Desktop.
Save tooky/239080 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
movie_notice.html
<html>
<head>
<title>Example Notice</html>
<style type="text/css">
body { font-family: helvetica; }
#notice {
color: #fff;
position: absolute;
width: 300px;
top: 5px;
right: 5px;
}
#notice .wrapper {
padding: 5px 20px;
background-color: transparent;
}
#notice .bg {
position: absolute;
z-index: -1;
opacity: 0.7;
width: 100%;
height: 100%;
background-color: black;
}
</style>
<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
(function($){
jQuery.fn.idle = function(time){
var i = $(this);
i.queue(function(){
setTimeout(function(){
i.dequeue();
}, time);
});
return this;
};
})(jQuery);
$(document).ready(function() {
var notice = $('#notice');
notice.hide()
.slideDown(500)
.idle(3000)
.slideUp(750);
});
</script>
</head>
<body>
<h1>An Example Notice</h1>
<div id="notice">
<div class="bg" ></div>
<div class="wrapper">
<h2>Thank you</h2>
<p>Your request has been noted.</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, ligula phasellus sagittis urna cursus nunc, viverra libero pulvinar. Aptent nulla, lorem sit, in venenatis feugiat nulla. Ipsum lacus cursus pede faucibus ac, accumsan molestiae netus dignissim orci, vestibulum bibendum tristique sollicitudin auctor, taciti pellentesque maecenas pretium urna nec. Vitae magna sit cras nisl, duis similique, imperdiet fringilla amet, amet vivamus auctor scelerisque ac mi cursus, maxime ante laoreet nec. Ultrices phasellus imperdiet quam felis lectus semper, a dapibus condimentum consequatur suscipit, pede mauris nulla, pede dignissim at neque, in eleifend enim risus. Dui in nunc pede, pellentesque fusce, duis justo eget velit, aenean vitae proin mattis mauris, lorem primis phasellus. Elit sit congue dui, risus sed vivamus ullamcorper maecenas malesuada sed, in tempor convallis dictum nunc etiam nonummy, ipsum mi duis, eleifend et congue dui eu sem.</p>
<p>Ut imperdiet donec quam. Curabitur suscipit penatibus sit aliquam suspendisse mauris, adipiscing tortor magna, inceptos consectetuer curabitur adipiscing dui, quam tortor lobortis sed odio. Elementum vehicula elementum, nibh volutpat vehicula lacus, mauris et a. Rem a sit at elit, arcu nulla vitae aliquam et laoreet, eget integer, ac tempor orci eget, in dui curabitur sociosqu. Luctus turpis, laoreet massa quis arcu sit sapien eleifend, commodo malesuada amet sit praesent elit suscipit, nullam lectus et. Donec vestibulum, odio est ac integer at. Velit ut magna sociosqu, amet ac et mauris. Cras eros, nascetur nec, maecenas justo dapibus, purus morbi felis quis vivamus. In donec pede iaculis, nec volutpat ante wisi fringilla, vulputate vivamus vitae, duis nibh eu, mus amet ipsum. Nec leo tempor felis molestie urna vestibulum, sagittis pellentesque, sed venenatis donec porta, vestibulum ipsum tristique nibh wisi in morbi, nec magna consequat. Pede amet purus tristique a, lectus porta soluta placerat.</p>
<p>Dictum libero molestie, lacus justo dolor tellus, dolor nunc parturient pede turpis, leo sed placerat nisl eu. Vestibulum vel faucibus elementum, ipsum tortor aenean elit, non consectetuer nisl felis. Velit cubilia pharetra pede ultricies, et porttitor augue pharetra adipiscing natoque consequat, ipsum adipiscing donec suscipit turpis ligula, etiam non in wisi, neque ac eu mauris. Suspendisse eros scelerisque duis, aliquam turpis lectus, wisi et ut, pulvinar ante viverra, nec nisl elit. Bibendum eleifend. Et purus ultricies, mauris felis elementum nunc turpis etiam. Erat urna quam morbi, morbi in egestas faucibus ac eget sagittis. In wisi sed in quisque netus. Malesuada urna.</p>
<p>Imperdiet sed, malesuada semper, sapien facilisis at eleifend curabitur maecenas mauris, in mollis sagittis lacinia. Dolor consequat, integer deserunt in, vehicula et imperdiet lacus ut tempor, et cras ullamcorper et. Sed dis justo dignissim rutrum nulla, arcu sit lorem et mollis pulvinar, felis hendrerit nascetur etiam tortor. Purus sit lorem. Maecenas vel dapibus, aliquet praesent mattis nobis habitasse ut, rutrum magnis pharetra, congue eros justo nullam scelerisque amet pharetra, lacinia tristique eleifend. Nec turpis dictumst scelerisque, eu et ut libero ultricies, metus adipiscing velit egestas. Aliquam lobortis quisque nunc. Justo massa auctor nullam, nonummy felis scelerisque volutpat sed eget nibh, et morbi, maecenas ante fusce, arcu ultricies vivamus et quis mauris. Ut quisque amet arcu condimentum, culpa libero mauris tristique phasellus quam, morbi duis metus, arcu luctus ligula sed urna cursus, leo proin ligula turpis. Vitae mauris hendrerit aliquet odio, aliquam eu hymenaeos venenatis mollis eu consectetuer.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment