SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    0 Post(s)
    0 Thread(s)

    Question Type Issue undefined is not a function jQuery Plugin

    I am getting an undefined function error when I try calling a jQuery plugin that I have installed in my site.
    The plugin code is relatively simple.

    * polarisSlider v1
    * Last Updated: October 25, 2012
    * This is a very simple and convenient slider/fader to transition between images or content. it offers only fade and slide transitions to keep the script
    * as lightweight as possible.
    * Developed by Mediacom
    * Modified from code developed by Jeffrey Way
    (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.
                        'width' : '99999px',
                        'position' : 'relative',
                        'padding' : 0
                    // If the user chose the "slide" transition...
                    if(options.transition === 'slide') {
                            'float' : 'left',
                            'list-style' : 'none'
                            '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') {
                            '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. 
                    // 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.
                                   .css('left', 0)
                                   .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() {   
                                   .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.
    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>
    And the script gets called using the following code:

    <script type="text/javascript" charset="utf-8">
                speed : 2500,
                pause : 3000
    </script><!--End polarisSlider-->

    Any help would be appreciated.

    I have zipped site up (very small, 592K zipped) and attached it here so if someone could take a closer look, I'd appreciate it.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Christchurch, New Zealand
    104 Post(s)
    4 Thread(s)
    Quote Originally Posted by alisamii View Post
    I am getting an undefined function error when I try calling a jQuery plugin that I have installed in my site.
    I see in your polaris.min.js file that it refers instead to a different plugin that it seems to create.

    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts