Cannot get width of elements

[DanM]

I have made up the following test code, added to my default.aspx page:

<div id="test-menu">
    <a href="/lus1">A</a>
    <a href="/lus2">B</a>
    <a href="/lus3">C</a>
    <a href="/lus4">D</a>
    <a href="/lus5">E</a>
    <a href="/lus6">F</a>
    <a href="/lus7">G</a>
    <a href="/lus8">H</a>
    <a href="/lus9">I</a>
    <a href="/lus10">J</a>
    <a href="/lus11">K</a>
    <a href="/lus12">L</a>
    <a href="/lus13">M</a>
    <a href="/lus14">N</a>
    <a href="/lus15">O</a>
    <a href="/lus16">P</a>
    <a href="/lus17">Q</a>
    <a href="/lus18">R</a>
    <a href="/lus19">S</a>
    <a href="/lus20">T</a>
    <a href="/lus21">U</a>
    <a href="/lus22">V</a>
    <a href="/lus23">W</a>
    <a href="/lus24">X</a>
    <a href="/lus25">Y</a>
    <a href="/lus26">Z</a>
    <div class="clearboth"></div>
  </div>

The JavaScript/JQuery code that goes with it is:

function resizeWin() {
      $("#test-menu").css("display", "block");

      $("#test-menu > a").each(function (index) {
        $this = $(this);
        $this.css("display", "block");
        $this.removeClass("last-row");
      });

      var maxTop = $("#test-menu a:last").position().top;
      $("#test-menu > a").each(function (index) {
        $this = $(this);
        if ($this.position().top == maxTop) $this.addClass("last-row");
      });
    }

The corresponding CSS is:

#test-menu {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  display: none;
  margin: 20px 0;
}

#test-menu a {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-top: 1px solid black;
  display: none;
  float: left;
  margin-top: -1px;
  padding: 20px;
}

#test-menu a.last-row {border-bottom: none;}

In my test case, it works fine. When I use the same div with 26 links inside it in an li of a SmartMenus menu, I cannot obtain valid element top values (or widths either). Is there something that SmartMenus is doing with submenus that explains why I can’t get element positions or sizes? Is there another way to accomplish this? As the width of the browser window increases or decreases, I need to take away the bottom border of only those links that are on the last row.

Thanks for your help!

[admin]

If the code runs when the sub menu is hidden (it is hidden via display: none), then you won’t be able to obtain the links’ dimensions or position. A sample workaround would be to set it temporary display: block (but still keep it hidden, for example, via visibility: hidden), get the values you need and then set it display: none again.

[Author]

Posts