#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    37
    Rep Power
    5

    Type Issue undefined is not a function


    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
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    37
    Rep Power
    5
    I don't think it is a conflict issue as jQuery is loaded once and the function is a very simple image slider with two options for transitions (fade or slide).
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    I am not sure then (the noConflict() function was just a stab in the dark); you would need to post your code for review, so that others might be able to see where your error lies.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    37
    Rep Power
    5
    Well, I could post the code, but that would be a long post, and it may be easier to just provide the entire site as a zip file to someone (it is small, 592K zipped)
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    37
    Rep Power
    5
    Well, the code is here:

    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-->
    There are a couple of other jQuery plugins installed as well, but jquery itself is only called once.
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Ok, I tested it with some of my own images and this should work; because it did for me... with no error(s).

    Code:
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    /*
    * 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);
    </script>
    
    <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>
    
    <script type="text/javascript" charset="utf-8">
            $('ul#slides').polarisSlider({
                speed : 2500,
                pause : 3000
            });
    </script><!--End polarisSlider-->

IMN logo majestic logo threadwatch logo seochat tools logo