On Aug 18, 2:44 pm, Dylan Fogarty-MacDonald <[email protected]> wrote: > You could achieve something like this with CSS and no JavaScript:
Google's implementation is actually quite a bit more complicated and subtle than what anybody has suggested so far. I suspect that these smaller details were why you were blown away with it (as I was). Firstly, they don't do the hovers in CSS as when you hover over an image near the edge of the screen, the tooltip actually pushes away from the edge. You'd need JS to detect the screen dimensions. They also have a slight delay on the tooltip so that you don't get an epileptic fit when you move your mouse across the screen. Again, something you can't do with cross-browser CSS. However, what is most impressive about this is not the client side, but the processing they are doing on the server. The page isn't using anything like jQuery masonry[1]. You can test this by resizing the browser window. If you open up the resource inspector in Safari you'll notice it makes a HTTP request to get a new set of results whose relative ratios fill the grid up perfectly. Not only is Google ordering images based on search relevancy but also how well they fit in an X by Y grid, together. Their query must also extremely quick (and obviously must scale) because there is little delay when you resize a window. If they were using something like jQuery masonry, they would be limited to the results they currently had which would certainly lead to a less "full" grid. As cool as it is, Google must only be playing around because they've strangely disabled it in Opera. It's a shame that Google's "open standards" doesn't extend to it's UI. Cheers! Chris PS. Check out this Google search: http://www.google.no/search?hl=no&client=safari&rls=en&q=opera&aq=f&aqi=g10&aql=&oq=&gs_rfai= See the keyboard in the right hand side of the input bar? HOW COOL! Try typing something and watch the keyboard change! :) [1] Ceveat about jQuery masonry. Whilst it is a cool effect, you need to have all the widths/heights of every element defined either in CSS or HTML *before* the window:loaded event is fired. If you can't do that then you get an ugly flash waiting for window:loaded to fire. Also note that document:loaded is different to window:loaded. -- You received this message because you are subscribed to the Google Groups "Ruby or Rails Oceania" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/rails-oceania?hl=en.
