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
    Posts
  • #3207
    DanM
    Participant

    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!

    #3223
    admin
    Keymaster

    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)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?