Tuesday, April 6th, 2010
Amberjack 2.0: On page tutorials
Category: JavaScript, Showcase
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:
HTML:
-
-
<div class="ajTourDef" id="defaultTour" style="display:none" title="http://amberjack2.org/">
-
<div title="http://amberjack2.org/">
-
<div title="{id:'logo',padding:15,trbl:'brr'}">
-
<p class="title">Amberjack allows easy creation of On-Page Tutorials</p>
-
<br />
-
Navigate with bubble arrows, keyboard right/left or mouse click left/right
-
</div>
-
<div title="{id:'tryDemo',padding:0,trbl:'brl'}">
-
<p class="title">Text bubbles explain page elements to your visitors.</p>
-
</div>
-
<div title="{id:'tryDemo',padding:0,trbl:'brl'}">
-
Embed a Youtube Tutorial for example
-
</div>
-
<div title="{id:'markerBasics',padding:-2,trbl:'blr'}">
-
<p class="title">Jump DOM elements with their unique DOM ID</p>
-
</div>
-
<div title="{id:'markerPositioning',padding:-2,trbl:'ltb'}">
-
<p class="title">Place multiple tours ...</p>
-
</div>
-
<div title="{id:'markerColor',padding:-2,trbl:'ltb'}">
-
<p class="title">... on your page</p>
-
</div>
-
<div title="{id:'techcrunch',padding:5,trbl:'tlr'}">
-
Amberjack was covered on Techcrunch...
-
</div>
-
<div title="{id:'ajaxian',padding:5,trbl:'tlr'}">
-
... Ajaxian ...
-
</div>
-
<div title="{id:'digg',padding:5,trbl:'tlr'}">
-
... and even got Digged
-
</div>
-
<div title="{id:'delicious',padding:5,trbl:'trl'}">
-
Please add Amberjack to your bookmarks
-
</div>
-
<div title="{id:'uservoice-feedback-tab',padding:0,trbl:'rmb',position:'fixed'}">
-
<p class="title">That's it, please leave Feedback</p>
-
<br />
-
Close tutorial by clicking the cross (X) above or hit ESC on your keyboard.
-
</div>
-
</div>
-
</div>
-
You can check out the source and more tutorials and documentation is coming.
Related Content:
- Free Book: Servlets and JavaServer Pages: The J2EE Technology Web Tier
Addison-Wesley and Developmentor have provided TheServerSide.com with the entire book of Servlets and JSP the J2EE Web Tier for free download.... - SearchSecurity.com Tutorial Webcast: Advanced Intrusion Detection Systems
3.7 rating from 12 votes
That’s pretty cool, I like it. Much better than the previous version.
Guessing the wizard he has on the v1 site won’t work here?
Also, I don’t see a download link, or license/terms etc
That is pretty darn cool. This would be great for teaching clients how to use a CMS.
I’d love to try this. Is there any documentation for the new version?
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!
Arash
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
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. :(
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