Scribd and Slide mode : Why is my height wrong?

While recently using Scribd‘s services, I came across a very nasty bug, and a nice clean fix. Scribd allows developers to tap into a great, but somewhat basic API. One of these settings allows a developer to set a default ‘mode’ before the API then builds the flash calls necessary to display the document. The issue comes up when you choose the ‘slide’ mode as the loading view. No matter what ‘height’ you set, with ‘auto_size’ set to false, the height will adjust to the wrong height.


You can jump to the code here, or continue.

I started by writing some simple code that follows the API.

1
2
3
4
5
6
scribd_doc.addParam( 'mode', 'slide' );
scribd_doc.addParam( 'height', 800 );
scribd_doc.addParam( 'width', 600 );
scribd_doc.addParam( 'jsapi_version', 1 );
scribd_doc.addParam( 'auto_size', false );
scribd_doc.write( 'flash_catalog' );

Where ‘flash_catalog’ is the container div of the Scribd PDF.

This however led me to have a height that follows the default rules (width multiplier of 85/110) where the height matches how much space is in the window. So I progressed further with this code.

1
2
3
4
5
6
7
8
9
10
11
12
13
var oniPaperReady = function(e){
 $('#flash_catalog embed')
.attr('wmode','transparent')
.hide()
.css({'height':'800px', 'width':'600px'})
.show();
}

scribd_doc.addEventListener( 'iPaperReady', oniPaperReady );
scribd_doc.addParam( 'mode', 'slide' );
scribd_doc.addParam( 'jsapi_version', 1 );
scribd_doc.addParam( 'auto_size', false );
scribd_doc.write( 'flash_catalog' );

So now I am dropping in a listener in the API to wait for the document to load. I then hide the ‘embed’ flash information, then add the height and width, then re-show the flash element.<?p>


You may notice, I’m using jQuery, in which you can do the same thing with regular JavaScript, although quite a bit more complicated (ask if you really really need that code).

An astute reader would also notice one thing, I’m not adjusting for an ‘object’ tag, only the ‘embed’ tag (the difference for flash between different browsers). I figured out this novice mistake while testing in Internet Explorer. Here’s the finished code, that works, removing the nasty height issue.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var scribd_doc = scribd.Document.getDoc( #######, 'key-*******************' );

var oniPaperReady = function(e){
$('#flash_catalog embed')
.attr('wmode','transparent')
.hide()
.css({'height':'800px', 'width':'600px'})
.show();

$('#flash_catalog object')
.attr('wmode','transparent')
.hide()
.css({'height':'800px', 'width':'600px'})
.show();
}

scribd_doc.addEventListener( 'iPaperReady', oniPaperReady );
scribd_doc.addParam( 'mode', 'slide' );
scribd_doc.addParam( 'jsapi_version', 1 );
scribd_doc.addParam( 'auto_size', false );
scribd_doc.write( 'flash_catalog' );


The final word; I’m adding the transparent mode so that I can then have a menu that drops on top of the flash. This works very well!