I like the way this site has a map utility that splits the whole page horizontally. A nice div but what is the javascript that can achieve this. I looked at the source but need a bit more help to get something similar.
<!DOCTYPE HTML>
<html class="no-js" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<link rel="stylesheet" href="http://static.lonelyplanet.com/static-ui/style/destinations_compressed.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://static.lonelyplanet.com/static-ui/style/print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="http://static.lonelyplanet.com/static-ui/style/global.css" type="text/css" media="screen,projection"/>
<script type="text/javascript" src="http://static.lonelyplanet.com/static-ui/js/lp-js-library.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAADUr8Vd6I7bfZ5k4c27F7KxR5cxXriAJsP5a75Cx4cnHTXGWMNxQxhFddQkNg7EBCllU86qgA_ugglg"></script>
<script type="text/javascript" src="http://static.lonelyplanet.com/static-ui/js/lpmaps-destinations.js"></script>
</head>
<body id="destinations" class="country mls green">
<div id="pageTitleWrap" class="redPadding">
<div id="gradient"></div>
</div>
<div id="mapWrap">
<div id="map">
</div>
</div>
<div id="mapTab">
<a href="#" id="tabToggleMap" class="toggleMap closed">
<span class="hidden">Open Map</span>
</a>
<script type="text/javascript">
// <![CDATA[
lp_init_map_toggle ($('#tabToggleMap'), 'map') ;
$(function() {
if (jQuery.cookies.get('lpmaps') == 'open') {
show_map('map');
}
});
// ]]>
</script>
</div>
</body>
</html>
I cant locate the functions lp_init_map_toggle(); but I think its just css that is changing the background value of y.
Still I need to learn to be able to implement this myself clearly.