Okay, I realize this is less of a Tableau issue and more of Reveal.Js/CSS issue, but I could really use some help. If there are any freelancers out there, I'm even willing to provide a couple bucks (does $25 sound reasonable?) because I'm really lost on this one. I've been playing with this for hours and I haven't came up with any real solutions.
I really don't like the way Tableau Public does tabs, so my idea was to use Reveal.Js to create a presentation where individuals could walk through each visualization like it was its own slide. There would also be some introductory slides to provide some background info and whatnot. Basically, when I embed Tableau Public's object code into the webpage, it ends up having scrollbars - no matter what size workbook or no matter how I play with the object and div class sizes that Tableau provides when you upload the presentation to the server.
The embedded object is a Tableau Public workbook. You can check it out here: http://public.tableausoftware.com/views/BudgetBookcampFY14/AdHocDrilldown?:embed=y&:display_count=no
The actual workbook (or dashboard) is sized to width:900 and height: 550. But neither one of those really seem to matter for the purposes of what I'm doing. To embed the object, I use the following code:
<div class="tableauPlaceholder" style="width:904px; height:619px;"><noscript>
<a href="#"><img alt="Ad Hoc Drilldown " src="http://public.tableausoftware.com/static/images/Bu/BudgetBookcampFY14/AdHocDrilldown/1_rss.png" style="border: none" />
<object class="tableauViz" width="904" height="619" style="display:none;">
<param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F" /><param name="site_root" value="" /><param name="name" value="BudgetBookcampFY14/AdHocDrilldown" />
<param name="tabs" value="no" /><param name="toolbar" value="yes" />
<param name="static_image" value="http://public.tableausoftware.com/static/images/Bu/BudgetBookcampFY14/AdHocDrilldown/1.png" /><param name="animate_transition" value="yes" />
<param name="display_static_image" value="yes" />
<param name="display_spinner" value="yes" />
<param name="display_overlay" value="yes" /><param name="display_count" value="no" /></object>
Now, the object embeds fine without scroll bars in IE9, Opera, or Google when now using you comment out the div class reveal. Example: http://houstonrestaurantinspections.com/budgetbootcamp/minitest.html#/Full-Budget (about 3/4th down the page). That how I want it to render in the presentation: no scrollbars on the embedded object.
But, them moment you uncomment the div class and put it back into presentation mode, scrollbars appear around the object: http://houstonrestaurantinspections.com/budgetbootcamp/test.html#/Ad-Hoc
I've tried changing the object size information, the div class style, the workbook size in tableau, and I've even fiddled a bit with the reveal.js and reveal.min.css, but to no avail. I'm not the best when it comes to sizing all all of the nuisances on CSS (I'm rather a novice on that front, actually), so I could really use some advice here on how to advance this forward. I can chat here, by phone, by e-mail, or even IRC if anyone is willing to devote some time to it with me or provide me some guidance. I suspect it has to do with the way reveal pads an object or a div class or something along those lines, but I'm not really sure.
I've also posted this up on StackOverflow: http://stackoverflow.com/questions/17124449/reveal-js-causes-scroll-bars-on-embedded-object
And, I'm also up to new approaches if Reveal.Js isn't the right way to go.