<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>geedew &#187; Scribd</title>
	<atom:link href="http://www.geedew.com/category/scribd/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.geedew.com</link>
	<description>flirting with the accessible web</description>
	<lastBuildDate>Wed, 13 Apr 2011 22:46:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Scribd and Slide mode : Why is my height wrong?</title>
		<link>http://www.geedew.com/2009/07/29/scribd-and-slide-mode-why-is-my-height-wrong/</link>
		<comments>http://www.geedew.com/2009/07/29/scribd-and-slide-mode-why-is-my-height-wrong/#comments</comments>
		<pubDate>Thu, 30 Jul 2009 05:06:02 +0000</pubDate>
		<dc:creator>drew</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Scribd]]></category>
		<category><![CDATA[BugFix]]></category>

		<guid isPermaLink="false">http://www.geedew.com/?p=106</guid>
		<description><![CDATA[While recently using Scribd&#8216;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 (&#8230;)</p><p><a href="http://www.geedew.com/2009/07/29/scribd-and-slide-mode-why-is-my-height-wrong/">Read the rest of this entry &#187;</a></p>]]></description>
			<content:encoded><![CDATA[<p>While recently using <a href="http://www.scribd.com/about">Scribd</a>&#8216;s services, I came across a very nasty bug, and a nice clean fix.  <a href="http://www.scribd.com/about">Scribd</a> allows developers to tap into a great, but somewhat basic <a href="http://www.scribd.com/developers/api?method_name=Javascript+API">API</a>.  One of these settings allows a developer to set a default &#8216;mode&#8217; before the <a href="http://www.scribd.com/developers/api?method_name=Javascript+API">API</a> then builds the flash calls necessary to display the document.  The issue comes up when you choose the &#8216;slide&#8217; mode as the loading view.  No matter what &#8216;height&#8217; you set, with &#8216;auto_size&#8217; set to false, the height will adjust to the wrong height.</p>
<p><span id="more-106"></span></p>
<p class="entry-text">
You can jump to the code <a href="#finishedCode">here</a>, or continue.</p>
<p class="entry-text">
I started by writing some simple code that follows the API.
</p>
<pre class="brush: jscript; title: ; notranslate">
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' );
</pre>
<p class="entry-text">Where &#8216;flash_catalog&#8217; is the container div of the <a href="http://www.scribd.com/about">Scribd</a> PDF.</p>
<p class="entry-text">
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.</p>
<pre class="brush: jscript; title: ; notranslate">
var oniPaperReady = function(e){
 $(&quot;#flash_catalog embed&quot;)
.attr(&quot;wmode&quot;,&quot;transparent&quot;)
.hide()
.css({&quot;height&quot;:&quot;800px&quot;, &quot;width&quot;:&quot;600px&quot;})
.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' );
</pre>
<p class="entry-text">So now I am dropping in a listener in the API to wait for the document to load.  I then hide the &#8216;embed&#8217; flash information, then add the height and width, then re-show the flash element.<?p></p>
<p class="entry-text">
You may notice, I&#8217;m using <a href="http://jquery.com/">jQuery</a>, 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).</p>
<p class="entry-text">
An astute reader would also notice one thing, I&#8217;m not adjusting for an &#8216;object&#8217; tag, only the &#8216;embed&#8217; tag (the difference for flash between different browsers).  I figured out this novice mistake while testing in Internet Explorer.  Here&#8217;s the finished code, that works, removing the nasty height issue.</p>
<div id="finishedCode">
<pre class="brush: jscript; title: ; notranslate">
var scribd_doc = scribd.Document.getDoc( #######, 'key-*******************' );

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

$(&quot;#flash_catalog object&quot;)
.attr(&quot;wmode&quot;,&quot;transparent&quot;)
.hide()
.css({&quot;height&quot;:&quot;800px&quot;, &quot;width&quot;:&quot;600px&quot;})
.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' );
</pre>
</div>
<p class="entry-text">The final word; I&#8217;m adding the transparent mode so that I can then have a menu that drops on top of the flash.  This works very well!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.geedew.com/2009/07/29/scribd-and-slide-mode-why-is-my-height-wrong/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

