Accessing javascript for formatting subsequent html pages. Please help!!

Accessing javascript for formatting subsequent html pages. Please help!!

I am trying to put together a jquery mobile site for doctors to practise their Dermoscopy skills on an iPad or tablet. As there will be 81 cases in total (with photos), I'm trying to organise it as 9 html pages with 9 cases on each.

I want to resize the list elements with javascript so they fit nicely on to the screen.

The first page works ok. The problem is, the javascipt variables for resizing the elements don't seem to be available when the second html page loads  - i.e. when the user clicks on "Set 2", the list elements display with the default height. (They resize properly if you refresh the page).

You can see the work in progress here: http://dermy.org/virtderm/2013-06-25/

I have tried document.ready and window.load to try and resize the elements - but jquery mobile is clearly doing something quite different. (I know the second page still has access to the internal links in the original document, so it probably isn't even being seen as a new page).

I only have a fairly basic knowledge of web programming, so I can't really tell what is going on.

Is there any way to do what I want, without trying to put all 81 cases in one page??

Many thanks!!!!!