#page div not expanding to fit content using jquery local scroll

Hi, I’m using the localscroll jquery plugin to scroll through content in a div by using an unorder list navigation. I have the containing div (#page) set at a certain height and the overflow set to hidden… the problem I’m having is I want the #page div to be elastic so that it grows and shrinks to fit the child div it scrolls to…

you can view the scroll plugin in use here:

http://icomprintmanagement.co.uk.s88828.gridserver.com/healthcare/accident-emergency

its activated using the product list nav toward the bottom of the page on the left.

How would I set it up so that the #page div shrinks or grows to contain the full visable size of the child div (.scroll1, .scroll2, .scroll3, scroll4 etc)

Nice catch on the $(anchor)! If you want a little smoother resize, this could be useful:


$(document).ready(function(){     
    $('.longcolleft li').localScroll({
           target:'#page',
           onBefore:function(e, anchor, $target){
               $target.animate({
                         height: $(anchor).height()
                         }, 300 ); //300ms transition
           }
       });
});

I managed to get it to work… the acnchor bit was not “jqueryified”

This was my final working code…

$(document).ready(function(){     
    $('.longcolleft li').localScroll({
           target:'#page',
           onBefore:function(e, anchor, $target){
               $target.height($(anchor).height());
           }
       });
});
		

Thanks for your help on this

Hi,

I’m getting an issue with the anchor bit now…

firebug is saying:

anchor.height is not a function
[Break on this error] $target.height(anchor.height());

Sorry - I forgot to put a comma after ‘target: #page


$(document).ready(function(){      
    $('.longcolleft li').localScroll({
           target:'#page',
           onBefore:function( e, anchor, $target ){
               $target.height(anchor.height());
           }
       });
}):

I’ve grabbed the Value of the inner Div, how do I attach it to the before event?

I set a variable called height

$(document).ready(function(){

		var height = $('#scroll1, #scroll2, #scroll3, #scroll4, #scroll5, #scroll6, #scroll7').css('height');
		console.log(height);
		
			$('.longcolleft li').localScroll({
			
			   target:'#page'
			   onBefore:function($target){
					$('#page').css('height', height);
				
				});
							   
			});

		 });

Firebug is saying “missing } after property list”

onBefore:function($target){\

?

Sorry, I’m a little swamped at my job at the moment. Try this:


$('.longcolleft li').localScroll({
       target:'#page'
       onBefore:function( e, anchor, $target ){
          //Get height of anchor element, which is the element to be scrolled to.
          //Set height of $target (#page) to the height of the anchor

          $target.height(anchor.height()); //not tested, but should work - assumes px
     }

element.height() - returns the height of the element, px
element.height(value) - sets the height of the element to value, px if no unit specified.

more info here: http://api.jquery.com/height/

Stop it!

Your blowing my mind!

:slight_smile:

I’m just getting to grips with the basics of Jquery… its very addictive…

thanks for your help!

It’s much appreciated…

It looks like LocalScroll allows you to add hook functions during initialization to the following events:


onBefore:function( e, anchor, $target ){
	// The 'this' is the settings object, can be modified
},
onAfter:function( anchor, settings ){
	// The 'this' contains the scrolled element
}

I would most likely add logic to the onBefore event to handle the resize. Get the height of the $target and set the height of #page accordingly. Remember to account for padding.

Thanks for your help,

But I’m still getting

missing } after property list
[Break on this error] onBefore:function( e, anchor, $target ){\

My code is now:



$(document).ready(function(){

				
	$('.longcolleft li').localScroll({
       target:'#page'
       onBefore:function( e, anchor, $target ){
          //Get height of anchor element, which is the element to be scrolled to.
          //Set height of $target (#page) to the height of the anchor
 
          $target.height(anchor.height()); //not tested, but should work - assumes px
     }
							   
		 		
		 
		 });
		 
		 }):