Javascript behaving differently on Mac and PC? I know it shouldn't...

Question

I've created a pagination script that takes a long block of text and breaks it into pages. First the text is loaded into a div with the id #page. Then the script measures the height of #page and calculates how many pages it should be broken into to fit into the div with class .detailsholder.

The div .detailsholder is cleared out, and the appropriate number of page divs are added inside. (Each one actually has the entire text of #page inside, but the top margin is set neagtively, the height is fixed, and overflow is set to hidden, so only the proper amount appears.)

And it works great, except for this: while Safari and Firefox on the Mac work perfectly, IE and Firefox on Windows add an extra page. Because of the way the pages are created, as described above in parentheses, the last page appears blank -- the text is shifted too far up to appear in the page "window".

Here's the code. I'm using jQuery, as you can see.

var descHeight = $('#page').outerHeight();
if (descHeight > 250 ) {
   var numberOfPages = Math.round(descHeight/210)+1; //Figure out how many pages
   var artistText = $('#page').html();               //Grab the text into a variable
   $('.detailsholder').empty();                      //Empty the container so we can fill
                                                     //it with pages
   for (i=0;i<=numberOfPages-1;i++) {                //Each page has the entire text
                                                     //content, but is shifted up and
      var shiftUp = 0-(210 * i);                     //cut off at the bottom.
      $('.detailsholder').append('<div id="page' + (i+1) + '" class="page" style="height:225px;"><div style="border:dotted 1px red;margin-top:' + shiftUp + 'px"' + artistText + '</div>');
}

}

Thanks!

Answer 1

Have you tried it across similar platformed computers with different resolution/font settings?

I think this problem might have more to do with display settings and the CSS part of your Javascript then platform differences. My CSS isn't great, but you may want to avoid px and try to use a % instead.

The following might help with your diagnostics:

• http://browsersize.com/
• Firebug (for Firefox)
• Developer Toolbar (for IE)
• Web Inspector (for Safari, haven't personally tried this one)

Answer 2

Add some alerts to see how the calculations are coming out. If you get different results in different browsers then you will have to make adjustments to handle the differences

Answer 3

In the last line of the script, the second opening div tag: it seems it is not closed. Maybe this causes problems?

Answer 4

I see one problem in the algorithm. Math.round should be Math.floor in order to give the correct number of pages. In order to see why, assume that descHeight is 400. Then you would need only 2 pages of height 210 each, but Math.round(400/210) + 1 == 3. Could it be that a combination of this problem together with different standard font size between platforms (which will probably affect descHeight and trigger the problem) are the reason for the behavior you observe?