Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Cannot get width of elements

Home Forums Older releases 1.0.x Cannot get width of elements

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #3207

    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>

    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");
          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!


    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘1.0.x’ is closed to new topics and replies.