Search

Fun with Overflows

Posted on 16th October 2008 — Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. So this episode of J4D demonstrates the same effect used in two completely different ways.

Background

The first is a scrollable timeline. A couple of readers requested a demo of how Plurk’s browse timeline works. In addition, in the last month, Google released a 10 year timeline - so I wanted to show how this works.

The second was a request from Trevor Morris who’s involved with/runs Geek in the Park. He asked whether the techniques I used in a jQuery marquee plugin I wrote recently could be used to smooth out CPU spikes that were occurring on his site when the header pattern flowed (see example below)

Watch

Part 1: Scrollable Timeline

Watch the scrollable timeline screencast (alternative flash version)

QuickTime version is approximately 60Mb, flash version is streaming.

View the demo and source code used in the scrollable timeline screencast

Part 2: Trovster’s Header Effect

Watch the Trovster’s header effect screencast (alternative flash version)

QuickTime version is approximately 45Mb, flash version is streaming.

View the demo and source code used in the Trovster’s header effect screencast

Scrollable Timeline

For the scrollable timeline I wanted to support both the Plurk version where the user could use their mouse wheel to scroll and the Google version where they could click and drag.

I’ve taken a large chunk of Google’s history to demonstrate the effect.

We set up the page by creating a wrapping div that has overflow: auto; (which we’ll change to overflow: hidden; using jQuery later on). The inner element, the ul in this particular case, is styled to have a width that can accommodate all the nested lis side by side without wrapping on to a ‘new line’ (this is done by floating the lis left and giving them a defined width).

Understanding the Problem

The task is such:

  1. Capture the mouse down event and track the current scroll position and the X co-ordinate of the click.
  2. When the mouse moves, and it’s down, scroll the element by the distance moved from the original mouse down.
  3. When the mouse moves out of the window, trigger a fake mouse up (or cancel the captured down event).

Example of drag method

CSS

I won’t cover all the CSS used, only the key style:

#timeline {
  height: 375px; /* fixed */
  overflow: auto; /* changed to hidden via JavaScript */
}

.tl-events { /* the UL */
  width: 11800px; /* the width required to hold all the info */
}

.tl-events li {
  float: left; /* allows the lis to stack against eachother */
  width: 300px;
}

jQuery

This is the full code listing used in the demo.

We attach 3 built in mouse events: mousedown, mouseup and mousemove. Then we add the jQuery mousewheel plugin before changing the overflow CSS:

// when the DOM is ready...
$(document).ready(function () {
  $('#timeline').mousedown(function (event) {
    // attach 3 pieces of data to the #timeline element
    $(this)
      .data('down', true) // a flag indicating the mouse is down
      .data('x', event.clientX) // the current mouse down X coord
      .data('scrollLeft', this.scrollLeft); // the current scroll position
        
    // return false to avoid selecting text and dragging links within the scroll window
    return false;
  }).mouseup(function (event) {
    // on mouse up, cancel the 'down' flag
    $(this).data('down', false);
  }).mousemove(function (event) {
    // if the mouse is down - start the drag effect
    if ($(this).data('down') == true) {
      // this.scrollLeft is the scrollbar caused by the overflowing content
      // the new position is: original scroll position + original mouse down X - new X
      // I'd like to see if anyone can give an example of how to speed up the scroll.
      this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
    }
  }).mousewheel(function (event, delta) {
    // now attaching the mouse wheel plugin and scroll by the 'delta' which is the
    // movement of the wheel - so we multiple by an arbitrary number.
    this.scrollLeft -= (delta * 30);
  }).css({
    'overflow' : 'hidden', // change to hidden for JS users
    'cursor' : '-moz-grab' // add the grab cursor
  });
});

// finally, we want to handle the mouse going out of the browser window and
// it not triggering the mouse up event (because the mouse is still down)
// but it messes up the tracking of the mouse down
$(window).mouseout(function (event) {
  if ($('#timeline').data('down')) {
    try {
      // *try* to get the element the mouse left the window by and if
      // we really did leave the window, then cancel the down flag
      if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
        $('#timeline').data('down', false);
      }                
    } catch (e) {}
  }
});

Trovster’s Header Effect

Using the this.scrollLeft DOM attribute again, we can create a completely different effect.

This effect and design was created by Trevor Morris, but the first version he had took up a lot of CPU by changing the CSS left position on the ‘rainbow’ image.

The version I cover in the screencast uses overflows and absolute positioning to keep the CPU usage and the effect (still) smooth in addition to working to make it appear the same if JavaScript is turned off.

Example of drag method

Markup

The extra empty div is the wide element and the div#rainbow is the element with the overflow that will scroll.

<div id="headerEffect">
  <div id="rainbow"><div></div></div>
  <div id="swirl"></div>
</div>

CSS

In addition to the following CSS, I also hand coded the PNG transparency for IE6 to work when JavaScript is disabled.

#headerEffect {
  position: absolute;
  width: 100%;
  height: 400px;
  overflow: hidden;
  top: 0; /* make sure IE stretches it properly */
  left: 0;
}

#rainbow {
  height: 400px;
  width: 100%;
  overflow: hidden;
}

#rainbow div {
  height: 400px;
  width: 3312px; /* nice big width that ensures it repeats */
  background: url(/css/img/header.colour.3.png) repeat-x scroll -20% 0;
}

#swirl {
  background: url(/css/img/header.swirl.png) no-repeat scroll 50% 0;
  height: 400px;
  width: 100%;
  position: absolute; /* places the swirl *over* the rainbow */
  top: 0;
  left: 0;
}

In addition I’ve included IE6 specific styles:

<!--[if lte IE 6]>
<style type="text/css" media="screen">
/* I've put the alpha transparency in the CSS so as to support non JS enabled visits */
#swirl {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.trovster.com/css/img/header.swirl.png', sizingMethod='scale'); 
}
</style>
<![endif]-->

JavaScript

Note that I’ve called this section JavaScript rather than jQuery, since we’re dealing with the scrollLeft property on the div#rainbow element we only ever need jQuery for the ready event:

$(document).ready(function () {
  // capture the rainbow element
  var rainbow = document.getElementById('rainbow'), 
    lastPos, // stores the last scrollLeft position
    width = 1656; // the repeating point on the background
  
  // we always reset when the page reloads so that the background is always the same
  rainbow.scrollLeft = width;
  
  // use an interval to scroll the rainbow
  setInterval(function () {
    // subtract to make the background scroll from left to right
    rainbow.scrollLeft -= 5;
    
    // if we've hit the beginning then the lastPos will be the same as the scrollLeft
    if (lastPos == rainbow.scrollLeft) {
      // reset
      rainbow.scrollLeft = width;
    }
    
    lastPos = rainbow.scrollLeft;
  }, 100); // the combination of milliseconds 
});

Taking it Further

I would love to see what else you can do: the Coda Slider is another example of the overflow and scrollLeft being used in the same way to create a completely different effect.

What other ways can the overflow/scrollLeft combo be used?

Related posts

  1. iPhone-like Sliding Headers The iPhone has a few unique UI features, one in...
  2. jQuery Infinite Carousel With jQuery for Designer’s redesign I decided to add a...
  3. Coda Slider Effect Although Panic didn’t really invent the effect, the sliding panels...

Demo

If you find this demo doesn't work as expected, it's possibly due to the demo running from within an iframe. Try running the demo in it's own window.

Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Scrollable Timeline</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.mousewheel.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {        
        $('#timeline').mousedown(function (event) {
            $(this)
                .data('down', true)
                .data('x', event.clientX)
                .data('scrollLeft', this.scrollLeft);
                
            return false;
        }).mouseup(function (event) {
            $(this).data('down', false);
        }).mousemove(function (event) {
            if ($(this).data('down') == true) {
                this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
            }
        }).mousewheel(function (event, delta) {
            this.scrollLeft -= (delta * 30);
        }).css({
            'overflow' : 'hidden',
            'cursor' : '-moz-grab'
        });
    });
    
    $(window).mouseout(function (event) {
        if ($('#timeline').data('down')) {
            try {
                if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
                    $('#timeline').data('down', false);
                }                
            } catch (e) {}
        }
    });
</script>
<style type="text/css" media="screen">
<!--
body { 
    margin: 0; 
    padding: 0 20px; 
    font: 1em "Trebuchet MS", verdana, arial, sans-serif; 
    font-size: 85%; 
}

div, ul, li {
    zoom: 1;
}

ul ul,
ul ul li {
    zoom: 0;
}

#timeline {
    height: 375px;
    margin-top: 10px;
    padding: 20px;
    overflow: auto;
    /*cursor: -moz-grab !important;*/ /* should this be applied with JS? */
    border: 2px solid #D9E4FF;
}

