jquery 테마 스크립트 파일 내에서 HTML 문서에 div 세트 높이를 액세스하는 방법은 무엇입니까?

Question

저는 현재 인기있는 jquery 갤러리 스크립트 인 Galleria의 테마를 만들고 있습니다.

Here's a link 테마 만들기에 대한 문서를 참조하십시오.

내 테마는 기본 테마 인 "클래식"을 기반으로하며 여기에 내가해야 할 일이 있습니다.

갤러리아 스크립트는 "galleria"라는 div 내에서 이미지를 가져 와서 슬라이드 쇼를 만듭니다. 기본 요구 사항은 CSS에서이 div의 높이를 설정한다는 것입니다.

관련 CSS 파일에서이 값을 설정하는 대신 브라우저 창의 높이를 선택하는 HTML 문서 내에서 자바 스크립트를 사용하여 "galleria"div의 높이를 설정했습니다. 높이를 100 %로 설정하는 것 대신에이 작업을 수행 한 이유는 전체 here에서 볼 수 있지만 본질적으로이 div 아래의 콘텐츠가 필요하기 때문에 페이지가 완전히 스크롤 될 때 전체 화면 갤러리가 표시되기를 원합니다.

위의 내용은 훌륭하지만, 이제 Galleria 스크립트로 생성 된 다양한 요소의 위치를이 계산 된 높이에 따라 달라집니다.

내 theme.js에서 위에서 계산 한 "galleria"div의 높이를 가져 오는 방법은 무엇입니까? 그리고 어떻게 이것에 따라 Galleria DOM 구조 내의 다른 요소의 위치를 ​​설정합니까?

Answer 1

jQuery와 같은 라이브러리를 사용하면 매우 쉽게됩니다. (절대 위치를 가정)

val galleria_height = $("#galleria"); 

는 갤러리아 소자 내부의 요소를 위치 :

는 갤러리아 요소의 높이를 얻으려면

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