0

can't find a question that addresses this exactly so here goes. I am trying to use jquery to animate a div between 2 heights that are both unknown until the page is loaded. The heights will be based on the length of a string length being fed into the div. On hover, an expanded version of the first string will be fed in, and as this happens, I want the div to expand to accommodate. When the user is no longer hovering over the div, it should recoil to its original state. Here, I think I've got the original height part down, but is there a way to get the unknown height of what the div would look like on the hover? I've heard the DOM stores the max height of a div which you can access with scrollheight, but I've played around with that and it doesn't seem to work. Here's the code:

  var originalHeight = $("#0").outerHeight(true);
  var newHeight = ??? // tried this: $("#0")[0].scrollHeight;
  $("#0").hover(function(text) {
    if (excerptsShort[0].length >= 200) {
      $(this).animate(text.type === "mouseenter"
        ? { height: newHeight }
        : { height: originalHeight });  
      $(this).html(text.type === "mouseenter"
        ? excerptsLong[0] + "..." 
        : excerptsShort[0] + "..."
    )}
  });
no_stack_dub_sack
  • 452
  • 3
  • 12
  • `#0` --- Valid CSS dictates that IDs should start with an alpha character. (That is a zero, right?) See here: http://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number – Scott Jul 14 '16 at 00:43
  • good to know, i forgot about that convention, I'm still a bit new to this (very new to this), however it does seem to work. – no_stack_dub_sack Jul 14 '16 at 01:20
  • @Scott - I fixed it in my project for good measure but that didn't seem to have anything to do with the problem. Any insight on this would be appreciated. – no_stack_dub_sack Jul 14 '16 at 04:10

0 Answers0