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

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
});