Get div height without Jquery

Hi,

I was just wondering, is there a way to find the height of a div with angular / ionic?

Something equivalent to $(‘div’).height() in jquery.

I know how to find the height of the device, the window, etc, but can’t find a way to get the height of a div (based on its class or id).

Thanks in advance.

document.querySelector('#yourDiv').offsetHeight;

I tried already, but I get the error:

TypeError: Cannot read property 'offsetHeight' of null

Although my div does exist.

when are you trying to do it? you need to do it inside of directive inside of link function if you want to make sure that element is available.

I’m doing it right away without waiting anything… will a timeout do the trick?

I’m really not comfortable with directive unfortunately :confused:

You will have to use directives if you want to do it properly

Okay, I understand.

I want to get the height of two slides when I enter the view, and pass them to the controller.

Is that possible?

yes. if you can create simple plunkr with your example I can show you how.

Here is the codepen:

As you can see, the first slide is 200px high, the second is 1200.

Now I can’t slide from under the blue on the first slide.

And if I slide left and from the bottom from the second slide, I will end up super low on the first slide where there is no content.

What I need to solve this is to get the height of the two slides right away, and edit the css (height) of the on “slideHasChanged”.

Thanks for your help :smile:

I think what you should do is have both slides same height, BUT inside of second one create inner div with overflow scrolled area

I tried already, it really doesn’t work.

And it breaks a lot of css, doesn’t look like a slide anymore…

ok So this is how you get height with directive:

Now why do you need it in Controller? and are you sure that you need it there?

Thanks a lot!

But I already knew how to send it to the view, but I really need it in the controller.
Coz I need to set the height dynamically of ion-slide-box on slide change.

I also noticed something wrong with the directive… It gives me the height of the slide before data are loaded into it. :confused:
I need the height after the slide is filled with the data I fetch from firebase. That makes it all more complicated I guess… :frowning:

Hi Pierro,

You can really do it in simple HTML and CSS… Really.

Trust me : http://codepen.io/anon/pen/pjLGVr

Maybe I am wrong on your problem, but you only have to set your slide-box with a fixed height (like 100%) and you put scrollable div in it for your content, no matter the length of it… that’s it ! No javascript, no jquery.

Best

Hi Gensollen,

Thanks for taking the time once again.
I tried your method with inside , but then the whole scrolling doesn’t work anymore for reasons i don’t understand…

On IOS in ionic serve, the whole content is getting back to its initial position when I release the dragging down (scrolling down). I can scroll as long as I maintained the click down, but when I stop maintaing the scrolling, it bounces back to the top.

And then on android, I just can’t scroll at all with this… all of this is so weird. :confused:

I will look at it more tomorrow. :wink:

Thibaut