2

Before I begin, I have looked through the other questions relating to this topic on SO. The reason I'm writing another question is because my site will load using jQuery animations and it just doesn't seem to work the same as if I was just animating the height automatically.

I personally think it's something to do with me having the CSS height set to auto in the css. Anyway, I would like the website (when it loads) to animate to height auto, rather than a set height at the moment. I have tried getting the scrollHeight and animating it to that value, but there is no animation for 3-4 answers I tried.

Currently i'm using:

$(".portfolio").animate({height:"590px"});

and my .portfolio css is

.portfolio {
  width: 0px;
  height: 0px;
  max-height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

It may be found of interest that the height of the .portfolio IS 0 until I animate the .row (inside of .portfolio) because the .row has display set to none.

In basic terms I need to get the auto height of an element (.portfolio) even though there is no visible content (making the auto on page load) set to 0 because of the hidden element.

OPACITY INSTEAD OF DISPLAY: NONE WILL NOT FIX THIS. I NEED THE HEIGHT OF .PORTFOLIO TO BE 0 ON PAGE LOAD.

If I can post anything else to make it easier, please let me know

I tried the answers relating to question: JavaScript jQuery Animate to Auto Height

You can view the site at: http://conorreid.me/portfolio/ I really hope it's okay to post the site link. I felt this question was hard to explain why I needed this, hopefully you'll see.

EDIT:
I duplicated the .portfolio element and renamed it portfolio-2, I set it to absolute and z-index: -100, and opacity to 0 (with height of auto). I then tried getting the height of this element (558 on my monitor) and setting .portfolio to this height

var el = $('.portfolio-2'),
                curHeight = el.height(),
                autoHeight = el.css('height', 'auto').height();
            $(".portfolio").height(curHeight).animate({height: autoHeight}, 1000);

But now i'm just unsure why this isnt working... I'm actually using

<script>alert($(".portfolio-2").css("height"))</script>

to alert to me the height, and i'm getting 264 on my monitor resolution, however after the page has completely loaded and I type $(".portfolio-2").height() I get 592 like I should do..

Community
  • 1
  • 1
ConorReidd
  • 276
  • 5
  • 25
  • You cannot animate to "auto". But you can use `max-height: 0;` and then animate to `max-height: 100000px;`. Of course this requires `overflow: hidden;`. – connexo Apr 30 '16 at 16:52
  • @connexo I can get the height of the element and animate to that height and then change the CSS to auto. http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height. My problem is not being able to get the "auto" height to animate to because there isn't one because of animations – ConorReidd Apr 30 '16 at 16:54
  • I was suggesting a solution where no Javascript is required. Have you tried it? – connexo Apr 30 '16 at 16:54
  • I haven't, but since everything is built on delays and I'm not too good with CSS transitions – ConorReidd Apr 30 '16 at 17:05
  • You can't start with an element without height, and then expect jQuery to figure out what `auto` would be. You would have to actually render the elements in `auto` and then get something like `clientHeight` to know exactly how many pixels `auto` really is. – adeneo Apr 30 '16 at 17:10
  • @adeneo I duplicated the element and then hid with opacity, now i have .portfolio and .portfolio-2 (portfolio-2 being the rendered version of .portfolio) and am trying to get the height from that but now that is giving me a "wrong" answer – ConorReidd Apr 30 '16 at 17:15
  • And what's wrong with it ? – adeneo Apr 30 '16 at 17:22
  • It's telling me the height is like 288px although when I inspect element on it, it's around 588, even when I just have the .portfolio element and hide it then try to change all of it back before the animation begins, the height I get is like 342... – ConorReidd Apr 30 '16 at 17:26

1 Answers1

0

After over an hour trying to find a fix here it is:

  • I duplicated the .portfolio and everything inside it, I set it's opacity to 0 and z-index to -1000 so no elements in side where hoverable/selectable which would trigger a jQuery hover effect.

Finally to fix me getting a horrible height mistake (as the images hadn't rendered when I loaded the page, giving me a false answer of 40%~ correct value I changed

$(document).ready(

to

$(window).load(

Now It's responsive =D

ConorReidd
  • 276
  • 5
  • 25