How to access height of div set in HTML document from within jquery theme script file? - galleria

Question

I'm currently creating a theme for the popular jquery gallery script, Galleria.
Here's a link to the documentation on creating a theme.
My theme is based on the default theme, "Classic", and here's what I need to do.
The Galleria script takes images within a div called "galleria" and makes a slideshow out of them. A basic requirement is that you set the height of this div in CSS.
Rather than setting this in an associated CSS file, I have set the height of the "galleria" div using Javascript within the HTML doc that picks up the browser window's height. The reason I did this (instead of merely setting height as 100%) can be seen in full here, but essentially it's because I need content below this div, but still want the page to show a fullscreen gallery when scrolled all the way up.
The above is great, but now I need to set the position of various elements created by the Galleria script, as a value that depends on this calculated height.
In my theme.js, how do I fetch the height of the "galleria" div as calculated above? And how do I then set the position of another element within the Galleria DOM structure depending on this?

Answer 1

Using a library like jQuery this becomes pretty easy.
To get the height of the galleria element:
val galleria_height = $("#galleria");
To position an element inside the galleria element (assuming absolute positioning):
val galleria_offset = $("#galleria").offset()
val relativeTop = 10;
val relativeLeft = 10;
// Position the element at (10, 10) relative to galleria
$("#some_element").offset({
top: galleria_offset.top + relativeTop,
left: galleria_offset.left + relativeLeft
});