.tl-events {
    width: 11800px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tl-events li {
    float: left;
    width: 300px;
    margin-right: 10px;
}

.tl-events ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tl-events ul li a {
    text-decoration: none;
    color: #000;
    background: #D9E4FF;
    border: 1px solid #D9E4FF;
    -moz-border-radius: 4px;
    display: block;
    margin: 5px 2px;
    padding: 2px;
}

.tl-events ul li a:hover,
.tl-events ul li a:focus {
    outline: 0;
    background: #C2CCE4;
    border: 1px solid #B0BACF;
}

.doodle {
    display: none;
}

h1 {
    margin: 8px 0;
}
-->
</style>


</head>
<body>

    <h1>Google 10 Year Timeline</h1>
    <div id="timeline">
        <ul class="tl-events">
<li class="welcome">
<h2>Welcome to the interactive timeline of Google history!</h2>
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p>
<p>

</p>
</li>
<li class="first last">
<h3>
1995–1997</h3>
<ul class="column">
<li class="doodle" id="event-1997-1-doodle">
<a href="#1997-1-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-1995-when-larry-met-sergey">
<a href="#1995-when-larry-met-sergey" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">When Larry met Sergey</span>

</span>
</a>
</li>
<li class="milestone" id="event-1996-new-search-tool-named-backrub">
<a href="#1996-new-search-tool-named-backrub" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">New search tool named BackRub</span>
</span>
</a>
</li>
<li class="milestone" id="event-1996-backrub-search-index-grows">
<a href="#1996-backrub-search-index-grows" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">BackRub search index grows</span>

</span>
</a>
</li>
<li class="milestone" id="event-1997-google-com-registered-as-a-domain">
<a href="#1997-google-com-registered-as-a-domain" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google.com registered as a domain</span>
</span>
</a>
</li>
</ul>
</li>
<li class="first last">
<h3>
1998</h3>

<ul class="column">
<li class="doodle" id="event-1998-1-doodle">
<a href="#1998-1-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-1998-andy-bechtolsheim-is-first-google-investor">
<a href="#1998-andy-bechtolsheim-is-first-google-investor" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Andy Bechtolsheim is first Google investor</span>
</span>
</a>
</li>
<li class="milestone" id="event-1998-danny-sullivan-s-early-review">
<a href="#1998-danny-sullivan-s-early-review" hidefocus="">

<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Danny Sullivan’s early review</span>
</span>
</a>
</li>
<li class="milestone" id="event-1998-google-rents-a-silicon-valley-garage">
<a href="#1998-google-rents-a-silicon-valley-garage" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google rents a Silicon Valley garage</span>
</span>
</a>
</li>
<li class="milestone" id="event-1998-google-incorporates">

<a href="#1998-google-incorporates" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google incorporates</span>
</span>
</a>
</li>
<li class="milestone" id="event-1998-early-technical-specs-detailed">
<a href="#1998-early-technical-specs-detailed" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Early technical specs detailed</span>
</span>
</a>
</li>

<li class="milestone" id="event-1998-employee-1-craig-silverstein">
<a href="#1998-employee-1-craig-silverstein" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Employee #1: Craig Silverstein</span>
</span>
</a>
</li>
<li class="milestone" id="event-1998-google-named-top-search-engine">
<a href="#1998-google-named-top-search-engine" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google named Top Search Engine</span>
</span>
</a>

</li>
<li class="culture" id="event-1998-first-google-friends-newsletter">
<a href="#1998-first-google-friends-newsletter" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First Google Friends Newsletter</span>
</span>
</a>
</li>
<li class="homepage" id="event-1998-original-homepage-prototype">
<a href="#1998-original-homepage-prototype" hidefocus="">
<span title="Image" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Original homepage prototype</span>
</span>

</a>
</li>
</ul>
</li>
<li class="first">
<h3>
1999 <span class="month">January–June</span>
</h3>
<ul class="column">
<li class="doodle" id="event-1999-1-doodle">
<a href="#1999-1-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-1999-google-opens-palo-alto-office">

<a href="#1999-google-opens-palo-alto-office" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google opens Palo Alto office</span>
</span>
</a>
</li>
<li class="milestone" id="event-1999-employee-11-omid-kordestani">
<a href="#1999-employee-11-omid-kordestani" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Employee #11: Omid Kordestani</span>
</span>
</a>
</li>

<li class="milestone" id="event-1999-google-funded-by-major-venture-capital-firms">
<a href="#1999-google-funded-by-major-venture-capital-firms" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google funded by major venture capital firms</span>
</span>
</a>
</li>
<li class="culture" id="event-1999-fish-food">
<a href="#1999-fish-food" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Fish food</span>
</span>
</a>

</li>
<li class="culture" id="event-1999-we-hit-the-slopes">
<a href="#1999-we-hit-the-slopes" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">We hit the slopes</span>
</span>
</a>
</li>
<li class="definition" id="event-1999-googler-n">
<a href="#1999-googler-n" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">
<dfn>Googler</dfn>, n.</span>

</span>
</a>
</li>
</ul>
</li>
<li class="last">
<h3>
<span class="month">July–December</span>
</h3>
<ul class="column">
<li class="doodle" id="event-1999-7-doodle">
<a href="#1999-7-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-1999-google-moves-to-new-mountain-view-offices">
<a href="#1999-google-moves-to-new-mountain-view-offices" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google moves to new Mountain View offices</span>
</span>
</a>
</li>
<li class="milestone" id="event-1999-charlie-ayers-hired-as-first-google-chef">
<a href="#1999-charlie-ayers-hired-as-first-google-chef" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Charlie Ayers hired as first Google chef</span>
</span>
</a>

</li>
<li class="milestone" id="event-1999-first-positive-reviews">
<a href="#1999-first-positive-reviews" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First positive reviews</span>
</span>
</a>
</li>
<li class="stats" id="event-1999-year-end-look-at-google-search-trends">
<a href="#1999-year-end-look-at-google-search-trends" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Year-end look at Google search trends</span>
</span>

</a>
</li>
<li class="definition" id="event-1999-seafood-friday-n">
<a href="#1999-seafood-friday-n" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">
<dfn>Seafood Friday</dfn>, n.</span>
</span>
</a>
</li>
<li class="homepage" id="event-1999-homepage-uncle-sam-added">
<a href="#1999-homepage-uncle-sam-added" hidefocus="">
<span title="Image" class="tl-icon"/>
<span class="tl-msg">

<span class="tl-msg-inside">Homepage: “Uncle Sam” added</span>
</span>
</a>
</li>
</ul>
</li>
<li class="first last">
<h3>
2000</h3>
<ul class="column">
<li class="doodle" id="event-2000-1-doodle">
<a href="#2000-1-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-2000-google-in-10-languages">
<a href="#2000-google-in-10-languages" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google in 10 languages</span>
</span>
</a>
</li>
<li class="milestone" id="event-2000-google-wins-first-webby-awards">
<a href="#2000-google-wins-first-webby-awards" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google wins first Webby Awards</span>
</span>
</a>

</li>
<li class="milestone" id="event-2000-yahoo-signs-up-for-google-search">
<a href="#2000-yahoo-signs-up-for-google-search" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Yahoo! signs up for Google search</span>
</span>
</a>
</li>
<li class="milestone" id="event-2000-search-index-1-billion-pages">
<a href="#2000-search-index-1-billion-pages" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Search index: 1 billion pages</span>
</span>

</a>
</li>
<li class="milestone" id="event-2000-google-in-chinese-japanese-korean">
<a href="#2000-google-in-chinese-japanese-korean" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google in Chinese, Japanese, Korean</span>
</span>
</a>
</li>
<li class="culture" id="event-2000-first-april-fool-s-joke">
<a href="#2000-first-april-fool-s-joke" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First April Fool’s joke</span>

</span>
</a>
</li>
<li class="products" id="event-2000-google-adwords">
<a href="#2000-google-adwords" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google AdWords</span>
</span>
</a>
</li>
<li class="products" id="event-2000-google-toolbar">
<a href="#2000-google-toolbar" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Toolbar</span>

</span>
</a>
</li>
<li class="stats" id="event-2000-year-end-look-at-google-search-trends">
<a href="#2000-year-end-look-at-google-search-trends" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Year-end look at Google search trends</span>
</span>
</a>
</li>
<li class="homepage" id="event-2000-homepage-1-billion-items">
<a href="#2000-homepage-1-billion-items" hidefocus="">
<span title="Image" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Homepage: 1 billion items</span>

</span>
</a>
</li>
</ul>
</li>
<li class="first">
<h3>
2001 <span class="month">January–June</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2001-1-doodle">
<a href="#2001-1-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-2001-wayne-rosing-hired-as-engineering-vp">
<a href="#2001-wayne-rosing-hired-as-engineering-vp" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Wayne Rosing hired as Engineering VP</span>
</span>
</a>
</li>
<li class="milestone" id="event-2001-deja-usenet-acquired">
<a href="#2001-deja-usenet-acquired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Deja Usenet acquired</span>
</span>
</a>

</li>
<li class="milestone" id="event-2001-eric-schmidt-named-chairman">
<a href="#2001-eric-schmidt-named-chairman" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Eric Schmidt named chairman</span>
</span>
</a>
</li>
<li class="milestone" id="event-2001-google-in-26-languages">
<a href="#2001-google-in-26-languages" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google in 26 languages</span>
</span>

</a>
</li>
<li class="culture" id="event-2001-meng-s-gallery-begins">
<a href="#2001-meng-s-gallery-begins" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Meng’s Gallery begins</span>
</span>
</a>
</li>
<li class="culture" id="event-2001-bork-bork-bork">
<a href="#2001-bork-bork-bork" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Bork, bork, bork!</span>

</span>
</a>
</li>
<li class="definition" id="event-2001-figs-cjk-n">
<a href="#2001-figs-cjk-n" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">
<dfn>FIGS+CJK</dfn>, n.</span>
</span>
</a>
</li>
<li class="homepage" id="event-2001-homepage-logo-centered">
<a href="#2001-homepage-logo-centered" hidefocus="">
<span title="Image" class="tl-icon"/>

<span class="tl-msg">
<span class="tl-msg-inside">Homepage: Logo centered</span>
</span>
</a>
</li>
</ul>
</li>
<li class="last">
<h3>
<span class="month">July–December</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2001-7-doodle">
<a href="#2001-7-doodle" hidefocus="">


</a>
</li>
<li class="milestone" id="event-2001-first-international-office-tokyo">
<a href="#2001-first-international-office-tokyo" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First international office: Tokyo</span>
</span>
</a>
</li>
<li class="milestone" id="event-2001-eric-schmidt-named-ceo">
<a href="#2001-eric-schmidt-named-ceo" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Eric Schmidt named CEO</span>

</span>
</a>
</li>
<li class="milestone" id="event-2001-first-search-partnership-in-latin-america">
<a href="#2001-first-search-partnership-in-latin-america" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First search partnership in Latin America</span>
</span>
</a>
</li>
<li class="products" id="event-2001-google-image-search">
<a href="#2001-google-image-search" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Image Search</span>

</span>
</a>
</li>
<li class="stats" id="event-2001-search-index-3-billion">
<a href="#2001-search-index-3-billion" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Search index: 3 billion</span>
</span>
</a>
</li>
<li class="stats" id="event-2001-year-end-look-at-google-search-trends">
<a href="#2001-year-end-look-at-google-search-trends" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Year-end look at Google search trends</span>

</span>
</a>
</li>
<li class="definition" id="event-2001-i18n-abbr">
<a href="#2001-i18n-abbr" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">
<dfn>i18n</dfn>, abbr.</span>
</span>
</a>
</li>
<li class="definition" id="event-2001-zeitgeist-n">
<a href="#2001-zeitgeist-n" hidefocus="">
<span title="Definition" class="tl-icon"/>

<span class="tl-msg">
<span class="tl-msg-inside">
<dfn>Zeitgeist</dfn>, n.</span>
</span>
</a>
</li>
</ul>
</li>
<li class="first">
<h3>
2002 <span class="month">January–June</span>
</h3>
<ul class="column">

<li class="doodle" id="event-2002-1-doodle">
<a href="#2002-1-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2002-partnership-with-aol">
<a href="#2002-partnership-with-aol" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Partnership with AOL</span>
</span>
</a>
</li>
<li class="culture" id="event-2002-tlhingan-majqa">
<a href="#2002-tlhingan-majqa" hidefocus="">
<span title="Culture" class="tl-icon"/>

<span class="tl-msg">
<span class="tl-msg-inside">tlhIngan majQa’!</span>
</span>
</a>
</li>
<li class="culture" id="event-2002-birdbrains">
<a href="#2002-birdbrains" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Birdbrains</span>
</span>
</a>
</li>
<li class="products" id="event-2002-google-search-appliance">
<a href="#2002-google-search-appliance" hidefocus="">

<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Search Appliance</span>
</span>
</a>
</li>
<li class="products" id="event-2002-adwords-now-cost-per-click">
<a href="#2002-adwords-now-cost-per-click" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">AdWords now cost-per-click</span>
</span>
</a>
</li>
<li class="products" id="event-2002-first-google-apis">

<a href="#2002-first-google-apis" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First Google APIs</span>
</span>
</a>
</li>
<li class="products" id="event-2002-google-labs">
<a href="#2002-google-labs" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Labs</span>
</span>
</a>
</li>

</ul>
</li>
<li class="last">
<h3>
<span class="month">July–December</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2002-7-doodle">
<a href="#2002-7-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2002-first-google-dance">
<a href="#2002-first-google-dance" hidefocus="">
<span title="Milestones" class="tl-icon"/>

<span class="tl-msg">
<span class="tl-msg-inside">First Google Dance</span>
</span>
</a>
</li>
<li class="milestone" id="event-2002-australia-office-opens">
<a href="#2002-australia-office-opens" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Australia office opens</span>
</span>
</a>
</li>
<li class="products" id="event-2002-google-news">
<a href="#2002-google-news" hidefocus="">

<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google News</span>
</span>
</a>
</li>
<li class="products" id="event-2002-froogle">
<a href="#2002-froogle" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Froogle</span>
</span>
</a>
</li>
<li class="stats" id="event-2002-year-end-look-at-google-search-trends">

<a href="#2002-year-end-look-at-google-search-trends" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Year-end look at Google search trends</span>
</span>
</a>
</li>
<li class="definition" id="event-2002-google-dance-n">
<a href="#2002-google-dance-n" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">
<dfn>Google Dance</dfn>, n.</span>
</span>

</a>
</li>
<li class="definition" id="event-2002-20-time-n">
<a href="#2002-20-time-n" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">
<dfn>20% time</dfn>, n.</span>
</span>
</a>
</li>
<li class="homepage" id="event-2002-homepage-tab-for-google-news">
<a href="#2002-homepage-tab-for-google-news" hidefocus="">
<span title="Image" class="tl-icon"/>
<span class="tl-msg">

<span class="tl-msg-inside">Homepage: Tab for Google News</span>
</span>
</a>
</li>
</ul>
</li>
<li class="first last">
<h3>
2003</h3>
<ul class="column">
<li class="doodle" id="event-2003-1-doodle">
<a href="#2003-1-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-2003-blogger-com-acquired">
<a href="#2003-blogger-com-acquired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Blogger.com acquired</span>
</span>
</a>
</li>
<li class="culture" id="event-2003-linguists-recognize-the-word-google">
<a href="#2003-linguists-recognize-the-word-google" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Linguists recognize the word “google”</span>
</span>
</a>

</li>
<li class="culture" id="event-2003-programmers-attend-first-code-jam">
<a href="#2003-programmers-attend-first-code-jam" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Programmers attend first Code Jam</span>
</span>
</a>
</li>
<li class="products" id="event-2003-google-adsense">
<a href="#2003-google-adsense" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google AdSense</span>
</span>

</a>
</li>
<li class="products" id="event-2003-google-grants">
<a href="#2003-google-grants" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Grants</span>
</span>
</a>
</li>
<li class="products" id="event-2003-google-print">
<a href="#2003-google-print" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Print</span>

</span>
</a>
</li>
<li class="stats noclick" id="event-2003-googler-headcount-1-628">
<a href="#2003-googler-headcount-1-628" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Googler headcount: 1,628</span>
</span>
</a>
</li>
<li class="stats" id="event-2003-year-end-look-at-google-search-trends">
<a href="#2003-year-end-look-at-google-search-trends" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Year-end look at Google search trends</span>

</span>
</a>
</li>
</ul>
</li>
<li class="first">
<h3>
2004 <span class="month">January–March</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2004-1-doodle">
<a href="#2004-1-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-2004-larry-named-nae-fellow">
<a href="#2004-larry-named-nae-fellow" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Larry named NAE Fellow</span>
</span>
</a>
</li>
<li class="milestone" id="event-2004-search-index-6-billion">
<a href="#2004-search-index-6-billion" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Search index: 6 billion</span>
</span>
</a>

</li>
<li class="milestone" id="event-2004-move-to-new-headquarters-campus">
<a href="#2004-move-to-new-headquarters-campus" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Move to new headquarters campus</span>
</span>
</a>
</li>
<li class="milestone" id="event-2004-enterprise-unit-forms">
<a href="#2004-enterprise-unit-forms" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Enterprise unit forms</span>
</span>

</a>
</li>
<li class="products" id="event-2004-orkut-released">
<a href="#2004-orkut-released" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">orkut released</span>
</span>
</a>
</li>
<li class="products" id="event-2004-google-local">
<a href="#2004-google-local" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Local</span>

</span>
</a>
</li>
<li class="definition" id="event-2004-microkitchen-n">
<a href="#2004-microkitchen-n" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">
<dfn>Microkitchen</dfn>, n.</span>
</span>
</a>
</li>
<li class="homepage" id="event-2004-homepage-change-from-tabs-to-links">
<a href="#2004-homepage-change-from-tabs-to-links" hidefocus="">
<span title="Image" class="tl-icon"/>

<span class="tl-msg">
<span class="tl-msg-inside">Homepage: Change from tabs to links</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">April–June</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2004-4-doodle">
<a href="#2004-4-doodle" hidefocus="">


</a>
</li>
<li class="milestone" id="event-2004-filed-for-ipo">
<a href="#2004-filed-for-ipo" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Filed for IPO</span>
</span>
</a>
</li>
<li class="culture" id="event-2004-fly-me-to-the-moon">
<a href="#2004-fly-me-to-the-moon" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Fly me to the moon</span>

</span>
</a>
</li>
<li class="culture" id="event-2004-official-google-blog">
<a href="#2004-official-google-blog" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Official Google Blog</span>
</span>
</a>
</li>
<li class="culture" id="event-2004-google-commuter-shuttles">
<a href="#2004-google-commuter-shuttles" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google commuter shuttles</span>

</span>
</a>
</li>
<li class="culture" id="event-2004-googlers-buy-10-000-lava-lamps">
<a href="#2004-googlers-buy-10-000-lava-lamps" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Googlers buy 10,000 lava lamps</span>
</span>
</a>
</li>
<li class="culture" id="event-2004-scholarships-for-women-engineers">
<a href="#2004-scholarships-for-women-engineers" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Scholarships for women engineers</span>

</span>
</a>
</li>
<li class="products" id="event-2004-gmail">
<a href="#2004-gmail" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Gmail</span>
</span>
</a>
</li>
<li class="definition" id="event-2004-caribou-n">
<a href="#2004-caribou-n" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">

<dfn>Caribou</dfn>, n.</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">July–October</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2004-7-doodle">
<a href="#2004-7-doodle" hidefocus="">


</a>
</li>
<li class="milestone" id="event-2004-google-ipo-on-nasdaq">
<a href="#2004-google-ipo-on-nasdaq" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google IPO on NASDAQ</span>
</span>
</a>
</li>
<li class="milestone" id="event-2004-100-google-domains">
<a href="#2004-100-google-domains" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">100+ Google domains</span>

</span>
</a>
</li>
<li class="milestone" id="event-2004-european-headquarters-open-in-dublin">
<a href="#2004-european-headquarters-open-in-dublin" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">European headquarters open in Dublin</span>
</span>
</a>
</li>
<li class="milestone" id="event-2004-sergey-amp-larry-named-marconi-fellows">
<a href="#2004-sergey-amp-larry-named-marconi-fellows" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Sergey & Larry named Marconi Fellows</span>

</span>
</a>
</li>
<li class="milestone" id="event-2004-engineering-offices-open-in-india">
<a href="#2004-engineering-offices-open-in-india" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Engineering offices open in India</span>
</span>
</a>
</li>
<li class="milestone" id="event-2004-keyhole-acquired">
<a href="#2004-keyhole-acquired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Keyhole acquired</span>

</span>
</a>
</li>
<li class="products" id="event-2004-sms-for-mobile">
<a href="#2004-sms-for-mobile" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">SMS for mobile</span>
</span>
</a>
</li>
<li class="products" id="event-2004-google-desktop-search">
<a href="#2004-google-desktop-search" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Desktop Search</span>

</span>
</a>
</li>
<li class="products" id="event-2004-google-scholar">
<a href="#2004-google-scholar" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Scholar</span>
</span>
</a>
</li>
</ul>
</li>
<li class="last">
<h3>
<span class="month">November–December</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2004-11-doodle">
<a href="#2004-11-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2004-tokyo-r-amp-d-center">
<a href="#2004-tokyo-r-amp-d-center" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Tokyo R&D center</span>
</span>
</a>

</li>
<li class="products" id="event-2004-google-book-search-adds-libraries">
<a href="#2004-google-book-search-adds-libraries" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Book Search adds libraries</span>
</span>
</a>
</li>
<li class="stats" id="event-2004-search-index-8-billion">
<a href="#2004-search-index-8-billion" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Search index: 8 billion</span>
</span>

</a>
</li>
<li class="stats noclick" id="event-2004-googler-headcount-3-021">
<a href="#2004-googler-headcount-3-021" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Googler headcount: 3,021</span>
</span>
</a>
</li>
<li class="stats" id="event-2004-year-end-look-at-google-search-trends">
<a href="#2004-year-end-look-at-google-search-trends" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Year-end look at Google search trends</span>

</span>
</a>
</li>
</ul>
</li>
<li class="first">
<h3>
2005 <span class="month">January–March</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2005-1-doodle">
<a href="#2005-1-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-2005-urchin-acquired">
<a href="#2005-urchin-acquired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Urchin acquired</span>
</span>
</a>
</li>
<li class="culture" id="event-2005-first-google-code-jam-india">
<a href="#2005-first-google-code-jam-india" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First Google Code Jam India</span>
</span>
</a>

</li>
<li class="products" id="event-2005-google-maps">
<a href="#2005-google-maps" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Maps</span>
</span>
</a>
</li>
<li class="products" id="event-2005-code-google-com">
<a href="#2005-code-google-com" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">code.google.com</span>
</span>

</a>
</li>
<li class="stats" id="event-2005-google-image-search-1-1-billion-images">
<a href="#2005-google-image-search-1-1-billion-images" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Image Search: 1.1 billion images</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">April</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2005-4-doodle">
<a href="#2005-4-doodle" hidefocus="">

</a>
</li>
<li class="culture" id="event-2005-grasping-for-straws">
<a href="#2005-grasping-for-straws" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Grasping for straws</span>
</span>
</a>
</li>
<li class="culture" id="event-2005-i-googlebot">

<a href="#2005-i-googlebot" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">I, Googlebot</span>
</span>
</a>
</li>
<li class="products" id="event-2005-maps-in-the-u-k">
<a href="#2005-maps-in-the-u-k" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Maps in the U.K.</span>
</span>
</a>
</li>

<li class="products" id="event-2005-more-maps-features">
<a href="#2005-more-maps-features" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">More Maps features</span>
</span>
</a>
</li>
<li class="products" id="event-2005-google-local-for-mobile">
<a href="#2005-google-local-for-mobile" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Local for mobile</span>
</span>
</a>

</li>
<li class="products" id="event-2005-my-search-history">
<a href="#2005-my-search-history" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">My Search History</span>
</span>
</a>
</li>
<li class="products" id="event-2005-adwords-site-targeting">
<a href="#2005-adwords-site-targeting" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">AdWords Site Targeting</span>
</span>

</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">May–August</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2005-5-doodle">
<a href="#2005-5-doodle" hidefocus="">

</a>
</li>
<li class="culture" id="event-2005-summer-of-code">

<a href="#2005-summer-of-code" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Summer of Code</span>
</span>
</a>
</li>
<li class="products" id="event-2005-blogger-mobile">
<a href="#2005-blogger-mobile" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Blogger Mobile</span>
</span>
</a>
</li>

<li class="products" id="event-2005-google-scholar-for-libraries">
<a href="#2005-google-scholar-for-libraries" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Scholar for libraries</span>
</span>
</a>
</li>
<li class="products" id="event-2005-igoogle">
<a href="#2005-igoogle" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">iGoogle</span>
</span>
</a>

</li>
<li class="products" id="event-2005-mobile-web-search">
<a href="#2005-mobile-web-search" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Mobile Web Search</span>
</span>
</a>
</li>
<li class="products" id="event-2005-google-earth">
<a href="#2005-google-earth" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Earth</span>
</span>

</a>
</li>
<li class="products" id="event-2005-personalized-search">
<a href="#2005-personalized-search" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Personalized Search</span>
</span>
</a>
</li>
<li class="products" id="event-2005-maps-api">
<a href="#2005-maps-api" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Maps API</span>

</span>
</a>
</li>
<li class="products" id="event-2005-machine-translation">
<a href="#2005-machine-translation" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Machine translation</span>
</span>
</a>
</li>
<li class="products" id="event-2005-google-talk">
<a href="#2005-google-talk" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Talk</span>

</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">September–October</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2005-9-doodle">
<a href="#2005-9-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-2005-welcome-vint-cerf">
<a href="#2005-welcome-vint-cerf" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Welcome, Vint Cerf</span>
</span>
</a>
</li>
<li class="milestone" id="event-2005-kai-fu-lee-hired">
<a href="#2005-kai-fu-lee-hired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Kai-Fu Lee hired</span>
</span>
</a>

</li>
<li class="culture" id="event-2005-baby-google">
<a href="#2005-baby-google" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Baby Google</span>
</span>
</a>
</li>
<li class="culture" id="event-2005-authors-google">
<a href="#2005-authors-google" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Authors@Google</span>
</span>

</a>
</li>
<li class="products" id="event-2005-seeing-katrina-on-earth">
<a href="#2005-seeing-katrina-on-earth" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Seeing Katrina on Earth</span>
</span>
</a>
</li>
<li class="products" id="event-2005-google-blog-search">
<a href="#2005-google-blog-search" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Blog Search</span>

</span>
</a>
</li>
<li class="products" id="event-2005-google-reader">
<a href="#2005-google-reader" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Reader</span>
</span>
</a>
</li>
<li class="homepage" id="event-2005-homepage-google-turns-7">
<a href="#2005-homepage-google-turns-7" hidefocus="">
<span title="Image" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Homepage: Google turns 7</span>

</span>
</a>
</li>
</ul>
</li>
<li class="last">
<h3>
<span class="month">November–December</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2005-11-doodle">
<a href="#2005-11-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-2005-first-latin-america-offices">
<a href="#2005-first-latin-america-offices" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First Latin America offices</span>
</span>
</a>
</li>
<li class="culture" id="event-2005-i-m-feeling-silly">
<a href="#2005-i-m-feeling-silly" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">I’m feeling silly</span>
</span>
</a>

</li>
<li class="products" id="event-2005-google-analytics">
<a href="#2005-google-analytics" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Analytics</span>
</span>
</a>
</li>
<li class="products" id="event-2005-google-transit">
<a href="#2005-google-transit" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Transit</span>
</span>

</a>
</li>
<li class="products" id="event-2005-gmail-for-mobile">
<a href="#2005-gmail-for-mobile" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Gmail for mobile</span>
</span>
</a>
</li>
<li class="stats noclick" id="event-2005-googler-headcount-5-680">
<a href="#2005-googler-headcount-5-680" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Googler headcount: 5,680</span>

</span>
</a>
</li>
<li class="stats" id="event-2005-year-end-look-at-google-search-trends">
<a href="#2005-year-end-look-at-google-search-trends" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Year-end look at Google search trends</span>
</span>
</a>
</li>
</ul>
</li>
<li class="first">
<h3>
2006 <span class="month">January–February</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2006-1-doodle">
<a href="#2006-1-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2006-dmarc-acquired">
<a href="#2006-dmarc-acquired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">dMarc acquired</span>
</span>
</a>
</li>
<li class="milestone" id="event-2006-google-in-china">

<a href="#2006-google-in-china" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google in China</span>
</span>
</a>
</li>
<li class="milestone" id="event-2006-eric-schmidt-named-nae-fellow">
<a href="#2006-eric-schmidt-named-nae-fellow" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Eric Schmidt named NAE Fellow</span>
</span>
</a>
</li>

<li class="milestone" id="event-2006-google-org-hires-larry-brilliant">
<a href="#2006-google-org-hires-larry-brilliant" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google.org hires Larry Brilliant</span>
</span>
</a>
</li>
<li class="culture" id="event-2006-code-jam-in-china">
<a href="#2006-code-jam-in-china" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Code Jam in China</span>
</span>
</a>

</li>
<li class="products" id="event-2006-picasa-in-25-more-languages">
<a href="#2006-picasa-in-25-more-languages" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Picasa in 25 more languages</span>
</span>
</a>
</li>
<li class="products" id="event-2006-chat-with-your-email">
<a href="#2006-chat-with-your-email" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Chat with your email</span>
</span>

</a>
</li>
<li class="products" id="event-2006-google-news-for-mobile">
<a href="#2006-google-news-for-mobile" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google News for mobile</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">March–April</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2006-3-doodle">
<a href="#2006-3-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2006-writely-acquired">
<a href="#2006-writely-acquired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Writely acquired</span>
</span>
</a>
</li>
<li class="culture" id="event-2006-searching-for-love">

<a href="#2006-searching-for-love" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Searching for love?</span>
</span>
</a>
</li>
<li class="products" id="event-2006-google-finance">
<a href="#2006-google-finance" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Finance</span>
</span>
</a>
</li>

<li class="products" id="event-2006-google-calendar">
<a href="#2006-google-calendar" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Calendar</span>
</span>
</a>
</li>
<li class="products" id="event-2006-maps-in-europe">
<a href="#2006-maps-in-europe" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Maps in Europe</span>
</span>
</a>

</li>
</ul>
</li>
<li>
<h3>
<span class="month">May–June</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2006-5-doodle">
<a href="#2006-5-doodle" hidefocus="">

</a>
</li>
<li class="culture" id="event-2006-testing-on-the-toilet">
<a href="#2006-testing-on-the-toilet" hidefocus="">

<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Testing on the Toilet</span>
</span>
</a>
</li>
<li class="culture" id="event-2006-google-in-the-oed">
<a href="#2006-google-in-the-oed" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">“Google” in the OED</span>
</span>
</a>
</li>
<li class="products" id="event-2006-google-trends">

<a href="#2006-google-trends" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Trends</span>
</span>
</a>
</li>
<li class="products" id="event-2006-picasa-web-albums">
<a href="#2006-picasa-web-albums" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Picasa Web Albums</span>
</span>
</a>
</li>

<li class="products" id="event-2006-mobile-tools-in-8-more-languages">
<a href="#2006-mobile-tools-in-8-more-languages" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Mobile tools in 8 more languages</span>
</span>
</a>
</li>
<li class="products" id="event-2006-gmail-in-40-languages">
<a href="#2006-gmail-in-40-languages" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Gmail in 40 languages</span>
</span>
</a>

</li>
</ul>
</li>
<li>
<h3>
<span class="month">July–August</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2006-7-doodle">
<a href="#2006-7-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2006-mountain-view-gets-wifi">
<a href="#2006-mountain-view-gets-wifi" hidefocus="">

<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Mountain View gets WiFi</span>
</span>
</a>
</li>
<li class="culture" id="event-2006-google-code-jam-europe">
<a href="#2006-google-code-jam-europe" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Code Jam Europe</span>
</span>
</a>
</li>
<li class="culture" id="event-2006-it-s-it">

<a href="#2006-it-s-it" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">It’s IT</span>
</span>
</a>
</li>
<li class="culture" id="event-2006-live-long-and-google">
<a href="#2006-live-long-and-google" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Live long and Google</span>
</span>
</a>
</li>

<li class="products" id="event-2006-100-uc-libraries-join-google-books">
<a href="#2006-100-uc-libraries-join-google-books" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">100 UC libraries join Google Books</span>
</span>
</a>
</li>
<li class="products" id="event-2006-google-apps-for-your-domain">
<a href="#2006-google-apps-for-your-domain" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Apps for Your Domain</span>
</span>
</a>

</li>
<li class="products" id="event-2006-free-book-downloads-in-book-search">
<a href="#2006-free-book-downloads-in-book-search" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Free book downloads in Book Search</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">September–October</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2006-9-doodle">
<a href="#2006-9-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2006-literacy-project">
<a href="#2006-literacy-project" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Literacy Project</span>
</span>
</a>
</li>
<li class="milestone" id="event-2006-youtube-acquired">

<a href="#2006-youtube-acquired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">YouTube acquired</span>
</span>
</a>
</li>
<li class="milestone" id="event-2006-jotspot-acquired">
<a href="#2006-jotspot-acquired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">JotSpot acquired</span>
</span>
</a>
</li>

<li class="culture" id="event-2006-kittens-on-our-intranet">
<a href="#2006-kittens-on-our-intranet" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Kittens on our intranet</span>
</span>
</a>
</li>
<li class="products" id="event-2006-google-news-archives">
<a href="#2006-google-news-archives" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google News Archives</span>
</span>
</a>

</li>
<li class="products" id="event-2006-google-earth-featured-content">
<a href="#2006-google-earth-featured-content" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Earth Featured Content</span>
</span>
</a>
</li>
<li class="products" id="event-2006-first-spanish-library-joins-google-books">
<a href="#2006-first-spanish-library-joins-google-books" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First Spanish library joins Google Books</span>
</span>

</a>
</li>
<li class="products" id="event-2006-google-docs-and-spreadsheets">
<a href="#2006-google-docs-and-spreadsheets" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Docs and Spreadsheets</span>
</span>
</a>
</li>
<li class="definition" id="event-2006-moma-n">
<a href="#2006-moma-n" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">
<dfn>Moma</dfn>, n.</span>

</span>
</a>
</li>
</ul>
</li>
<li class="last">
<h3>
<span class="month">November–December</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2006-11-doodle">
<a href="#2006-11-doodle" hidefocus="">

</a>
</li>

<li class="culture" id="event-2006-doodle-4-google-united-kingdom">
<a href="#2006-doodle-4-google-united-kingdom" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Doodle 4 Google - United Kingdom</span>
</span>
</a>
</li>
<li class="culture" id="event-2006-i-m-feeling-sleepy">
<a href="#2006-i-m-feeling-sleepy" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">I’m feeling sleepy</span>
</span>
</a>

</li>
<li class="products" id="event-2006-patent-search">
<a href="#2006-patent-search" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Patent Search</span>
</span>
</a>
</li>
<li class="stats noclick" id="event-2006-googler-headcount-10-674">
<a href="#2006-googler-headcount-10-674" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Googler headcount: 10,674</span>
</span>

</a>
</li>
<li class="stats" id="event-2006-year-end-look-at-google-search-trends">
<a href="#2006-year-end-look-at-google-search-trends" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Year-end look at Google search trends</span>
</span>
</a>
</li>
</ul>
</li>
<li class="first">
<h3>
2007 <span class="month">January–February</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2007-1-doodle">
<a href="#2007-1-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2007-china-mobile-partnership">
<a href="#2007-china-mobile-partnership" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">China Mobile partnership</span>
</span>
</a>
</li>
<li class="culture" id="event-2007-us-presidential-candidate-visits-begin">

<a href="#2007-us-presidential-candidate-visits-begin" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">US Presidential candidate visits begin</span>
</span>
</a>
</li>
<li class="products" id="event-2007-google-maps-australia">
<a href="#2007-google-maps-australia" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Maps Australia</span>
</span>
</a>
</li>

<li class="products" id="event-2007-google-docs-in-11-more-languages">
<a href="#2007-google-docs-in-11-more-languages" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Docs in 11 more languages</span>
</span>
</a>
</li>
<li class="products" id="event-2007-gmail-open-to-everyone">
<a href="#2007-gmail-open-to-everyone" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Gmail open to everyone</span>
</span>
</a>

</li>
<li class="products" id="event-2007-google-apps-premier-edition">
<a href="#2007-google-apps-premier-edition" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Apps Premier Edition</span>
</span>
</a>
</li>
<li class="products" id="event-2007-google-maps-traffic-information">
<a href="#2007-google-maps-traffic-information" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Maps traffic information</span>
</span>

</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">March–April</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2007-3-doodle">
<a href="#2007-3-doodle" hidefocus="">

</a>
</li>
<li class="culture" id="event-2007-google-code-jam-latin-america">

<a href="#2007-google-code-jam-latin-america" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Code Jam Latin America</span>
</span>
</a>
</li>
<li class="culture" id="event-2007-gbikes-everywhere">
<a href="#2007-gbikes-everywhere" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">gBikes everywhere</span>
</span>
</a>
</li>

<li class="culture" id="event-2007-seriously-there-is-a-snake">
<a href="#2007-seriously-there-is-a-snake" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Seriously, there is a snake</span>
</span>
</a>
</li>
<li class="culture" id="event-2007-our-t-rex-under-siege">
<a href="#2007-our-t-rex-under-siege" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Our T-Rex under siege</span>
</span>
</a>

</li>
<li class="culture" id="event-2007-the-google-channel">
<a href="#2007-the-google-channel" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">The @Google Channel</span>
</span>
</a>
</li>
<li class="products" id="event-2007-google-apps-in-africa">
<a href="#2007-google-apps-in-africa" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Apps in Africa</span>
</span>

</a>
</li>
<li class="products" id="event-2007-blogger-in-8-more-languages">
<a href="#2007-blogger-in-8-more-languages" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Blogger in 8 more languages</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">May</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2007-5-doodle">
<a href="#2007-5-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2007-first-michigan-office">
<a href="#2007-first-michigan-office" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First Michigan office</span>
</span>
</a>
</li>
<li class="culture" id="event-2007-gardening-at-google">

<a href="#2007-gardening-at-google" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Gardening at Google</span>
</span>
</a>
</li>
<li class="products" id="event-2007-universal-search">
<a href="#2007-universal-search" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Universal Search</span>
</span>
</a>
</li>

<li class="products" id="event-2007-google-hot-trends">
<a href="#2007-google-hot-trends" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Hot Trends</span>
</span>
</a>
</li>
<li class="products" id="event-2007-street-view-for-maps">
<a href="#2007-street-view-for-maps" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Street View for Maps</span>
</span>
</a>

</li>
<li class="products" id="event-2007-google-gears">
<a href="#2007-google-gears" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Gears</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">June</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2007-6-doodle">
<a href="#2007-6-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2007-partnership-with-salesforce-com">
<a href="#2007-partnership-with-salesforce-com" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Partnership with Salesforce.com</span>
</span>
</a>
</li>
<li class="milestone" id="event-2007-google-stand-on-net-neutrality">

<a href="#2007-google-stand-on-net-neutrality" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google stand on Net Neutrality</span>
</span>
</a>
</li>
<li class="milestone" id="event-2007-new-energy-initiatives">
<a href="#2007-new-energy-initiatives" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">New energy initiatives</span>
</span>
</a>
</li>

<li class="products" id="event-2007-maps-on-the-iphone">
<a href="#2007-maps-on-the-iphone" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Maps on the iPhone</span>
</span>
</a>
</li>
<li class="products" id="event-2007-youtube-in-9-more-domains">
<a href="#2007-youtube-in-9-more-domains" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">YouTube in 9 more domains</span>
</span>
</a>

</li>
<li class="products" id="event-2007-google-earth-for-nonprofits">
<a href="#2007-google-earth-for-nonprofits" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Earth for nonprofits</span>
</span>
</a>
</li>
<li class="stats" id="event-2007-solar-panels-on-campus-9-212">
<a href="#2007-solar-panels-on-campus-9-212" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Solar panels on campus: 9,212</span>
</span>

</a>
</li>
<li class="video" id="event-2007-featured-content-in-earth">
<a href="#2007-featured-content-in-earth" hidefocus="">
<span title="Video" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Featured Content in Earth</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">July–August</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2007-7-doodle">
<a href="#2007-7-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2007-postini-acquired">
<a href="#2007-postini-acquired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Postini acquired</span>
</span>
</a>
</li>
<li class="milestone" id="event-2007-google-privacy-channel">

<a href="#2007-google-privacy-channel" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Privacy Channel</span>
</span>
</a>
</li>
<li class="milestone" id="event-2007-google-tech-talks">
<a href="#2007-google-tech-talks" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Tech Talks</span>
</span>
</a>
</li>

<li class="products" id="event-2007-youtube-amp-politics">
<a href="#2007-youtube-amp-politics" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">YouTube & politics</span>
</span>
</a>
</li>
<li class="products" id="event-2007-google-finance-canada">
<a href="#2007-google-finance-canada" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Finance Canada</span>
</span>

</a>
</li>
<li class="products" id="event-2007-google-apps-in-28-languages">
<a href="#2007-google-apps-in-28-languages" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Apps in 28 languages</span>
</span>
</a>
</li>
<li class="products" id="event-2007-google-earth-and-sky">
<a href="#2007-google-earth-and-sky" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Earth (and Sky)</span>

</span>
</a>
</li>
<li class="video" id="event-2007-gmail-around-the-world">
<a href="#2007-gmail-around-the-world" hidefocus="">
<span title="Video" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Gmail around the world</span>
</span>
</a>
</li>
<li class="definition" id="event-2007-tech-talk-n">
<a href="#2007-tech-talk-n" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">

<dfn>Tech Talk</dfn>, n.</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">September–October</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2007-9-doodle">
<a href="#2007-9-doodle" hidefocus="">


</a>
</li>
<li class="milestone" id="event-2007-joint-supercomputing-project-with-ibm">
<a href="#2007-joint-supercomputing-project-with-ibm" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Joint supercomputing project with IBM</span>
</span>
</a>
</li>
<li class="culture" id="event-2007-lunar-x-prize">
<a href="#2007-lunar-x-prize" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Lunar X PRIZE</span>

</span>
</a>
</li>
<li class="culture" id="event-2007-scary-fun">
<a href="#2007-scary-fun" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Scary fun</span>
</span>
</a>
</li>
<li class="products" id="event-2007-adsense-for-mobile">
<a href="#2007-adsense-for-mobile" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">AdSense for Mobile</span>

</span>
</a>
</li>
<li class="products" id="event-2007-presentations-in-google-docs">
<a href="#2007-presentations-in-google-docs" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Presentations in Google Docs</span>
</span>
</a>
</li>
<li class="products" id="event-2007-google-reader-in-10-more-languages">
<a href="#2007-google-reader-in-10-more-languages" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Reader in 10 more languages</span>

</span>
</a>
</li>
<li class="products" id="event-2007-google-earth-wildfire-updates">
<a href="#2007-google-earth-wildfire-updates" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Earth wildfire updates</span>
</span>
</a>
</li>
<li class="video" id="event-2007-google-docs-explained">
<a href="#2007-google-docs-explained" hidefocus="">
<span title="Video" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Docs explained</span>

</span>
</a>
</li>
<li class="homepage" id="event-2007-homepage-google-in-arabic">
<a href="#2007-homepage-google-in-arabic" hidefocus="">
<span title="Image" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Homepage: Google in Arabic</span>
</span>
</a>
</li>
</ul>
</li>
<li class="last">
<h3>
<span class="month">November–December</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2007-11-doodle">
<a href="#2007-11-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2007-renewable-energy-less-than-coal-re-lt-c">
<a href="#2007-renewable-energy-less-than-coal-re-lt-c" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Renewable Energy Less Than Coal (RE<C)</span>
</span>
</a>
</li>
<li class="milestone" id="event-2007-the-queen-on-youtube">

<a href="#2007-the-queen-on-youtube" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">The Queen on YouTube</span>
</span>
</a>
</li>
<li class="products" id="event-2007-opensocial">
<a href="#2007-opensocial" hidefocus="" class="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">OpenSocial</span>
</span>
</a>
</li>

<li class="products" id="event-2007-android-mobile-platform">
<a href="#2007-android-mobile-platform" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Android mobile platform</span>
</span>
</a>
</li>
<li class="stats" id="event-2007-googlers-love-chocolate">
<a href="#2007-googlers-love-chocolate" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Googlers love chocolate</span>
</span>
</a>

</li>
<li class="stats noclick" id="event-2007-googler-headcount-16-805">
<a href="#2007-googler-headcount-16-805" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Googler headcount: 16,805</span>
</span>
</a>
</li>
<li class="stats" id="event-2007-year-end-look-at-google-search-trends">
<a href="#2007-year-end-look-at-google-search-trends" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Year-end look at Google search trends</span>
</span>

</a>
</li>
<li class="video" id="event-2007-google-toolbar-explained">
<a href="#2007-google-toolbar-explained" hidefocus="">
<span title="Video" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Toolbar explained</span>
</span>
</a>
</li>
</ul>
</li>
<li class="first">
<h3>
2008 <span class="month">January–March</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2008-1-doodle">
<a href="#2008-1-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2008-google-org-s-new-goals">
<a href="#2008-google-org-s-new-goals" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google.org’s new goals</span>
</span>
</a>
</li>
<li class="milestone" id="event-2008-google-bids-on-spectrum">

<a href="#2008-google-bids-on-spectrum" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google bids on spectrum</span>
</span>
</a>
</li>
<li class="milestone" id="event-2008-doubleclick-acquired">
<a href="#2008-doubleclick-acquired" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">DoubleClick acquired</span>
</span>
</a>
</li>

<li class="milestone" id="event-2008-opensocial-foundation">
<a href="#2008-opensocial-foundation" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">OpenSocial Foundation</span>
</span>
</a>
</li>
<li class="products" id="event-2008-right-to-left-language-searching">
<a href="#2008-right-to-left-language-searching" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Right-to-left language searching</span>
</span>
</a>

</li>
<li class="products" id="event-2008-google-sites">
<a href="#2008-google-sites" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Sites</span>
</span>
</a>
</li>
<li class="video" id="event-2008-making-a-new-year-doodle">
<a href="#2008-making-a-new-year-doodle" hidefocus="">
<span title="Video" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Making a New Year doodle</span>
</span>

</a>
</li>
<li class="video" id="event-2008-gmail-explained">
<a href="#2008-gmail-explained" hidefocus="">
<span title="Video" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Gmail explained</span>
</span>
</a>
</li>
<li class="definition" id="event-2008-misc-n">
<a href="#2008-misc-n" hidefocus="">
<span title="Definition" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">
<dfn>Misc</dfn>, n.</span>

</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">April</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2008-4-doodle">
<a href="#2008-4-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-2008-google-design-principles">
<a href="#2008-google-design-principles" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google design principles</span>
</span>
</a>
</li>
<li class="culture" id="event-2008-april-fool-s-goes-global">
<a href="#2008-april-fool-s-goes-global" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">April Fool’s goes global</span>
</span>
</a>

</li>
<li class="products" id="event-2008-google-earth-updates">
<a href="#2008-google-earth-updates" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Earth updates</span>
</span>
</a>
</li>
<li class="products" id="event-2008-website-optimizer">
<a href="#2008-website-optimizer" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Website Optimizer</span>
</span>

</a>
</li>
<li class="products" id="event-2008-google-finance-china">
<a href="#2008-google-finance-china" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Finance China</span>
</span>
</a>
</li>
<li class="products" id="event-2008-artists-on-igoogle">
<a href="#2008-artists-on-igoogle" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Artists on iGoogle</span>

</span>
</a>
</li>
<li class="video" id="event-2008-larry-and-sergey-announce-virgle">
<a href="#2008-larry-and-sergey-announce-virgle" hidefocus="">
<span title="Video" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Larry and Sergey announce Virgle</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">May</span>

</h3>
<ul class="column">
<li class="doodle" id="event-2008-5-doodle">
<a href="#2008-5-doodle" hidefocus="">

</a>
</li>
<li class="milestone" id="event-2008-google-supports-unicode">
<a href="#2008-google-supports-unicode" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google supports Unicode</span>
</span>
</a>
</li>
<li class="milestone" id="event-2008-adopting-internet-protocol-v6">

<a href="#2008-adopting-internet-protocol-v6" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Adopting Internet Protocol v6</span>
</span>
</a>
</li>
<li class="milestone" id="event-2008-blog-series-explores-search-quality">
<a href="#2008-blog-series-explores-search-quality" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Blog series explores search quality</span>
</span>
</a>
</li>

<li class="culture" id="event-2008-doodle-4-google-us">
<a href="#2008-doodle-4-google-us" hidefocus="">
<span title="Culture" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Doodle 4 Google - US</span>
</span>
</a>
</li>
<li class="products" id="event-2008-google-earth-and-disaster-relief">
<a href="#2008-google-earth-and-disaster-relief" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Earth and disaster relief</span>
</span>
</a>

</li>
<li class="products" id="event-2008-friendconnect">
<a href="#2008-friendconnect" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">FriendConnect</span>
</span>
</a>
</li>
<li class="products" id="event-2008-google-translate-in-10-more-languages">
<a href="#2008-google-translate-in-10-more-languages" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Translate in 10 more languages</span>
</span>

</a>
</li>
<li class="stats" id="event-2008-we-heart-indy-and-spidey">
<a href="#2008-we-heart-indy-and-spidey" hidefocus="">
<span title="Stats" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">We heart Indy and Spidey</span>
</span>
</a>
</li>
<li class="video" id="event-2008-animating-our-doodles">
<a href="#2008-animating-our-doodles" hidefocus="">
<span title="Video" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Animating our doodles</span>

</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">June–July</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2008-6-doodle">
<a href="#2008-6-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-2008-code-jam-us">
<a href="#2008-code-jam-us" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Code Jam - US</span>
</span>
</a>
</li>
<li class="products" id="event-2008-google-finance-real-time-stock-quotes">
<a href="#2008-google-finance-real-time-stock-quotes" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Finance real-time stock quotes</span>
</span>
</a>

</li>
<li class="products" id="event-2008-google-maps-for-mobile-with-transit">
<a href="#2008-google-maps-for-mobile-with-transit" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Maps for mobile with transit</span>
</span>
</a>
</li>
<li class="products" id="event-2008-street-view-for-tour-de-france">
<a href="#2008-street-view-for-tour-de-france" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Street View for Tour de France</span>
</span>

</a>
</li>
<li class="products" id="event-2008-iphone-gets-google-search">
<a href="#2008-iphone-gets-google-search" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">iPhone gets Google search</span>
</span>
</a>
</li>
<li class="products" id="event-2008-a-40-language-initiative">
<a href="#2008-a-40-language-initiative" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">A 40-language initiative</span>

</span>
</a>
</li>
<li class="products" id="event-2008-google-index-1-trillion">
<a href="#2008-google-index-1-trillion" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google index: 1 trillion</span>
</span>
</a>
</li>
<li class="video" id="event-2008-rock-roll-and-data">
<a href="#2008-rock-roll-and-data" hidefocus="">
<span title="Video" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Rock, roll, and data</span>

</span>
</a>
</li>
</ul>
</li>
<li>
<h3>
<span class="month">August–September</span>
</h3>
<ul class="column">
<li class="doodle" id="event-2008-8-doodle">
<a href="#2008-8-doodle" hidefocus="">

</a>
</li>

<li class="milestone" id="event-2008-google-turns-10">
<a href="#2008-google-turns-10" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google turns 10</span>
</span>
</a>
</li>
<li class="milestone" id="event-2008-google-active-at-u-s-political-conventions">
<a href="#2008-google-active-at-u-s-political-conventions" hidefocus="">
<span title="Milestones" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google active at U.S. political conventions</span>
</span>
</a>

</li>
<li class="products" id="event-2008-street-view-in-asia-australia">
<a href="#2008-street-view-in-asia-australia" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Street View in Asia, Australia</span>
</span>
</a>
</li>
<li class="products" id="event-2008-google-suggest">
<a href="#2008-google-suggest" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Suggest</span>
</span>

</a>
</li>
<li class="products" id="event-2008-election-tools-for-citizens">
<a href="#2008-election-tools-for-citizens" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Election tools for citizens</span>
</span>
</a>
</li>
<li class="products" id="event-2008-google-chrome-browser">
<a href="#2008-google-chrome-browser" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">Google Chrome browser</span>

</span>
</a>
</li>
<li class="products" id="event-2008-new-picasa-release">
<a href="#2008-new-picasa-release" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">New Picasa release</span>
</span>
</a>
</li>
<li class="products" id="event-2008-news-archive-search-additions">
<a href="#2008-news-archive-search-additions" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">News Archive Search additions</span>

</span>
</a>
</li>
<li class="products" id="event-2008-first-android-powered-phone">
<a href="#2008-first-android-powered-phone" hidefocus="">
<span title="Products" class="tl-icon"/>
<span class="tl-msg">
<span class="tl-msg-inside">First Android-powered phone</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
    </div>
</body>
</html>

Comments

  1. Zach Langley On 16th October 2008 at 20:10

    Remy,

    Thanks for this great post.

    In order to make it scroll faster I believe you want to multiply the delta by a certain value, not add or subtract some value to or from that delta.

    this.scrollLeft = $(this).data(’scrollLeft’) + ($(this).data(’x') - event.clientX) * 2; // twice as fast

    Regards, Zach

  2. Remy On 16th October 2008 at 21:10

    @Zach - of course! I was even using it on the mouse wheel plugin. Thanks!

  3. Priest On 16th October 2008 at 21:10

    Remy, love the site, the screencasts, and the tips. Keep them coming.

    Just wanted to make a comment on CPU usage. Now, I’m using a Dell dual-core 3.0GHz machine with 2.0GB of RAM. Windows XP.

    I looked at that page through Firefox 2.x and I heard my CPU fan kick up. I looked at the usage and it was idling at about 55-60% usage (overall).

    I loaded the same page up in IE6.x and the CPU usage only varied between 15-20% usage.

    I have no idea why it was chomping down so much more usage in Firefox than in IE, but I figured I’d mention.

  4. Remy On 16th October 2008 at 21:10

    @Priest - interesting stuff. I wonder if Firefox 3 is any better…?

    The CPU throttling is very much down to the timeout and the amount the div moves. Those two together affect how often the browser has to render - on top of which it’s rendering alpha transparency, which (I would imagine) is generally harder than images with no alpha.

    I remember reading that Safari 2 would still animate gif even when they were out of view (or on another tab) and would still consume CPU, so it’s very much down to how each browser has implemented their render engine.

    Let us know if you have a chance to play around with the numbers to see how it affects the CPU usage.

    Thanks!

  5. AJK On 16th October 2008 at 22:10

    Here’s a timeline I did for the bbc a year or so ago.

    http://www.bbc.co.uk/music/sevenages/

  6. Remy On 16th October 2008 at 22:10

    @AJK - nice. Very rock and roll ;-)

  7. k3k On 22nd October 2008 at 07:10

    I little complicated for the end-user usability, but nice. thanks

  8. scott On 25th October 2008 at 20:10

    Hi Remy,

    Thank you so much for this post. It is much appreciated.

    When using your timeline demo page using Safari on a Mac, my mouse-up gets lost if it happens outside of the timeline region. That is, I start inside the timeline region, click and drag the mouse outside the region, and then release. When I go back into the region with the mouse button up, your code still thinks it is down and it scrolls as i move the mouse.

    Is there an easy fix for that behavior?

    Thanks,

    Scott

  9. tammy G On 26th October 2008 at 11:10

    is it possible to scroll the timeline on mouse over? If so, could you show how this can be done, please

  10. sam flowers On 4th November 2008 at 06:11

    tammy,

    I do not think thats possible! At least i can not do it.

    Thansk

  11. Ben On 19th November 2008 at 10:11

    You should use cursor: ‘col-resize’ it explains the function better and it work on more browsers. With moz- the function isn’t explained by his self on the most browsers.

  12. Water On 23rd November 2008 at 23:11

    I little complicated for the end-user usability, but nice. thanks

  13. TJ On 3rd December 2008 at 11:12

    Great post! Thanks! I’m trying to create an apple phone effect with the Scrollable Timeline so when the user scrolls there us a faster movement but also when they let go the timetable moves for a few more seconds with a nice slow down ease to it. Do you know if this can be done and if so how? Thanks.

  14. Chris Mahon On 20th February 2009 at 14:02

    Cheers for the tutorial Remy, awesome stuff as usual. Implemented it on my website here - http://thumbslap.com although I was having some problems with the drag functionality :(

  15. العاب On 29th March 2009 at 03:03

    is it possible to scroll the timeline on mouse over? If so, could you show how this can be done, please

    and for me

  16. Lungos On 22nd April 2009 at 09:04

    AJK your timekine for the BBC is great !

  17. Antti On 1st May 2009 at 13:05

    I think you could also add a ‘return false’ at the end of the mousewheel event attachment - This would prevent the window from scrolling horizontally AND vertically if the page has content that exceeds the height of the browser window.

  18. Dave Bowker On 18th June 2009 at 11:06

    Have added in cursor changes to work across multiple browsers when supported, speed option by Zach, and return false; by Antti.

    http://snipplr.com/view/16062/jquery-overflow-timeline-effect/

  19. Shibi Kannan On 18th June 2009 at 15:06

    Very nice code, amazing effects, I am wondering whether this can be adapted to Wordpress posts to scroll by timeline. Any ideas on how to implement for Wordpress.

  20. ConradH On 10th August 2009 at 07:08

    Thanks for this code. It works and looks great. One issue though - the overflow: hidden does not seem to take effect for me for some reason. The #timeline div displays with a scrollbar and when I check using firebug the overflow never changes from auto to hidden. Any help would be greatly appreciated.

    Shibi - Just use the loop or write your query and make sure to wrap the result you want to scroll in div id=timeline and ul class=tl-events and each individual result in an li tag and everything should work fine.

  21. nerdstalker On 29th August 2009 at 17:08

    Would be great if it had a visible horizontal scroll as a usability enhancement.

  22. James Ison-Stierer On 29th September 2009 at 10:09

    I’m very impressed! Good work - only found your website today but already spent half my day on it!

  23. Nick On 7th November 2009 at 15:11

    Hey there, great tutorial. I’m having a little trouble with IE (of course), where the mouse doesn’t always release. I can see a guy called Scott (from 25th Oct. ‘08) had the same problem with Safari on a Mac. Mine is IE8 (WindowsXP). Many thanks in advance for any help given (from anyone).

  24. Peter On 26th November 2009 at 07:11

    This is a great script! I’m going to use this for a Red Cross Tsunami commemoration timeline. I have also added the Colorbox jquery plugin for displaying pictures and media.

    My issue is that after adding colorbox while the timeline still has the click and drag functionality it has lost the functionality to scroll with the mouse wheel. As a designer primarily, I don’t know how to fix the issue, but I have narrowed down the focus to some sort of conflict when the jquery.min.js file is linked to for the colorbox plugin. The mouse wheel scrolling returns if I remove the link to this file in the head.

    Any suggestions would be welcomed.

    I have the inital part of the project up and running here: http://www.digitalcoffee.com.au/clients/rc/timeline/

  25. Peter On 26th November 2009 at 16:11

    I got a solution - I added in the color box includes and file links before the jquery slider includes. I think previously some of the values set in jquery.js (for the scroller) were getting reset/chnaged when I included jquery.min.js (for colorbox) later in the document. I just switched the order of the includes around and it works fine now! Wow. Thanks for the script - it will make a nice presentation for Red Cross Australia.

Leave your own comment
  • http://