Tuesday, April 6th, 2010

Amberjack 2.0: On page tutorials

Category: JavaScript, Showcase

We covered the original Amberjack library that offers on-page demos.

Arash Yalpani is back with Amberjack 2, which groks DOM node highlighting.

The main page shows how you embed a tour right into the page:

  1. <div class="ajTourDef" id="defaultTour" style="display:none" title="http://amberjack2.org/">
  2.   <div title="http://amberjack2.org/">
  3.     <div title="{id:'logo',padding:15,trbl:'brr'}">
  4.       <p class="title">Amberjack allows easy creation of On-Page Tutorials</p>
  5.       <br />
  6.       Navigate with bubble arrows, keyboard right/left or mouse click left/right
  7.     </div>
  8.     <div title="{id:'tryDemo',padding:0,trbl:'brl'}">
  9.       <p class="title">Text bubbles explain page elements to your visitors.</p>
  10.       <br />Use your <button>HTML</button> and <span style="color:#ff0;background:#000">CSS</span> knowledge to customize the bubbles as you like!
  11.     </div>
  12.     <div title="{id:'tryDemo',padding:0,trbl:'brl'}">
  13.       Embed a Youtube Tutorial for example
  14.       <br /><br />
  15.     <object type="application/x-shockwave-flash" style="width:330px; height:205px" data="http://www.youtube.com/v/xlroni8b6GU"><param name="movie" value="http://www.youtube.com/v/xlroni8b6GU" /></object>
  16.     </div>
  17.     <div title="{id:'markerBasics',padding:-2,trbl:'blr'}">
  18.       <p class="title">Jump DOM elements with their unique DOM ID</p>
  19.     </div>      
  20.     <div title="{id:'markerPositioning',padding:-2,trbl:'ltb'}">
  21.       <p class="title">Place multiple tours ...</p>
  22.     </div>      
  23.     <div title="{id:'markerColor',padding:-2,trbl:'ltb'}">
  24.       <p class="title">... on your page</p>
  25.     </div>      
  26.     <div title="{id:'techcrunch',padding:5,trbl:'tlr'}">
  27.       Amberjack was covered on Techcrunch...
  28.     </div>
  29.     <div title="{id:'ajaxian',padding:5,trbl:'tlr'}">
  30.       ... Ajaxian ...
  31.     </div>
  32.     <div title="{id:'digg',padding:5,trbl:'tlr'}">
  33.       ... and even got Digged
  34.     </div>
  35.     <div title="{id:'delicious',padding:5,trbl:'trl'}">
  36.       Please add Amberjack to your bookmarks
  37.     </div>
  38.     <div title="{id:'uservoice-feedback-tab',padding:0,trbl:'rmb',position:'fixed'}">
  39.       <p class="title">That's it, please leave Feedback</p>
  40.       <br />
  41.       Close tutorial by clicking the cross (X) above or hit ESC on your keyboard.
  42.     </div>
  43.   </div>
  44. </div>

You can check out the source and more tutorials and documentation is coming.

Posted by Dion Almaer at 6:22 am

3.7 rating from 13 votes


Comments feed TrackBack URI

That’s pretty cool, I like it. Much better than the previous version.

Comment by Skilldrick — April 6, 2010

Guessing the wizard he has on the v1 site won’t work here?

Comment by starkraving — April 6, 2010

Also, I don’t see a download link, or license/terms etc

Comment by starkraving — April 6, 2010

That is pretty darn cool. This would be great for teaching clients how to use a CMS.

Comment by jlizarraga — April 6, 2010

I’d love to try this. Is there any documentation for the new version?

Comment by pthesis — April 6, 2010

Hi and thank you to Dion for covering!

> Guessing the wizard he has on the v1 site won’t work here?

No, but I will try to document how you can create your own tour definitions very soon (hopefully next weekend)

> Also, I don’t see a download link

There will be no need to download anything, just a small piece of html to drop into your templates.

> or license/terms etc

I haven’t made my mind up about the license yet, give me some days to think about it and I’ll clarify

Thanks for your interest in Amberjack!

Comment by ayalpani — April 7, 2010

Library is very nice improvement. Thank you.

Stability is IE is a little bit of an issue from what I have seen. I made two corrections so far:

line: 294 – div.innerHTML = tplHtml;
— moved inside of the if(!e) conditional to protect cases where there is no reference to the div

line: 946 – location.href.toLowerCase() == href.toLowerCase()
– to deal with case sensitivity

Right now I am working through an issue with IE with the callbacks but I am not sure it has anything to do with your library code.

Thanks again

Comment by jhersh — April 16, 2010

Ditto most of the comments above. Really like the premise, built a huge tour with it in Firefox, made a few enhancements along the way (like the ability to fire JavaScript events when individual bubbles appear, to modify the page as you go).

However, it’s pretty broken in IE 8, from my current testing. maxWidth is not honored, positioning is irregular, DOM highlighting doesn’t seem to work. Even the author’s web site is unreadable in IE. Very disappointing that this wasn’t tested better, even for a pre-release. Sorry, I know a lot of people hate IE, but you can’t ignore it when it’s ~60% of the marketplace.

Now to keep from throwing away several days of work, I have to figure out how to cobble this together in IE. :(

Comment by kswartz — May 8, 2010

We built a modern version of this at http://www.drawium.com

You can create tours for your website without writing any code, for free at drawium.com

Comment by seckin — April 7, 2012

Leave a comment

You must be logged in to post a comment.