CODEWITHSUNDEEP
javascriptjqueryhtml
Vinz with the Z
Vinz with the Z

Reputation: 157

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>

Upvotes: 0

Views: 1090

Answers (3)

Developerium
Developerium

Reputation: 7265

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

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

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>

Demo: Problem, Solution

Upvotes: 2

Emad Armoun
Emad Armoun

Reputation: 2099

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.

Upvotes: 0

Related Questions