Monday, September 13, 2010

jQuery, CSS overlay popup onload

jQuery: I'm Lovin It!



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>CSS overlay onload</title>

<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
color: #000;
}
a{
cursor: pointer;
}
img{
border: 0;
}
.sliderWrap {
margin: -141px auto 0 auto;
position: relative;
background: #ccc;
width: 300px;
height: 159px;
text-align: center;
}
h1{
padding: 0;
margin: 0;
}
.openCloseWrap {
position: absolute;
bottom: 0;
font-size: 12px;
font-weight: bold;
}
</style>

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".sliderWrap").animate({
marginTop: "0px"
}, 500 );

//$(".sliderWrap").fadeIn().delay(2000).fadeOut('slow');

$("#topMenuImage").html('<img src="close.png" alt="close" />');
/////////////////////////////////////////////////////////////////////////
$(".topMenuAction").click( function() {
$(".sliderWrap").animate({
marginTop: "-160px"
}, 500 );
$("#topMenuImage").html('<img src="open.png" alt="open" />');
});

});
</script>


</head>

<body>

<div class="sliderWrap">
<h1>Isn&#39;t this nice?</h1>
<div class="openCloseWrap"><a id="topMenuImage" class="topMenuAction"><img alt="open" src="open.png" /></a></div>
</div>


</body>

</html>

Download source file here