JavaScript - Floating Sidebar -- How Does Mashable Do It?

<script language="JavaScript" type="text/javascript">
    function toggle() {

      	
        var bar = document.getElementById('floater');
        var barText = document.getElementById('f_news');

       
        if (bar.style.width == '210px') {

            
            bar.style.width = '40px';
	    bar.style.backgroundImage = 'none';

            
            barText.style.display = 'none';

           
       
        } else {


            
            bar.style.width = '210px';
	    bar.style.backgroundImage = 'HELP!';

            
            barText.style.display = 'block';

        }
    }
	</script>

<?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() ) {?> 
<li>
<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<?php } ?></li>
<?php }?> 
</ul>
<ul role="navigation">
<li><h2>Nyheder</h2><ul><?php wp_get_archives('type=monthly'); ?></ul></li>
</ul>

<ul><?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>

<li>
<ul><?php wp_meta(); ?></ul>
</li>
<?php } ?>
<?php endif; ?>
</ul>

var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map();
var side_bar_html = "";
var gmarkers = [];
var shortname;
var marker;

function initialize()
	{
	var xmlhttp;
		if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		  }
		else
		  {// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		xmlhttp.open("GET","rp4.xml",false);
		xmlhttp.send();
		xmlDoc = xmlhttp.responseXML;
	var markers = xmlDoc.getElementsByTagName("marker");
	var point = new google.maps.LatLng(40.8068620, -96.6816790);
	
	var myOptions = {
	 /*  center: new google.maps.LatLng(40.8068620, -96.6816790), */
	  center: point,
	  zoom: 4,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  /* mapTypeControl: True,
	  mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} */
	  };
	 
	// create the map
	map = new google.maps.Map(document.getElementById("map_canvas"),
		myOptions);
	
	 function bindInfoWindow(marker, map, infowindow, nfo)
		{
		google.maps.event.addListener(marker, 'click', function()
			{
			infowindow.close();
			infowindow.setContent(nfo);
			infowindow.open(map, marker);
			map.panTo(marker.getPosition());
			// map.setCenter(new google.maps.LatLng(lat,lng);
			map.setCenter(marker.getPosition());
			});
		}
	
	
	// document.getElementById("side_bar").innerHTML = side_bar_html;
	for (var i = 0;i<markers.length;i++)
		{
		var lat = parseFloat(markers[i].getAttribute("lat"));
		var lng = parseFloat(markers[i].getAttribute("lng"));
		point = new google.maps.LatLng(lat,lng);
		shortname = markers[i].getAttribute("company");
		var company = markers[i].getElementsByTagName("company")[0].firstChild.nodeValue;
		var contact = markers[i].getElementsByTagName("contact")[0].firstChild.nodeValue;
		var str = markers[i].getElementsByTagName("str")[0].firstChild.nodeValue;
		var city = markers[i].getElementsByTagName("city")[0].firstChild.nodeValue;
		var phone = markers[i].getElementsByTagName("phone")[0].firstChild.nodeValue;
		var email = markers[i].getElementsByTagName("email")[0].firstChild.nodeValue;
		var web = markers[i].getElementsByTagName("web")[0].firstChild.nodeValue;	
		var nfo = "<h1>"+company+"</h1>"+
						"<p><b>"+company+"</b><br />"+
						contact+"<br />"+ 
						str+"<br />"+
						city+"<br />"+
						phone+"<br />"+
						"<a href='mailto:"+email+"'>"+email+"</a></p>"+
						"<a href='http://"+web+"'>"+web+"</a>";
		
		marker = new google.maps.Marker({
		position: point,
		map: map,
		title: company,
		clickable: true,
		});
		marker.setMap(map);
		bindInfoWindow(marker, map, infowindow, nfo);
		}
		document.getElementById("side_bar").innerHTML = side_bar_html;
	}

function myclick(k)
			{
			google.maps.event.trigger(gmarkers[k], "click");
			// save the info we need to use later for the side_bar
			gmarkers.push(marker);
			// add a line to the side_bar html
			side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + shortname + '<\/a><br>';
			return marker;
			}