SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Location
    Canada, Alberta
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jquery image slider not sliding in chrome

    The script is written in Jquery, it's a simple piece of code which I've seen on another website here http://www.renderwave.it/en. I modified the code a bit to work with a website I made for my portfolio.

    The problem with the code is that is works fine in firefox but it doesn't on chrome. the code doesn't break entirely but on chrome the images doesn't slide, it just jumps from image to image. here's the code

    Code:
    var settings = {
                startingPosition    : 0, //--------------------------------set starting position for images, 0 for first image
                slideSpeed          : 550, //---------------------------speed of slide, seconds/fast/slow
                easing              : 'linear', //-------------------------easing type
                navigationClass     : 'slider_navigation', //--------------class of navigation (the prev and next)
                activeItemClass     : 'slider-current-active-element', //--name of class to be added to first element
                repeat              : true, //-----------------------------make gallery neverending
                infoClass           : 'info_container', //-----------------class of text associated with image
                //activeSlideNum      : 0, //-------------------------------add class to slide, starting at 0
                defaultMargin       : 0, //--------------------------------for styling purposes
                autoPlay            : false, //----------------------------activate slideshow (UNACTIVE)
                slideCallback       : function(){
                                            return false
                                        },
                whileSlideCallback  : function(){
                                            return false
                                        }
            };
            
            return this.each(function() {
                
                //merge default setting with user settings
                var opt = $.extend( settings, options );
                
                var self = this;
                
                /*assigning values for easy selection*/
                
                //get first ul
                var elContainer = $('ul', self).eq(0);
                
                //select children
                var elChildren = elContainer.children();
                
    	    //set active class
                var elActive = elChildren.eq(0);
                elActive.addClass(opt.activeItemClass);
    	    
                //select all images
                var imgContainer = $('img', elContainer);
                
                //count all images
                var countImages = imgContainer.size();
                
                //get images width
                var imgWidth = imgContainer.outerWidth(true);//true includes margin width
                
                //set total width of ul element
                var elContWidth = countImages * imgWidth;
                
                //set starting image
                var elPosition = opt.defaultMargin + -(imgWidth * opt.startingPosition);
                
                //styling setup
                elContainer.css({
                    'marginLeft'    : elPosition,
                    'width'         : elContWidth});
                
    	    
    	    $("<div></div>").appendTo('#header').addClass('slider_detail_display');
    
                //setting up slide event
                var slide = function(direction){
                    
                    slideUnbind();
                    //elChildren.removeClass(opt.activeItemClass);
                    
                    if(opt.repeat){
                        if(direction == 'back'){
                            //take last list image and put in front
                            $("> :last", elContainer).prependTo(elContainer);
                            //reset margin
                            elPosition -= imgWidth;
                            elContainer.css({
                                'marginLeft'    : elPosition});
                        };
                    };
                    
                    //set new animation margin
                    var animateToWidth = elPosition - (imgWidth);
                    
                    if(direction == 'back'){
                        //set new animation margin if back is clicked
                        var animateToWidth = elPosition + (imgWidth);
                        //TODO: class needs fixing
                        //activeClassAdd('back');
                    }else{
                        //activeClassAdd('forward');
    		    
                    }
                    
                    activeClassAdd(direction);
                    
                    elPosition = animateToWidth;
                    
                    //the slide animation
                    elContainer.animate({
                        'marginLeft' : animateToWidth
                    }, opt.slideSpeed, opt.easing,
                    function(){
                        //if forward is clicked
                        if(opt.repeat && direction == 'forward'){
                            
                            $("> :first", elContainer).appendTo(elContainer).css({opacity : 0}).animate({opacity : 1}, 400);
                        	elPosition += imgWidth;
                            elContainer.css({
                                'marginLeft' : elPosition
                            });
                          
                        }
                        
                        
                        opt.slideCallback(direction);
                        slideBind();
    
                    });
                    opt.whileSlideCallback(direction);
                    
                };//slide()
                
                var activeClassAdd = function(direction){
                    if(direction == 'forward'){
                        $('.'+opt.activeItemClass).removeClass(opt.activeItemClass).next().addClass(opt.activeItemClass);
                    }else{
                        $('.'+opt.activeItemClass).removeClass(opt.activeItemClass).prev().addClass(opt.activeItemClass);
                    }
                };
                
                var textFade = function(direction){
                    
                    var slideText =  $('.'+opt.activeItemClass).next().children('.'+opt.infoClass).html();
                    if(!direction){
    		    $('.slider_detail_display').append(slideText);
    		}else{
    		    $('.slider_detail_display').fadeOut('fast', function(){
    			$(this).empty();
    			$(this).append(slideText).fadeIn('fast');
    			
    		    });
    		}
    		
                };
                
                //unbind
                var slideUnbind = function(){
                    $('.back, .forward', '.'+opt.navigationClass).unbind();
                };
                
                //setting up click events
                var slideBind = function(){
                   
                    $('.back', '.'+opt.navigationClass).click(function(){
                        slide('back');
    		    textFade('back');
                        return false;
                    });
                    
                    $('.forward', '.'+opt.navigationClass).click(function(){
                        slide('forward');
    		    textFade('forward');
                        return false;
                    });
                    
                    
                    
                    
                };
                 
                 //init
    
                slideBind();
                textFade();
    Most of it works fine but I'm guessing the animate part in the problem
    Code:
    //the slide animation
                    elContainer.animate({
                        'marginLeft' : animateToWidth
                    }, opt.slideSpeed, opt.easing,
                    function(){
                        //if forward is clicked
                        if(opt.repeat && direction == 'forward'){
                            
                            $("> :first", elContainer).appendTo(elContainer).css({opacity : 0}).animate({opacity : 1}, 400);
                        	elPosition += imgWidth;
                            elContainer.css({
                                'marginLeft' : elPosition
                            });
                          
                        }
    Here's the dummy site I made http://dynamicfilmcompany.deadlinemedia.ca/

    I'm no expert on javascript so if you can give me any input on how to make the code better, it'll be greatly appreciated. thanks!

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi guy
    follow this code to try....
    Code JavaScript:
      (function($) {
        /*
         * By Brandon Aaron
         */
        $.fn.reverse = [].reverse;
        $.configurableSlider = {};
        $.fn.configurableSlider = function(options){
            /*
             * Let's define some settings
             */
            var settings = {
                selector : this.selector,
                startPos : 0,
                infiniteMode : false,
                fillAfter : false,
                elementParent : 'ul',
                speed : 600,
                easing : 'linear',
                naviMarkup : '<div class="slider-navi"><a class="foward"></a><a class="back"></a></div>',
    			naviContainer: false,
                activeItemClass : 'slider-current-active-element',
                slideCallback : function(){
                    return false
                },
                whileSlideCallback : function(){
                    return false
                }
            };
            var options = $.extend(settings, options);
            this.each(function(){
                var self = this;
                var elParent = $(options.elementParent, self).eq(0);
                var elements = elParent.children();
                elements.eq(0).addClass(options.activeItemClass);
                var elW = elements.outerWidth(true);
                var obj = {actualPos : options.startPos};
                elParent.css({
                    left : obj.actualPos
                });
                if(options.infiniteMode){
     
                }
     
                var slide = function(direction){
                    slideUnbind();
                    if(options.infiniteMode){
    					if(direction == 'back'){
    						$("> :last", elParent).prependTo(elParent);
                        	obj.actualPos-=elW;
    	                    elParent.css({
    	                        left : obj.actualPos
    	                    });
    					};
    				};
                    var animateTo = obj.actualPos-(elW);
                    if(direction == 'back'){
                        animateTo = obj.actualPos+(elW);
                        $('.'+options.activeItemClass).removeClass(options.activeItemClass).prev().addClass(options.activeItemClass);
                    }else{
                        $('.'+options.activeItemClass).removeClass(options.activeItemClass).next().addClass(options.activeItemClass);
                    }
                    obj.actualPos = animateTo;
                    elParent.animate({
                        left : animateTo
                    }, options.speed, options.easing, function(){
                        if(options.infiniteMode && direction == 'foward'){
                            $("> :first", elParent).appendTo(elParent).css({opacity : 0}).animate({opacity : 1}, 400);
                        	obj.actualPos+=elW;
    	                    elParent.css({
    	                        left : obj.actualPos
    	                    });
     
                        };
                        options.slideCallback(direction);
                        slideBind();
                    });
                    options.whileSlideCallback(direction);
                };
               	if(!options.naviContainer){
    				options.naviContainer = self;
    			}else{
    				options.naviContainer = $(options.naviContainer);
    			}
    			var slideUnbind = function(){
    				$(".foward, .back", options.naviContainer).unbind();
                }
                var slideBind = function(){
                    $(".foward", options.naviContainer).click(function(){
                        slide('foward');
                        return false;
                    });
                    $(".back", options.naviContainer).click(function(){
                        slide('back');
                        return false;
                    });
                };
                elParent.width(elW*elements.length);
                // Init object
                $.configurableSlider[options.selector] = {};
                $.configurableSlider[options.selector] = {options : options, obj : obj};
                slideBind();
            });
     
            /*
             * Return jquery object with selection
             */
            return this;
        };
    })(jQuery);

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Location
    Canada, Alberta
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, thanks for the quick reply. that code does work and my code is pretty much the modified version of that code, it's just the sliding part that doesn't work on chrome.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by charlestonolaes View Post
    hi, thanks for the quick reply. that code does work and my code is pretty much the modified version of that code, it's just the sliding part that doesn't work on chrome.
    I'm using Chrome 10 and it seems to slide fine, unless I'm missing something here.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Location
    Canada, Alberta
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ohhhh, I'm still using chrome 9, I didn't even know chrome 10 was out yet... oh well.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by charlestonolaes View Post
    ohhhh, I'm still using chrome 9, I didn't even know chrome 10 was out yet... oh well.
    I happen to be on the dev channel. You can find a list of the different ones, and further info at Early Access Release Channels

    Meanwhile, I hope someone with an earlier version of Chrome can help you out with your issue.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Location
    Canada, Alberta
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool, thanks paul. I guess I'll just wait it out until chrome 10 comes out.


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
  •