Added support for positioning dropdowns relative-to-parent.

[plapier]

Note: to make this easier to work with my current setup, I changed the JS to use soft tabs (2 spaces) and cleaned up extra whitespace. Soft-tabs are recommended for cross-environment rendering.

---

To start, I found this plugin to be very useful for a project I'm currently working on. My layout depends on using dropdowns inside a fixed position element, like a header for instance.

When scrolled to the top of the document, the dropdowns position fine with the current implementation, but once you scroll the document and click a dropdown-trigger, the dropdowns position incorrectly. This is caused because the dropdowns are being positioned using the .offset() method, which calculates position relative to the document.

I made a demo using the current build: http://jsfiddle.net/plapier/VW94U/

Note: Scroll the results panel slightly, then click the dropdown-trigger. You can see the incorrectly positioned dropdown.

---

In order to make the dropdowns position correctly in a fixed position element, I've added a position-relative class:

<div id="dropdown-position" class="dropdown dropdown-relative">
  <div class="dropdown-panel">
    {{ content }}
  </div>
</div>

This class will trigger the dropdown to be positioned relative to the offset parent, using the .position() method.

This also requires the dropdowns to be placed inside the parent element you want it to be positioned relatively to, as opposed to immediately before your closing body tag, as recommended in the docs. Example:

<header>
  <button data-dropdown="#dropdown-menu"> My Button </button>
  <div id="dropdown-menu" class="dropdown dropdown-relative">
    <div class="dropdown-panel">
      {{ content }}
    </div>
  </div>
</header>

I've created a demo based off my changes to the JS: http://jsfiddle.net/plapier/d859h/

The demo shows the differences between the offset() method and the position() method.

Note: Remember to scroll the Result panel slightly and click the trigger to view the differences.

The new code also takes the trigger's margins into consideration for accurate dropdown positioning of a dropdown-relative element.

---

I think the additional dropdown-relative class fits into your current approach for the plugin.

I was also thinking about changing the class name to downdown-relative-to-parent, but that seemed too long.

Let me know your thoughts.

Thanks for the plugin! :smiley:

[claviska]

The Fiddle doesn't seem to be working, but that could be my fault for not getting to this sooner.

Aside from that, I'll be honest in that I'm reluctant to accept this simply because of the formatting. There is a holy war about whether to use tabs or spaces for indentation. Without getting into all that, let's just say that everyone has their preference and soft tabs don't fit in my current convention :(

If you're up to reformatting and updating the Fiddles, I'm willing to take another look at this. I apologize for not being able to get to this sooner.

[plapier]

I created a new RP with the correct formatting, and updated the fiddles.