Type Issue undefined is not a function

[alisamii]

Hi. I am having some problems with a jQuery plugin which is throwing a "Type Issue undefined is not a function" error.

I don't think I can send an attachment here, but I would appreciate if someone would message me and let me know how I could send them a zip file with my dev site (zipped, it is 592K) as it is not online.

I am sure it is a simple issue, but I'm not sure how to solve it.

Thanks,

Ali

[WolfShade]

Can you post some sample code of the function that is throwing the error?

[alisamii]

The plugin code is relatively simple.

(function($) {

    $.fn.polarisSlider = function(options) {

        // set default options
        var defaults = {
            speed : 1000,
            pause : 2000,
            transition : 'fade'
        },

        // Take the options that the user selects, and merge them with defaults.
        options = $.extend(defaults, options);

        // Needed to fix a tiny bug. If the pause is less than speed, it'll cause a flickr.
        // This will check for that, and if it is smaller, it increases it to just about the options.speed.
        if(options.pause <= options.speed) options.pause = options.speed + 100;

        // for each item in the wrapped set
        return this.each(function() {

            // cache "this."
            var $this = $(this);

            // Wrap "this" in a div with a class of "slider-wrap."
            $this.wrap('<div class="slider-wrap" />');

            // Set the width to a really high number. Adjusting the "left" css values, so need to set positioning.
            $this.css({
                    'width' : '99999px',
                    'position' : 'relative',
                    'padding' : 0
                });

                // If the user chose the "slide" transition...
                if(options.transition === 'slide') {
                    $this.children().css({
                        'float' : 'left',
                        'list-style' : 'none'
                    });

                    $('.slider-wrap').css({
                        'width' : $this.children().width(),
                        'overflow' : 'hidden'
                    });             
                }

                // If the user chose the "fade" transition, instead pile all of the images on top of each other.
                if(options.transition === 'fade') {
                    $this.children().css({
                        'width' : $this.children().width(),
                        'position' : 'absolute',
                        'left' : 0
                    });

                    // reorder elements to fix z-index issue.

                    for(var i = $this.children().length, y = 0; i > 0; i--, y++) {      
                        $this.children().eq(y).css('zIndex', i + 99999);
                    }   

                    // Call the fade function. 
                    fade();
                }

                // If the user instead chose the "slide" transition, call the slide function.
                if(options.transition === 'slide') slide(); 


                function slide() {
                    setInterval(function() {
                        // Animate to the left the width of the image/div
                        $this.animate({'left' : '-' + $this.parent().width()}, options.speed, function() {
                            // Return the "left" CSS back to 0, and append the first child to the very end of the list.
                            $this
                               .css('left', 0)
                               .children(':first')
                               .appendTo($this); // move it to the end of the line.
                        })
                    }, options.pause);
                } // end slide

                function fade() {
                    setInterval(function() {
                        $this.children(':first').animate({'opacity' : 0}, options.speed, function() {   
                            $this
                               .children(':first')
                               .css('opacity', 1) // Return opacity back to 1 for next time.
                               .css('zIndex', $this.children(':last').css('zIndex') - 1) // Reduces zIndex by 1 so that it's no longer on top.                  
                               .appendTo($this); // move it to the end of the line.
                        })
                    }, options.pause);
                } // end fade           

            }); // end each     

        } // End plugin. Go eat cake.

    })(jQuery);

The html side of things is a ul that is in a div container:

<div class="slideshow">
    <ul id="slides">
        <li><img src="images/slide1/commercial-insurance-107807003.jpg" alt="Commercial Insurance"></li>
        <li><img src="images/slide1/employee-benefits-86250418.jpg" alt="Employee Benefits"></li>
        <li><img src="images/slide1/fine-arts-5384764.jpg" alt="Fine Arts"></li>
        <li><img src="images/slide1/personal-insurance-101341654.jpg" alt="Personal Insurance"></li>
        <li><img src="images/slide1/risk-management-96075848.jpg" alt="Risk Management Planning"></li>
    </ul>
</div>

And the script gets called using the following code:

<script type="text/javascript" charset="utf-8">
        $('ul#slides').polarisSlider({
            speed : 2500,
            pause : 3000
        });
</script><!--End polarisSlider-->

I can also send you a zip of the site. It isn't online.

[WolfShade]

I cannot download zip files at work.

Have you tried placing the last of your code samples inside the jQuery document ready state?

[alisamii]

I'm pretty much a newbie when it comes to jQuery and js in general, so your question went over my head as I have no idea what you mean by "jQuery document ready state"

[WolfShade]

After you load the jQuery file, take your last bit of code:

<script type="text/javascript" charset="utf-8"> 
        $('ul#slides').polarisSlider({
             speed : 2500,
             pause : 3000
         }); 
</script><!--End polarisSlider-->

.. and do this with it:

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
 $('ul#slides').polarisSlider({
             speed : 2500,
             pause : 3000
         });
});
 </script><!--End polarisSlider-->

This will prevent the polarisSlider from being called until after the whole document is loaded.

[alisamii]

Still getting the same error

[WolfShade]

Hmmm.. I'm at a loss. Why would it think that "Type Issue undefined" is or is not a function??

[alisamii]

I wish there was someway I could get the site zip to you. If I upload the zip file it to a site and provide you the link, would you be able to download it?

[WolfShade]

Security settings, here, prevent it.

[felgall]

Have you tried stepping through it line by line using the debugger built into your browser to find out which line of the code is giving the error?

[Dormilich]

"Type Issue undefined is not a function" error

I’d hazard a guess at that you somewhere are supposed to pass a function callback in another function, but don’t.