jquery uncaught TypeError cannot read property 'left' of undefined on first page

good day,

im having a problem in my website im getting "uncaught TypeError cannot read property 'left' of undefined" in my homepage but everythings fine in others pages.

hope anyone will help me with this. thanks,

script:

$(document).ready(function() {
    $('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
    var activeElement = $('#cssmenu>ul>li:first');

    $('#cssmenu>ul>li').each(function() {
        if ($(this).hasClass('active')) {
            activeElement = $(this);
        }
    });
    var posLeft = activeElement.position().left; //here i get the error
});

html:

<div id='cssmenu'>
   <li><a class="active" style="font-family: Calibri;" href='Home.html'><span>Home</span></a></li>
   <li><a style="font-family: Calibri;" href='AboutUs.html'><span>About Us</span></a></li>
   <li class='active has-sub'>
      <a style="font-family: Calibri;" href='Products.html'><span>
      Products</span></a>
      <ul>
         <li><a style="font-family: Calibri;" href='Products_Argus_Responder.html'><span>Argus
            Responder</span></a>
         </li>
         <li><a style="font-family: Calibri;" href='Products_Argus_Explorer.html'><span>Argus
            Explorer</span></a>
         </li>
      </ul>
   </li>
   <li><a style="font-family: Calibri;" href='Warranty.html'><span>Warranty</span></a></li>
   <li class='last'><a style="font-family: Calibri;" href='ContactUs.html'><span>Contact
      Us</span></a>
   </li>
   </ul>
</div>

Answers


You are missing <ul> inside the #cssmenu so your selector #cssmenu>ul>li.active won't find any element as it looks for a ul which is a child of #cssmenu element.

Also you can simplify your jQuery as below using class selector

$(document).ready(function() {
  $('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
  var activeElement = $('#cssmenu>ul>li.active');
  if (activeElement.length == 0) {
    activeElement = $('#cssmenu>ul>li:first');
  }
  var posLeft = activeElement.position().left; //here i get the error
  console.log(posLeft)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='cssmenu'>
  <ul>
    <li><a class="active" style="font-family: Calibri;" href='Home.html'><span>Home</span></a></li>
    <li><a style="font-family: Calibri;" href='AboutUs.html'><span>About Us</span></a></li>
    <li class='active has-sub'>
      <a style="font-family: Calibri;" href='Products.html'><span>
        Products</span></a>
      <ul>
        <li><a style="font-family: Calibri;" href='Products_Argus_Responder.html'><span>Argus
          Responder</span></a>
        </li>
        <li><a style="font-family: Calibri;" href='Products_Argus_Explorer.html'><span>Argus
          Explorer</span></a>
        </li>
      </ul>
    </li>
    <li><a style="font-family: Calibri;" href='Warranty.html'><span>Warranty</span></a></li>
    <li class='last'><a style="font-family: Calibri;" href='ContactUs.html'><span>Contact
      Us</span></a>
    </li>
  </ul>
</div>

how about this

  $('#cssmenu li:first');

this will look for every li tags, then will select first one, this removes the complication of, where the tag is exactly, as long as it's in #cssmenu element


This function can't find the "activeElement", because it's selector can't find any element right after "#cssmenu" So it's null and you can't call position() on it.


Need Your Help

Trying to remove three or more <br> from the_content

php regex

As the title says I'm trying to remove and replace three or more &lt;br&gt; from get_the_content(); in my single.php.

tablesorter problems with 2 table in a page

javascript jquery tablesorter scroller

I try to put 2 tables in a same page using jquery plugin tablesorter ..