views:

88

answers:

0

Microsoft showed off some enhancements to Bing.com in IE9. One is a html5/css3 trick that is referred to as an accordion. As the user scrolls down, links are first displayed as a stacked accordion and with more scrolling the summary text is displayed. you can see it midway through the video here: http://www.bing.com/community/blogs/search/archive/2010/09/15/bing-previews-a-more-beautiful-search-experience-in-ie9.aspx

How the heck did they do that? Possibly there are some elements around lower search results (example: ) that are triggered by javascript when to open up a result summary text?

I sketched out the javascript and wonder if i'm on the right path

<script type="text/javascript">
$(function() {
  $(window).scroll(function(){
  var distanceTop = $('#hiddentext').offset().top - $(window).height();
  if  ($(window).scrollTop() > distanceTop)
   $('#accordion').animate({'center':'0px'});
  });
});
</script>