SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    #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.s88...dent-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)

  2. #2
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like LocalScroll allows you to add hook functions during initialization to the following events:

    Code:
    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.

  3. #3
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've grabbed the Value of the inner Div, how do I attach it to the before event?

    I set a variable called height

    Code JavaScript:
    $(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){\n

    ?

  4. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I'm a little swamped at my job at the moment. Try this:

    Code JavaScript:
    $('.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/

  5. #5
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help,

    But I'm still getting

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

    My code is now:

    Code JavaScript:
     
    $(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
         }
     
     
     
    		 });
     
    		 }):

  6. #6
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry - I forgot to put a comma after 'target: #page'

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


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
  •