Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2011
    Location
    Madrid
    Posts
    20
    Thanks
    3
    Thanked 1 Time in 1 Post

    Question Autoscroll div using vertical menu

    Hello,

    I am using this script: http://valums.com/vertical-scrolling-menu/ to create a vertical menu and when I mouseover that area I can go down or up. Is perfect for what I want but i need also that this menu works with "auto-scroll". I mean that I want also the DIV to move automatically down and also with the actual effect. So if you dont touch the area is going down auto. and if you touch with the mouse that area works with the actual effect.

    The code is this:

    Code:
    /*<![CDATA[*/
    
    function makeScrollable(wrapper, scrollable){
    	// Get jQuery elements
    	var wrapper = $(wrapper), scrollable = $(scrollable);
    	
    	// Hide images until they are not loaded
    	scrollable.hide();
    	var loading = $('<div class="loading">Cargando...</div>').appendTo(wrapper);
    	
    	// Set function that will check if all images are loaded
    	var interval = setInterval(function(){
    		var images = scrollable.find('img');
    		var completed = 0;
    		
    		// Counts number of images that are succesfully loaded
    		images.each(function(){
    			if (this.complete) completed++;	
    		});
    		
    		if (completed == images.length){
    			clearInterval(interval);
    			// Timeout added to fix problem with Chrome
    			setTimeout(function(){
    				
    				loading.hide();
    				// Remove scrollbars	
    				wrapper.css({overflow: 'hidden'});						
    				
    				scrollable.slideDown('slow', function(){
    					enable();	
    				});					
    			}, 1000);	
    		}
    	}, 100);
    	
    	function enable(){
    		// height of area at the top at bottom, that don't respond to mousemove
    		var inactiveMargin = 99;					
    		// Cache for performance
    		var wrapperWidth = wrapper.width();
    		var wrapperHeight = wrapper.height();
    		// Using outer height to include padding too
    		var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
    		// Do not cache wrapperOffset, because it can change when user resizes window
    		// We could use onresize event, but it's just not worth doing that 
    		// var wrapperOffset = wrapper.offset();
    		
    		// Create a invisible tooltip
    		var tooltip = $('<div class="sc_menu_tooltip"></div>')
    			.css('opacity', 0)
    			.appendTo(wrapper);
    	
    		// Save menu titles
    		scrollable.find('a').each(function(){				
    			$(this).data('tooltipText', this.title);				
    		});
    		
    		// Remove default tooltip
    		scrollable.find('a').removeAttr('title');		
    		// Remove default tooltip in IE
    		scrollable.find('img').removeAttr('alt');	
    		
    		var lastTarget;
    		//When user move mouse over menu			
    		wrapper.mousemove(function(e){
    			// Save target
    			lastTarget = e.target;
    
    			var wrapperOffset = wrapper.offset();
    		
    			var tooltipLeft = e.pageX - wrapperOffset.left;
    			// Do not let tooltip to move out of menu.
    			// Because overflow is set to hidden, we will not be able too see it 
    			tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
    			
    			var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
    			// Move tooltip under the mouse when we are in the higher part of the menu
    			if (e.pageY - wrapperOffset.top < wrapperHeight/2){
    				tooltipTop += 80;
    			}				
    			tooltip.css({top: tooltipTop, left: tooltipLeft});				
    			
    			// Scroll menu
    			var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
    			if (top < 0){
    				top = 0;
    			}			
    			wrapper.scrollTop(top);
    		});
    		
    		// Setting interval helps solving perfomance problems in IE
    		var interval = setInterval(function(){
    			if (!lastTarget) return;	
    										
    			var currentText = tooltip.text();
    			
    			if (lastTarget.nodeName == 'IMG'){					
    				// We've attached data to a link, not image
    				var newText = $(lastTarget).parent().data('tooltipText');
    
    				// Show tooltip with the new text
    				if (currentText != newText) {
    					tooltip
    						.stop(true)
    						.css('opacity', 0)	
    						.text(newText)
    						.animate({opacity: 1}, 1000);
    				}					
    			}
    		}, 200);
    		
    		// Hide tooltip when leaving menu
    		wrapper.mouseleave(function(){
    			lastTarget = false;
    			tooltip.stop(true).css('opacity', 0).text('');
    		});			
    		
    		
    		//Usage of hover event resulted in performance problems
    		scrollable.find('a').hover(function(){
    			tooltip
    				.stop()
    				.css('opacity', 0)
    				.text($(this).data('tooltipText'))
    				.animate({opacity: 1}, 1000);
    	
    		}, function(){
    			tooltip
    				.stop()
    				.animate({opacity: 0}, 300);
    		});
    				
    	}
    }
    	
    $(function(){	
    	makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
    });
    /*]]>*/
    I have tried some other scripts in order tu add "auto-scroll" effect to this example but anything works.

    Anybody can help me?

    Thank you so much in advance

  • #2
    New Coder
    Join Date
    May 2011
    Location
    Madrid
    Posts
    20
    Thanks
    3
    Thanked 1 Time in 1 Post
    If helps somebody I have solved part of this problem adding this lines:

    Code:
    <script language="javascript">
    i = 0
    var speed = 1.1
    function scroll() {
    i = i + speed
    var div = document.getElementById("scrollable")
    div.scrollTop = i
    if (i > div.scrollHeight - 160) {i = 0}
    t1=setTimeout("scroll()",100)
    }
    </script>
    And in the body to stop on moseover:

    Code:
    <div class="sc_menu_wrapper" id="scrollable" style="overflow-x: hidden; overflow-y: hidden;" onmouseover="clearTimeout(t1)" onmouseout="scroll()">
    And works fine. The only problem now is that when I mouseout the content the scroll start from the beginning again. Is there any way to get it started/continue for the place where I was.

    Thaaank you!

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,202
    Thanks
    80
    Thanked 4,563 Times in 4,527 Posts
    I don't see any reason it would start at the top again.

    Can you show this on a live page? Give us a URL?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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