SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  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());
               }
           });
    }):

  7. #7
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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());

  8. #8
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I managed to get it to work.. the acnchor bit was not "jqueryified"

    This was my final working code..

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

    Thanks for your help on this

  9. #9
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice catch on the $(anchor)! If you want a little smoother resize, this could be useful:

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

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

    Your blowing my mind!



    I'm just getting to grips with the basics of Jquery.. its very addictive..

    thanks for your help!

    It's much appreciated..


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
  •