Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Breaking down Amazon's mega dropdown

bjk5.com

Post reply on HN
Print view View original

71–80 of 203 posts

Re: Breaking down Amazon's mega dropdown

#71

Post by kamens »

smackfu wrote: post #59

If the right side box is very short, this algorithm gets a bit fussy. Not a problem for Amazon since their right side box is fixed height, but often a problem for menus where there is only one item in the sub-menu (usually because the sub-menu is programatically filled in.) You have to thread the needle moving your pointer to the right, because if you leave the line, it collapses the selection and selects the next it…

Agreed on the small submenu issue. I think this instant behavior makes the most sense when it's always the case that submenu.height() == menu.height().

Was pointed to http://michelf.ca/blog/2005/mac-sub-menus/ by @gecko this morning, which brings up the opposite (and legit) problem: very, very long submenus.

Mega dropdowns w/ equal submenu height are a nice use for this, though.

Re: Breaking down Amazon's mega dropdown

#73

Post by busted »

kamens wrote: post #71
smackfu wrote: post #59

If the right side box is very short, this algorithm gets a bit fussy. Not a problem for Amazon since their right side box is fixed height, but often a problem for menus where there is only one item in the sub-menu (usually because the sub-menu is programatically filled in.) You have to thread the needle moving your pointer to the right, because if you leave the line, it collapses the selection and selects the next it…

Agreed on the small submenu issue. I think this instant behavior makes the most sense when it's always the case that submenu.height() == menu.height(). Was pointed to http://michelf.ca/blog/2005/mac-sub-menus/ by @gecko this morning, which brings up the opposite (and legit) problem: very, very long submenus. Mega dropdowns w/ equal submenu height are a nice use for this, though.

I think part of making this solution intuitive is to make the submenu box a a fixed height that's equal to the first menu. It's what the author changed his menu to look like as well. Amazon got around having too much empty a space by adding pictures, and too many submenu options by adding a second column. If your submenu is so long that even 2 or 3 columns isnt' enough, it would have been too long for a single column anyway.

Re: Breaking down Amazon's mega dropdown

#74

Post by bazzargh »

jamesmiller5 wrote: post #51
bazzargh wrote: post #41

Earlier quoted context omitted.

I'm guessing that the cross product magic was a hit test for a triangle. Here's an explanation: http://www.blackpawn.com/texts/pointinpoly/default.html

Here are a few different solutions to determine if a point is in a polygon with code examples. I think solution 3 might be applicable and faster. Section: Determining if a point lies on the interior of a polygon http://paulbourke.net/geometry/polygonmesh/

Yup, that looks right, but it can be made even simpler in this case because one of the segments is always vertical.

  var prevOffset = prev.x-lowerRight.x;
  loc.x
This is in fact equivalent to what's in jQuery.menu-aim.js, eg upperSlope upperSlope - prevUpperSlope I'd prefer the code above though, as there's no icky division by zero.

Re: Breaking down Amazon's mega dropdown

#75

Post by d0m »

calhoun137 wrote: post #55

There is an important point to be made about the quote from the end of this article. "Thanks go to Ben Alpert for helping me understand the linear algebra / cross-product magic ...I ended up going w/ a cruder slope-based approach, mostly b/c I’ve lost all intuitive understanding of linear algebra" Let that be a wake up call to all of the programmers who continue to claim that you can "get away" with out knowing much…

For the 0.1% case where he actually would have needed math, he got away with it and just asked a friend. Nothing wrong in focusing on the 90% of the 90/10 and asking for help if you're in that 10% part.

Re: Breaking down Amazon's mega dropdown

#76

Post by hknozcan »

andrewljohnson wrote: post #61
calhoun137 wrote: post #55

There is an important point to be made about the quote from the end of this article. "Thanks go to Ben Alpert for helping me understand the linear algebra / cross-product magic ...I ended up going w/ a cruder slope-based approach, mostly b/c I’ve lost all intuitive understanding of linear algebra" Let that be a wake up call to all of the programmers who continue to claim that you can "get away" with out knowing much…

I took away the exact opposite - this is yet another example of not needing to know the right math. In the end, he can study up a bit and/or seek out a friend who does know, but be got the hack done without it. This is how it works with my wife and I sometimes. I write a lot of code, and she either fixes or writes or advises me on the bit I need to work much better. I admit we can't run the world or write good code w…

Absolutely not. Yes, you might be able to hack something with outside help but knowing math it is the mind set that would allow you to build something like this in the first place. You can imagine solutions to problems because you might visualize how they can be solved.

Re: Breaking down Amazon's mega dropdown

#79

Post by clauretano »

UnoriginalGuy wrote: post #21

This has always irked me about Windows's implementation of the auto-complete box. If I start typing, in the address bar for one example, and my mouse happens to be resting over where the auto-complete will soon appear (as is likely because I just had to move the cursor to the address bar to select it) when I hit "enter" it will go to whatever my mouse cursor was over rather than what I typed. The auto-complete box sh…

This happens with Win7's start search. Considering that many power users use start search without the mouse (i.e. hit windows key, start typing the name of something, hit enter) it's a really bad implementation.

The Mac equivalent (cmd+space to trigger spotlight, start typing, hit return) behaves as it should. If you move your mouse it'll highlight what is under it, otherwise the highlight stays on the top result as you type.

Re: Breaking down Amazon's mega dropdown

#80

Post by Mahn »

I don't get why is detecting the mouse direction necessary in the case of the Amazon dropdown; I can see the utility in the Bootstrap example that the article highlights, but if the dropdown menu and its submenus both fit in a perfect square, wouldn't it be enough to detect whether the cursor is inside of either the menu or the submenu to properly show/hide the dropdown and its submenus? What are the drawbacks of this method compared to detecting the mouse direction like the article suggests?
Post reply on HN