Javascript/Jquery accessing element attributes in an iframe from within the child document

Question

I am trying to create a web app that displays chord charts for a number of songs. Each within it's own iframe on separate tabs. I'm using a jquery library. Each chart uses ajax to interrogate a DB to get the data to display content. It calculates metrics such as header height, footer height, page height and width to for pagination. The javascript is running from within the iframe not from the parent.

The chord chart pages behave themselves when I load a page as a normal web page. But as soon as I open the page within an iframe, the page doesn't display correctly because I can't calculate the metrics on the page. It seems that some attributes are undefined.

I'm using the following code to get a "page" element (as an example) on the chart from within the iframe.

var x = window.parent.document.getElementById("iframe2");
if (x)  {var s = $(x).contents().find('#page'+ pagecounter) ;}
if (s) alert ($(s).attr("id"));

"s" is correctly identified and it's id is correctly displayed. So I know that the right element is selected.

However, (as a few examples),

$(s).offset().top = 0 //when it should be 5
$(s).offset().left= 0 // should not be
$(s).css('padding-top') //is undefined.

These are right when a web page is loaded outside of the iframe. Tried everything I've found relating to the issue but no solution works.

Appreciate some help.

Answer 1

I was loading everything into jquery ui tab which turns out to be a hidden div until you click on the tab. So it was being created but not displayed so the metrics couldn't be determined