0

I've done plenty of searching and found many different solutions to this but I'm unsure as what to actually implement.

I have three buttons. Each button uses loadXMLDoc to dynamically load new content into a div.

I would like the div to smoothly expand or contract in height as the new content is loaded.

I haven't set a height to the div so obviously, it resizes anyway, but I thought a nice transition would improve the experience.

I found a jquery plugin that crops up a few times on here:

animating height on jquery load

However I'm new to using jquery plugins and have no idea how to implement it.

Also, if I'm correct, it would mean binning the LoadXMLDoc AJAX function and using the jquery get method instead.

So my question is, is this the best method to use, or is there something elegantly simpler?

If this is the best method to use, how do I implement it?

I also found this, which sort of does what I want but obviously I need a way to pass it the dynamic content.

$('#action').click(function(){

    var $mydiv = $('#mydiv');
    $mydiv.css('height', $mydiv.height() );
    $mydiv.html( newcontent );
    $mydiv.wrapInner('<div/>');
    var newheight = $('div:first',$mydiv).height();
    $mydiv.animate( {height: newheight} );
  });

Here is the site I'm currently working on for reference if you'd like to see exactly what I'm speaking of. I'm new to to a lot of javascript, jquery etc. I'm used to only working with HTML and CSS but I'm trying to increase my knowledge of different libraries and languages and find out how things actually work rather than trying to hack things apart until I stumble upon something that works!

Thanks for bearing with me and for any help as always. As I've said before, a fool who asks no questions... =D

Community
  • 1
  • 1
Lee
  • 137
  • 11
  • Why not just with CSS transition? Or, maybe you want some effect too? – Yuri Mar 10 '15 at 10:46
  • A fiddle with your code would help us help you :) – lshettyl Mar 10 '15 at 10:53
  • @ LShetty I've made a fiddle here, but obviously the AJAX won't work. http://jsfiddle.net/nok7kg1m/ – Lee Mar 10 '15 at 14:15
  • @ Yuri, how would the transition happen automatically though? Would'nt I have to have it happen on click or mouseover using CSS? – Lee Mar 10 '15 at 14:16
  • Nobody? I tried using the CSS Max-height trick and added a line to the AJAX function to set the max-height when a button is clicked (since div:hover is useless to me, I need to change the div max-height when the button is clicked not when I hover over the div) anyway, it works once and then that's it. No transition after that. – Lee Mar 11 '15 at 09:53

0 Answers0