SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    animate dynamic div height?

    For the menu page of a restaurant website I need an animate function that will adjust the height from a div (in animation) depending on the content (dynamic from database). I use the following function to switch between content:
    Code:
     $(".menu").on("click", "a", function(e) {
       e.preventDefault();
      $(".content").load(this.href); 	
    });
    and for the links
    Code:
    <ul>
        <li><a href="modules/site/menu.php?category_id=1&amp;group_id=1">Soup</a></li>
        <li><a href="modules/site/menu.php?category_id=1&amp;group_id=2">Soup</a></li>
    </ul>
    .
    After some googling I found a few solutions but non of them is working. This is the last thing I tried:
    Code:
    I changed:
    
    $(".kaart").load(this.href); 
    
    into
    
    $(".kaart").load(this.href, function(res){
        function setContainerHeight() {
            newHeight = $('.content').height();
            $(".content").animate({
                height: newHeight
            }, 500  );
        }			
    });
    ut that isn't doing the trick. I don't get an error but div content won't animate, it simply just snaps to the new size . How should I adjust the function so the animate function will work.?

    Thank you in advance!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    How about something like this.

    Code:
    <div class="wrap">
    		<ul class="menu">
    				<li><a href="content1.htm">Load content 1</a></li>
    				<li><a href="content2.htm">Load content 2</a></li>
    				<li><a href="content3.htm">Load content 3</a></li>
    				<li><a href="content4.htm">Load content 4</a></li>
    		</ul>
    		<div class="content">
    				<div class="inner"></div>
    		</div>
    </div>
    Code:
    $(".menu").on("click", "a", function (e) {
        var $targetDiv = $('.content');
        var $targetDiv2 = $('.inner');
        $targetDiv.css('height', $targetDiv.height())
        $targetDiv2.load(this.href, function () {
            var newheight = $targetDiv2.height();
            $targetDiv.animate({
                height: newheight
            }, 500, "linear", function () {
                $targetDiv.css({
                    height: 'auto'
                });
            });
        });
        e.preventDefault();
    });
    It could probably do with tidying up as its a little jumpy.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. This is indeed where I'm after. Only the animation is not running not very smooth. I tried it with adjusting the ms but without the desired result as you can see here! What should I adjust to make the animation run more smooth
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Remove the CSS animation form content and menubar as they are fighting with the js and then set .inner to be width:100% and float:left and see if that makes it smoother.

    demo here.

    (I added a fade to it also in the js.)

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. That works like a charm Thank you so much
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


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
  •