SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slider not starting automatically

    If you have a look here: http://kmkwebdesign.ca/clients/dejavu/ you will see that the home page slider does NOT start automatically. However, if you click on the 3rd "dot" to go to the 3rd slider, you will see that it will automatically go back to the first slide. I want the slider to auto start right away, but I can't figure out how to do it. Any help would be appreciated.
    Code:
    /*
     * Superfish v1.4.1 - jQuery menu widget
     * Copyright (c) 2007 Joel Birch
     *
     * Dual licensed under the MIT and GPL licenses:
     * 	http://www.opensource.org/licenses/mit-license.php
     * 	http://www.gnu.org/licenses/gpl.html
     *
     * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
     */
    
    (function($){
    	$.superfish = {};
    	$.superfish.o = [];
    	$.superfish.op = {};
    	$.superfish.defaults = {
    		hoverClass	: 'sfHover',
    		pathClass	: 'overideThisToUse',
    		delay		: 100,
    		animation	: {opacity:'show'},
    		speed		: 1500,
    		oldJquery	: false, /* set to true if using jQuery version below 1.2 */
    		disableHI	: false, /* set to true to disable hoverIntent usage */
    		// callback functions:
    		onInit		: function(){},
    		onBeforeShow: function(){},
    		onShow		: function(){}, /* note this name changed ('onshow' to 'onShow') from version 1.4 onward */
    		onHide		: function(){}
    	};
    	$.fn.superfish = function(op){
    		var bcClass = 'sfbreadcrumb',
    			over = function(){
    				var $$ = $(this), menu = getMenu($$);
    				getOpts(menu,true);
    				clearTimeout(menu.sfTimer);
    				$$.showSuperfishUl().siblings().hideSuperfishUl();
    			},
    			out = function(){
    				var $$ = $(this), menu = getMenu($$);
    				var o = getOpts(menu,true);
    				clearTimeout(menu.sfTimer);
    				if ( !$$.is('.'+bcClass) ) {
    					menu.sfTimer=setTimeout(function(){
    						$$.hideSuperfishUl();
    						if (o.$path.length){over.call(o.$path);}
    					},o.delay);
    				}		
    			},
    			getMenu = function($el){ return $el.parents('ul.superfish:first')[0]; },
    			getOpts = function(el,menuFound){ el = menuFound ? el : getMenu(el); return $.superfish.op = $.superfish.o[el.serial]; },
    			hasUl = function(){ return $.superfish.op.oldJquery ? 'li[ul]' : 'li:has(ul)'; };
    
    		return this.each(function() {
    			var s = this.serial = $.superfish.o.length;
    			var o = $.extend({},$.superfish.defaults,op);
    			o.$path = $('li.'+o.pathClass,this).each(function(){
    				$(this).addClass(o.hoverClass+' '+bcClass)
    					.filter(hasUl()).removeClass(o.pathClass);
    			});
    			$.superfish.o[s] = $.superfish.op = o;
    			
    			$(hasUl(),this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out)
    			.not('.'+bcClass)
    				.hideSuperfishUl();
    			
    			var $a = $('a',this);
    			$a.each(function(i){
    				var $li = $a.eq(i).parents('li');
    				$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
    			});
    			
    			o.onInit.call(this);
    			
    		}).addClass('superfish');
    	};
    	
    	$.fn.extend({
    		hideSuperfishUl : function(){
    			var o = $.superfish.op,
    				$ul = $('li.'+o.hoverClass,this).add(this).removeClass(o.hoverClass)
    					.find('>ul').hide().css('visibility','hidden');
    			o.onHide.call($ul);
    			return this;
    		},
    		showSuperfishUl : function(){
    			var o = $.superfish.op,
    				$ul = this.addClass(o.hoverClass)
    					.find('>ul:hidden').css('visibility','visible');
    			o.onBeforeShow.call($ul);
    			$ul.animate(o.animation,o.speed,function(){ o.onShow.call(this); });
    			return this;
    		}
    	});
    	
    	$(window).unload(function(){
    		$('ul.superfish').each(function(){
    			$('li',this).unbind('mouseover','mouseout','mouseenter','mouseleave');
    		});
    	});
    	
    	$.fn.supposition = function(){
    		var $w = $(window), /* do this once instead of every onBeforeShow call*/
    			_offset = function(dir) {
    				return window[dir == 'y' ? 'pageYOffset' : 'pageXOffset']
    				|| document.documentElement && document.documentElement[dir=='y' ? 'scrollTop' : 'scrollLeft']
    			    || document.body[dir=='y' ? 'scrollTop' : 'scrollLeft'];
    			},
    			onInit = function(){
    				/* I haven't touched this bit - needs work as there are still z-index issues */
    				$topNav = $('li',this);
    				var cZ=parseInt($topNav.css('z-index')) + $topNav.length;
    				$topNav.each(function() {
    					$(this).css({zIndex:--cZ});
    				});
    			},
    			onHide = function(){
    				this.css({marginTop:'',marginLeft:''});
    			},
    			onBeforeShow = function(){
    				this.each(function(){
    					var $u = $(this);
    					$u.css('display','block');
    					var menuWidth = $u.width(),
    						parentWidth = $u.parents('ul').width(),
    						totalRight = $w.width() + _offset('x'),
    						menuRight = $u.offset().left + menuWidth;
    					if (menuRight > totalRight) {
    						$u.css('margin-left', '-152px');
    					}
    
    					var windowHeight = $w.height(),
    						offsetTop = $u.offset().top,
    						menuHeight = $u.height(),
    						baseline = windowHeight + _offset('y');
    					var expandUp = (offsetTop + menuHeight > baseline);
    					if (expandUp) {
    						$u.css('margin-top',baseline - (menuHeight + offsetTop));
    					}
    					$u.css('display','none');
    				});
    			};
    		
    		return this.each(function() {
    			var o = $.superfish.o[this.serial]; /* get this menu's options */
    			
    			/* if callbacks already set, store them */
    			var _onInit = o.onInit,
    				_onBeforeShow = o.onBeforeShow,
    				_onHide = o.onHide;
    				
    			$.extend($.superfish.o[this.serial],{
    				onInit		: function() {
    					onInit.call(this); /* fire our Supposition callback */
    					_onInit.call(this); /* fire stored callbacks */
    				},
    				onBeforeShow: function() {
    					onBeforeShow.call(this); /* fire our Supposition callback */
    					_onBeforeShow.call(this); /* fire stored callbacks */
    				},
    				onHide		: function() {
    					onHide.call(this); /* fire our Supposition callback */
    					_onHide.call(this); /* fire stored callbacks */
    				}
    			});
    		});
    	};
    })(jQuery);
    Last edited by Pullo; Nov 29, 2013 at 00:44. Reason: Unlinked site

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The code you've posted isn't relevant to the slider. The relevant bits seem to be:

    Code:
    <script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/scripts/jquery.freshline.FramesBanner.min.js?ver=1.0.0'></script>
    
    <script type="text/javascript"> 
    jQuery(document).ready(function() { 
        jQuery.noConflict(); jQuery('#slider').frames_slider( { 
            width: 960, 
    	height: 340, 
    	theme: "custom", 
    	timer: 6000, 
    	hidetoolbar: 0 
        }) 
    }); 
    </script>
    But anyhow, it's odd that it doesn't slide, as that slider is supposed to do that. You aren't the only one to experience this problem:

    http://forums.modx.com/thread/80801/...ry-confliction

    All I can suggest is

    - that you create a test page and strip everything down to the bear minimum, and see if you can get it working on its own. Then gradually add things in to see if any other scripts on the page are getting in the way.
    - at the moment, you have the code I posted above in the reverse order, with the red bit below the blue bit, so try reversing the order.

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The code you've posted isn't relevant to the slider. The relevant bits seem to be:

    Code:
    <script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/scripts/jquery.freshline.FramesBanner.min.js?ver=1.0.0'></script>
    
    <script type="text/javascript"> 
    jQuery(document).ready(function() { 
        jQuery.noConflict(); jQuery('#slider').frames_slider( { 
            width: 960, 
    	height: 340, 
    	theme: "custom", 
    	timer: 6000, 
    	hidetoolbar: 0 
        }) 
    }); 
    </script>
    But anyhow, it's odd that it doesn't slide, as that slider is supposed to do that. You aren't the only one to experience this problem:

    http://forums.modx.com/thread/80801/...ry-confliction

    All I can suggest is

    - that you create a test page and strip everything down to the bear minimum, and see if you can get it working on its own. Then gradually add things in to see if any other scripts on the page are getting in the way.
    - at the moment, you have the code I posted above in the reverse order, with the red bit below the blue bit, so try reversing the order.
    Thanks for the reply. I stripped it all down, but it's still not working. I just find it weird that when you click on the 3rd slider, the auto scroll function starts working (for the 3rd slider only). I can't make any sense of it.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,000
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    The problem is that the version of jQuery you are using is not 100% compatible with the slider.

    In your code you have this on line 21:

    HTML Code:
    <script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
    Change this to:

    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    and the slider will work as expected.

    It might be the case that it works with higher versions of jQuery, but I stopped trying, just as soon as I got it working.

    On a side note, when Ralph suggested creating a test page and stripping everything down to the bare minimum, this is what I ended up with before I was able to find your problem:

    HTML Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
      <head>
        <title>Deja Vu Massage | </title>	
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/css/front-page.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/css/dark.css" type="text/css" media="screen" />
      </head>
    
      <body>
        <div id="slider" class="frames_slider shadow1">
          <ul>
            <li data-transition="fountain">
              <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/uploads/2012/12/sliderimg3.jpg" alt="a"/>
            </li>
            <li data-transition="fountain">
              <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/uploads/2013/01/imgslide2.jpg" alt="a"/>
            </li>
            <li data-transition="fountain">
              <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/uploads/2012/12/sliderimg4.jpg" alt="a"/>
            </li>
          </ul>
        </div><!-- slider end -->
        <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/images/image_shadow_960.png" alt="a"/>
        
        <script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
        <script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/scripts/jquery.freshline.FramesBanner.min.js?ver=1.0.0'></script>
        <script type="text/javascript"> 
          jQuery(document).ready(function() { 
            jQuery.noConflict(); 
    	jQuery('#slider').frames_slider( { 
              width: 960, 
              height: 340, 
              theme: "custom", 
              timer: 1000, 
              hidetoolbar: 0 
            }) 
          }); 
        </script>
      </body>
    </html>
    Had you done that in the first place, it would have made it a lot easier for anyone trying to help

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    The problem is that the version of jQuery you are using is not 100% compatible with the slider.

    In your code you have this on line 21:

    HTML Code:
    <script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
    Change this to:

    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    and the slider will work as expected.

    It might be the case that it works with higher versions of jQuery, but I stopped trying, just as soon as I got it working.

    On a side note, when Ralph suggested creating a test page and stripping everything down to the bare minimum, this is what I ended up with before I was able to find your problem:

    HTML Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
      <head>
        <title>Deja Vu Massage | </title>	
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/css/front-page.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/css/dark.css" type="text/css" media="screen" />
      </head>
    
      <body>
        <div id="slider" class="frames_slider shadow1">
          <ul>
            <li data-transition="fountain">
              <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/uploads/2012/12/sliderimg3.jpg" alt="a"/>
            </li>
            <li data-transition="fountain">
              <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/uploads/2013/01/imgslide2.jpg" alt="a"/>
            </li>
            <li data-transition="fountain">
              <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/uploads/2012/12/sliderimg4.jpg" alt="a"/>
            </li>
          </ul>
        </div><!-- slider end -->
        <img src="http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/images/image_shadow_960.png" alt="a"/>
        
        <script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
        <script type='text/javascript' src='http://kmkwebdesign.ca/clients/dejavu/wp-content/themes/Dejavu/scripts/jquery.freshline.FramesBanner.min.js?ver=1.0.0'></script>
        <script type="text/javascript"> 
          jQuery(document).ready(function() { 
            jQuery.noConflict(); 
    	jQuery('#slider').frames_slider( { 
              width: 960, 
              height: 340, 
              theme: "custom", 
              timer: 1000, 
              hidetoolbar: 0 
            }) 
          }); 
        </script>
      </body>
    </html>
    Had you done that in the first place, it would have made it a lot easier for anyone trying to help
    Thank you kindly for your reply and your solution. Problem solved!

    I see what you mean regarding the "test page" and stripping it down. I will remember that for next time.

    Thanks again to you both


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
  •