markdalgleish/fathom

Fathom.js - Present JavaScript in its native environment.

PLEASE NOTE: This project is no longer maintained. Instead, you should check out Bespoke.js.

Fathom.js

Present JavaScript in its native environment.

If you're making a presentation on JavaScript, make it in JavaScript.

Usage

Example HTML:

<div id="presentation">

  <div class="slide">
    <h1>My Presentation</h1>
  </div>
  
  <div class="slide">
    <h2>My Dot Points</h2>
    <ul>
      <li>First dot point</li>
      <li>Second dot point</li>
      <li>Third dot point</li>
    </ul>
  </div>
  
</div>

---

jQuery Plugin Setup:

$('#presentation').fathom();

Advanced Setup:

var fathom = new Fathom('#presentation');

---

Full guide available at the official Fathom.js project page.

I've included a sample CSS file in the repo to get you started.

---

Please note that Fathom.js is not trying to recreate Powerpoint or Keynote. While they're good tools, I personally find that style of interface to be inappropriate on the web. If you're wondering why feature x from Powerpoint is missing, this is probably why.

How to Build

The code is minified using UglifyJS using the following command:

uglifyjs -o fathom.min.js fathom.js

Contributing to Fathom.js

If you want to contribute in a way that changes the API, please file an issue before submitting a pull request so we can dicuss how to appropriately integrate your ideas.

Questions?

Contact me on GitHub or Twitter: @markdalgleish

fathom's Issues

some simple examples please

I've got 4 hours until my presentation, and I need something with js syntax highlighting!

I adapted http://markdalgleish.com/presentations/jquerymobile/

but a really simple starter would help!

Half of slides are not accessible in Opera

You can see an example here: http://anton.kovalyov.net/slides/gothamjs/. It works in Chrome, Firefox and IE9 but in Opera I can see some slides on the bottom and when you get to them, it just rewinds itself to the first slide.

Demo uses older fathom.JS

The demo seems to use an older version of Fathom.js which has some noticeable differences - the body/html width setting + Opera fix, and $().Fathom instead of $().fathom

I was a bad person and downloaded the demo instead of the code from Github, so I ended up with the old Fathom. Can you update your demo to use the latest stuff, or maybe point to a demo that always uses latest? Probably other people are bad like me. :)

Contents from other slides overflow on the left/right borders

I have three unordered lists displayed in three divs with their classes as slides. And when one of the slide is active, the contents from other slides are visible on the left/right edges.

Html page is available at https://github.com/madhavan020985/miscFiles/blob/master/index.html

height of slides

I have found that the height of the slides is set by an algorithm in the javascript, but I've been unable to set the slide height (or min-height, which would make more sense) to a % value in the css. I think it would be really cool, if a %-height parameter could be passed on to the script, that sets it as a min height after calculating the browser windows height first.

Does this sound ridiculous? I'm very new to git and I've started making one presentation with fathom.js and I'm very thankful for the script.

nextSlide/prevSlide functions don't work when window is not active

I tried to do a simple setup where an HTML with my notes (and a timer) opens a popup window with slides and lets you to switch between slides by sending postMessage events. That way you can do something like "presenter notes" in Keynote.

However, when the window with fathom.js is not active, nextSlide and prevSlide functions don't work. I haven't noticed any errors in my web inspector console.

Modifying body[width]

Have you considered possibly a portable solution that didn't alter the html body. For instance, I wanted to quickly spin up a nice sliding effect ontop of our web application. However, fathom's altering of body's width is problematic.

Need a way to change the weblink after changing slides

Many times, to share a particular slide from a website made using fathom.js, we need to check the id and then append the link with #idname manually. It will be great if we can just ensure that whenever a slide is changed, suitable link is displayed on the browser so that user can just use that link in case he directly wants to share or refer to it.

Auto table of content ?

It is plan to integrate a function witch generate a table of content ? It could show after the progression of the slide in the general presentation.

Thanks for your work great plugin !

Deactivating default behavior for keyboard arrows

Trying to embed fathom.js inside another presentation that is already listening to left and right keyboard arrow keys.
Is it possible to provide an option for fathom.js not to listen to those events?

Title in demo isn't aligned properly

Hi,

When trying out the Fathom demo using Firefox 7.0.1 or Chrome 15 on the Mac, the slide title isn't aligned properly. I included a screen shot to illustrate the issue.

last slide doesn't show

instead it skips back to the first.

that doesn't seem like the correct behaviour to me. maybe 'home' could take me to the first, but if I mistakenly press --> on the last slide it should just sit at 'any questions'

I'm just putting in a dummy slide for now.

killer feature: night / day

A problem that I often see at presentations is that some people can't read it, and the colours need to be adjusted.

this is normally done in an ad hoc way,
but it would be awesome to quickly toggle to another sensible default,
that doesn't look terrible...

this site does it pretty well: http://dubset.com

Not optimized for mobile device

Fathom do not work on iPad and mobile device.