SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    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.

    Code:
    /*
    * 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
    * http://mediacom.net
    * info@mediacom.net
    */
    
    
    (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:

    Code:
    <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:

    Code:
    <script type="text/javascript" charset="utf-8">
            $('ul#slides').polarisSlider({
                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.

    polaris4.zip

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    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.

    Code:
    e.fn.jwSlider=function(t){
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

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