jquery Uncaught TypeError: Cannot read property 'left' of undefined

Question

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:

Uncaught TypeError: Cannot read property 'left' of undefined

I am a beginner with jQuery and I can't really find out how to fix it.

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;

            $('<li id="blob"></li>').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);

And the error applies to this part:

$('<li id="blob"></li>').css({
                width: currentPageItem.outerWidth(),
                left: currentPageItem.position().left,
                top: currentPageItem.position().top,
                backgroundColor: options.color,
            }).appendTo('#nav');

Could someone please give me a hint?

EDIT

HTML

<ul id="nav" class="unstyled inline">
            <li><a href="">Start up Business</a></li>
            <li><a href="industries.php=2">Entrepreneurial & Familit Owned Business</a></li>
            <li><a href="">Hight Net Worth Individuals</a></li>
            <li><a href="careers.php=1">Professionlas</a></li>
            <li><a href="industries.php=8">Real Estate Professionlas</a></li>
            <li><a href="industries.php=7">Not For Profit</a></li>
        </ul>

@soderslatt you where right the currentPageItem was null thank you was able to fix it thanks so much — Web Student, Jun 11 '13 at 06:47

score 0 · Answer 1 · answered Jun 11 '13 at 06:32

0

Just a guess, but I suspect:

 currentPageItem = $('#active', nav),

should be:

 currentPageItem = $('.active', nav),

# is for selecting by ID, . is for selecting by class. Since IDs are unique, it doesn't make sense to search for a different active ID in each element, this is what classes are used for.

answered Jun 11 '13 at 06:32

Barmar

741,623
53
500
612

thank you for your answer but no it did not help, whats strange its working on the other site but not here – Web Student Jun 11 '13 at 06:35

score 0 · Answer 2 · answered Jun 11 '13 at 06:54

0

May be, you want to select one element, not two?

currentPageItem = $('#active', nav)

selects all with id="active" and nav also.

answered Jun 11 '13 at 06:54

Plamen

320
4
19

jquery Uncaught TypeError: Cannot read property 'left' of undefined

2 Answers2