Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery Uncaught TypeError: Cannot read property 'left' of undefined
    primarykey
    data
    text
    <p>Recently, I've made a lavalamp plugin based on a nettuts tutorial and it worked well on my other site. I wanted to reuse it with my other site but I'm getting this error:</p> <blockquote> <p>Uncaught TypeError: Cannot read property 'left' of undefined </p> </blockquote> <p>I am a beginner with jQuery and I can't really find out how to fix it.</p> <p>Code:</p> <pre><code>(function($){ $.fn.lavylamp = function(options) { options = $.extend({ overlay: 20, speend: 300, reset: 1500, color: '#78C2FF', easing: 'easeOutExpo', }, options); return this.each(function(){ var nav = $(this), currentPageItem = $('#active', nav), cursor, reset; $('&lt;li id="blob"&gt;&lt;/li&gt;').css({ width: currentPageItem.outerWidth(), left: currentPageItem.position().left, top: currentPageItem.position().top, backgroundColor: options.color, }).appendTo('#nav'); blob = $('#blob', nav); $('li', nav).hover(function(){ blob.animate( { left: $(this).position().left, width: $(this).width() }, { duration: options.speed, easing: options.spped, queue: false } ); }, function(){ clearTimeout(reset); blob.stop().animate({ left: $(this).position().left, width: $(this).width() }, options.speed); reset = setTimeout(function(){ blob.stop().animate({ width: $(this).outerWidth(), left: $(this).position().left, }, options.speed); }, options.reset); }); }); } })(jQuery); </code></pre> <p>And the error applies to this part:</p> <pre><code>$('&lt;li id="blob"&gt;&lt;/li&gt;').css({ width: currentPageItem.outerWidth(), left: currentPageItem.position().left, top: currentPageItem.position().top, backgroundColor: options.color, }).appendTo('#nav'); </code></pre> <p>Could someone please give me a hint?</p> <p><strong>EDIT</strong></p> <p>HTML</p> <pre><code>&lt;ul id="nav" class="unstyled inline"&gt; &lt;li&gt;&lt;a href=""&gt;Start up Business&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="industries.php=2"&gt;Entrepreneurial &amp; Familit Owned Business&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Hight Net Worth Individuals&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="careers.php=1"&gt;Professionlas&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="industries.php=8"&gt;Real Estate Professionlas&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="industries.php=7"&gt;Not For Profit&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload