Proudly presenting AJAX-S!
The demo and the zip file are updated with a small fix to avoid generating invalid nodes while still offering the possibility to use custom HTML in any page, and the ability to display escaped code for presentations.
Updated the drop down to support pressing the spacebar and enter keys when it has got focus, to navigate directly to that certain page.
Important update!
By popular request, AJAX-S now supports XHTML code in the XML file as well. No escaping, no nothing, just write as you usually do! I think now that it is a real contender to Eric Meyer’s S5!
For some reason unknown to me, the XSLT files failed to work in some Mozilla web browsers on some computers when they had an .xslt extension. I’ve changed the zip file so it now points to XSLT files with an .xml extension. If you’ve downloaded a previous version that didn’t work, please try the new one. Big thanks to Karl and especially Henrik Box for doing some extensive testing for me (Henrik wants to meet the girls behind girlspoke as a thanks… :-))!
Release 2!
After listening to the feedback I got, I’ve now done some major updates to AJAX-S. It now supports incremental rendering, non-JavaScript users and also offers a printable version. Go check the updated demo.
Changed the JavaScript detect for support for the XSLTProcessor object so it asks users that lack that support if they want to go to the printable page instead.
Added check to scroll the current incremental step into view if it wasn’t visible.
Updated with a different look for active increment, past increment and coming increment, and a setting if one wants the first or last increment to be selected when backing from an upcoming page.
Updated with a different look for active increment, past increment and coming increment, and a setting if one wants the first or last increment to be selected when backing from an upcoming page.
Updated with a fix for two glitches in the keyboard navigation.
Add-on available as of September 7th, 2006
An add-on for AJAX-S has been developed, to automatically show/hide the footer of the slides.
I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. The code is probably not perfect, but I’m going more for the concept here. The tweaking options are endless.
The idea came to me because I wanted a lightweight slideshow based on HTML, CSS and JavaScript, but I also wanted to separate the data of each page from the actual code that presents it. Therefore, I decided to move the data into an XML file and then use AJAX to retrieve it. The name AJAX-S is short for AJAX-Slides (or Asynchronous JavaScript and XML Slides, if you want to).
Naturally, one of my inspirations for creating a HTML-based slideshow are from Eric Meyer and his S5. However, I wanted to take it one notch further, to make it more flexible and also usable for people with no HTML knowledge whatsoever. Another motivating factor was to just transform the data for the current page, as opposed to creating all the HTML needed for all the pages when the page is initially loaded. A leaner end user experience, basically.
It only works in IE 6 and Mozilla-based web browsers as of now. This is because of the need to do on the fly transformations on the client, which means the necessary support for ActiveXObject or XSLTProcessor has to be there. I think Opera 9 will support XSLTProcessor and probably some upcoming version of Safari too, so more widespread support in the future is very likely.
A freaky thing, which I hope is only a very unimportant detail, is that when I run it here at my host provider, I have to use the xml instead of the xslt one. However, most likely a hosting issue only.
But enough of that now. Download AJAX-S or view the demo of AJAX-S. Please let me know what you think, and if there’s any major error in the code. Not a requirement at all, but if you use it and like it, I would appreciate getting credit for it. 🙂
Cool, but your XSLT parsing seems to be a bit buggy. The DOM for the first example page includes a
PARAGRAPHelement.<div id="main-content"><h2>AJAX-S</h2><p><PARAGRAPH>The idea came ... (or Asynchronous JavaScript and XML Slides, if you want to).</PARAGRAPH></p><img src="images/masthead.jpg" alt="" class="left"><p><PARAGRAPH>The reason I ... particular program or provider when doing it.</PARAGRAPH></p></div>Cool, I hope to see it on one of your presentations this year.
/dag
Doesn't appear to be working in Opera 9 TP1, even though it supports XSLTProcessor…
Yes – and other exotic elements
<code>HTMLMainly as a container for the other components</code>
lol, I can't post code…
Nice! You might wanna throw in some script.acio.us for spicy transition effects!
Using the drop-down to go to te next slide is not my best choice. At least have an option to click on next/previous buttons. With a drop-down I have to first click to open the drop-down, then select the next slide. This is more convoluted that simply clicking on a button.
OK, I stumbled on it: clicking anywhere on the slide advances to the next one, so no button is needed.
Dag,
Thanks! I think that's likely to happen. 🙂
Jere,
Sorry,
I don't know why. Maybe in the future I'll get time to test Opera 9 (or after it's final release).
Michael, Henrik,
Thanks for letting me know!
Of course it was the effect of some last minute "fixes" before I published it. Should be taken care of now; the demo and the zip file are republished.
Joe,
Yep, I wanted it to be as easy as possible.
Just wanted to let you know that the demo works fine under FF 1.0.7 Linux.
Good work Robert
I miss back/forward browser buttons support.. I remember O'Reilly had lately article on that.. how to take over browser history with ajax.
It can be better 🙂
Feature Request:
Back and forward buttons (from slide to slide) just in case.
Oh whoops, maybe I should read the presentation first, huh?
Jens,
Thanks for testing! I don't have access to a machine with Linux, so it feels good when someone's covering up for me!
Medvk,
While it's most likely doable (I haven't looked into it), I didn't think it to be a recommended approach. I think the back and forward buttons in the web browser should be about navigating between web pages, not slide pages.
However, I do take care of all the common keyboard events that are associated with navigating back and forth, so for me that makes it even more important that the web browser buttons' actions are the default and expected ones.
I hope it's not a showstopper for you. 🙂
Glen,
No problem. 🙂
Yeah.. probably back and forward buttons support just for back and forward would be nothing great (as it's already working nice with arrows etc.). But implementing this feature would also provide possibility of bookmarking chosen slide, directing someone to desired page in slide show. At that side I think this may be quite sensible improvement.
the original eric meyer technique had a button for the css to be switched to display the information as a single document for printing, is this still implemented and if so where is the button on the demo page
also was thinking if you can put this together you could probably put together an online form that creates the XML file. having a tool like this would ensure that people take this accessinle format seriously and start using it on their own presentations. if these techniques are to be used as an alternative to powerpoint they need to be easy for the non technical users.
well done though, very good idea.
would be great to see it linking with XML exports from openoffice powerpoint equivalent.
Neat. Blogged it.
Works fine in Camino 1.0b1 (OS X), by the way!
neat, but a slide show makes heavy use of the backbutton usually so you need to keep track of the history, take a look over here http://www.sitepoint.com/blogs/2005/10/28/bookmar…
Marco,
Thanks!
Right now, transition effects aren't priority one, but in the future it shouldn't be any problem to add them. 🙂
Medyk,
Yes, absolutely. But then again, would the creator of the slide want that? And in that case, it would be easy to instead add querystring functionality to the page and send in the number of the desired page.
Maybe I'll budge about back and forward buttons in the web browser, but at least not right now. 🙂
Ben,
Thank you!
As of now, that's not implemented, nor is a print CSS. But I see no technical problem with that, it's just about tweaking the XSLT so it returns all results if no specific page is asked for.
Then, of course, the accompanying CSS needs to altered so it's presented in a nice way.
Having an online tool for creating the XML sounds like a great idea! Then non-technical people in a company could create the content for their slides in a much faster and more efficient way, while the same data can be reused for different contexts.
Paul,
Thanks for the mentioning!
All valid points you mention in your post, but, as you wrote, it's a first-day prototype. I wanted to get it out to all of you, and let you try it out and use it. I still think the possibilites with this approach are endless, and like Ben mentioned, the possibility to create slide pages through an online form will definitely make it lean and easy to use.
Haydiv,
Thanks, and thanks for the link.
As of right now, I won't implement back and forward functionality with the web browser buttons. I think there's already a myriad of way to navigate through the pages.
I also I expressed my opinion above about this, but I might turnaround in the future. 🙂
very cool stuff,
you should get in touch with the Gallery2.0 people. They've been talking about an AJAX slideshowfor awhile but no one so far has done it.
http://codex.gallery2.org/index.php/Gallery2:Summ…
nice. navigation has a bug though: if you put the focus on the dropdown list you can choose a slide with the arrow keys and then press the space bar. however it doesn't care what you selected – it always goes one slide forward.
Neat stuff, like it works. But did you think about someone else logging in ant sort off showing these slides to the other person? I would really make good use of that stuff. I saw it work in illutel.com. I quess they did use some strange ajax, which can get data whenever it wants from a server. But they are commercial… I also saw chess playing site chess.ktu.edu. I quess they do have ajax client, so could be helpfull, but things up there seem to be far more complicated than slide show.
if anyone please would explain how these chess guys work, it would be cool, cause they are not responding to my mails 🙁
Cool work Robert!
I allways enjoy reading your blog!
If i may suggest, have a look at Sarissa and you might get around some browser problems with xml/xslt handling.
/Johan
sleeplessboy,
Thank you!
arake,
Yeah, maybe I should! 🙂
just me,
Thanks for letting me know! Zip file and demo are now updated so it works correctly.
verger,
I'm sorry, I'm not sure what kind of log in functionality you mention. Would you care to specify that?
I have no idea about the chess guys. 🙂
Johan,
Thank you! I've seen a little what Sarissa are up to, Google with their AJAXSLT etc, but I didn't think it was worth mimicking XSLT functionality in a lot of web browsers for this. For now, I rather just rely on those web browsers that support XSLT natively.
Have used s5 in the past and it is a great solution. Very excited to see how your solution plays out. However, it doesn't seem to work on my machine in any Mozilla browser.
(Mac OS 10.4.3: Camino 1.0b1, FF 1.0.6)
It is an exercise in abstraction but it just doesn't degrade well. As someone mentioned before, the main idea about standards based presentation slide systems is that they fall back to a printable, straight HTML document when there is no scripting available.
Technically it is a really great idea, but not everybody likes changing XML for content and it should be easy to mail a presentation to somebody or just swiftly upload it on a server.
I have used my domslides together with contribute on an intranet, and it is dead easy to create new slide presentations that can be linked from the site. With this, we'd need a bespoke editor to change the content.
Very cool, except the ALT + Left Arrow takes you back to the page you came from, not back a page in the presentation. Just thought I'd let you know.
Back and Forward button seems to on top of Request list 🙂 Very cool
Matthew,
Yes, me too. 🙂
I can't really tell why it doesn't work for you, I know that it has been tested in Camino 1.0b1 and confirmed to work. Does this apply to the online demo as well as if you download the zip file?
Chris,
Yes, I agree, it doesn't downgrade well. But I know how to add the support for non-JavaScript users so it will display all slided when the page is loaded. It's just a matter of time… 🙂
Mostly what I wanted to do with this was to present the concept and separation into different layers. Non-JavaScript support will be added.
Well, if you use the HTML mode, you write good old HTML in the HTML file or in the XML file; not any difference. I would rather push the implications of what can be done and the greater flexibility it offers when the data is in its own layer, like online tools for creating a presentation, reusing all markup, CSS and interactivity for many different presentations and only changing the XML and/or the XSLT file.
Another worry I've heard about is that it doesn't work in Safari or in Opera. Why it doesn't work in Safari is because they're not supporting the <code>XSLTProcessor</code> object; an alternative might to present it to those users like I would to non-JavaScript users, but it doesn't really sound like an attractive option.
About Opera, <code>XSLTProcessor</code> will be supported in Opera 9. I've tried the technical preview of Opera 9 and it does indeed work. However, the there seems to be some problem after the transformation is done with the XMLWriter. If anyone out there has any idea, please don't hesitate to let me know!
Nathan,
Thanks!
Yes, I discovered that in Mozilla-based web browsers; it seems like I can't stop that event. 🙁
Mahesh,
Thank you!
Yes, maybe I'll add it in the future… 🙂
Hi Robert,
The work laptop here is Win 2000 SP4 and the download works in IE6 SP1 OK but not FF1.07. would you or anyone else be able to explain this? I assume it’s the operating system….?
Cheers!
Karl,
Hmm…
Interesting. Does that apply to the online demo too? Or just the download?
Hi again, yeah that would have been helpful to post first time around 😉
The online demo is fine in both browsers 🙂
Regards, Karl
Karl,
No problem! 🙂
Then I can't really tell. I've downloaded the zip file to two PCs (although with XP), and it seemed to work fine. Maybe some local security settings?
Also, try changing the extension of the XSLT files to <code>.xml</code> and update the paths in the JavaScript file accordingly. That's a change I had to do here at my host provider (I have no idea why).
I changed the JavaScript file to point to the xml files in the xslt folder and that fixed it 🙂
Karl,
Thanks!
I just came to the same conclusion, with a little help from a friend. Post and zip file updated.
I like the concept, but really don't like the name. I think it takes focus off of it being a slide show app and puts too much focus on it being an AJAX app.
Unless it is just a technical demonstration, I don't think AJAX reallys need to be the primary recognizable term in the name.
Also, have you considered using or supporting a standard schema for your XML slide show files?
That would be cool because then you could use XSLT to translate them into nearly any slide show format (and vice versa for other XML based content).
Anyway, I'll definitly keep an eye on this since I am a big fan of S5 and this shares many of S5s merits. Keep up the good work.
Jason,
Thanks!
Well, the name is kind of both a slide show app and the AJAX technology. It's a way to stand out compared to S5 and also in its name conveying about the separation of data and the rest.
Sounds great! I haven't thought about that, but if someone wants to add that (since the XML can look basically any way you want to), it sure sounds intriguing to create one slide show and then deploy it to a lot of different formats.
[…] AJAX-Based Presentation Platform Robert Nyman has released AJAX-S, a presentation platform similar to Eric Meyer’s CSS/XHTML-based S5 […]
Thanks for the email Robert. Downloaded the latest rev and it works great now. I will continue to experiment with this solution.
[…] er 15, 2005 at 10:29 pm · Filed under Design Robert Nyman’s AJAX-S is an easy to use Ajax based Slide show inspired by Eric Myer’s S5 […]
[…] AJAX-S slideshow, since it requires a web browser capable of doing XSL transformations. http://www.robertnyman.com/2005/11/13/proudly-presenting-ajax-s/ […]
Matthew,
Great!
Thanks for reading and testing!
[…] Mountain Bike Component Monsters AJAX Power Point Inspired Tool It’s still looking pretty early in its evolution, but AJAX-S looks promising a […]
Cool!
If interested, you might take a look at my Ajax project, ZK, at SourceForge and
Live Demo.
ZK takes a different approach: make Ajax transparent to app developers.
Tom,
Looks very interesting! Seems like you guys have put some serious work into that. 🙂
AJAX-S, Release 2!
Robert, thanks.
Tom,
No, no, thank you!
Always interesting to see good stuff! 🙂
[…] à ¹‡à ¸• | Trackback | RSS | à ¹Âà ¸ªà ¸â€Ã ¸‡à ¸„à ¸§à ¸²à ¸¡à ¸„à ¸´à ¸â€Ã ¹€à ¸«à ¹‡à ¸™ à ¸«à ¸²à ¸Âà ¸§à ¹ˆà ¸²à ¸¡à ¸µ slideshow à ¸šà ¸™à ¹€à ¸§à ¹‡à ¸šà ¸—à ¸µà ¹ˆà ¸¡à ¸µà ¸›à ¸£à ¸°à ¸ […]
[…] om Detailed guide on what RSS is and how to use it to track web sites. (tags: RSS howto) Robert’s talk » Proudly presenting AJAX-S! AJAX-based slideshow (tags: slides […]
[…] online che permette l’accesso simultaneo di più autori allo stesso documento Tools AJAX-S uno slideshow programmato da Robert Nyman basato su tecno […]
very nice work!!
robert cooke,
Thanks!
[…] future. In the meantime, you might want to take a look at S5 from Eric and Kathryn Meyer, AJAX-S from Robert Nyman and Imagination Cubed from GE. Many thanks to Raju Vege […]
[…] r Robert Nyman recently released a lightweight browser-based slideshow tool which he calls AJAX-S. The idea came to me because I wanted a lightweight slideshow based on H […]
MMMmmm… I think that you have make a very good work, just a little thing, add a cuple of arrows for a better intuitive navigation (now I must try to click on body).
Ok I have add my 2 cent and now I come back to my Mid Italian Chardonnay… 😉
See ya!
Giorgio,
Thank you!
Personally, I didn't think arrows were good design-wise, but if you download it you're more than welcome to use it in your version.
I hope the Italian Chardonnay tastes as good as it sounds! 🙂
[…] Ajax12 Feb 2006 07:27 pm
AJAX-S – Make slideshows with Ajax
I recently stumbled upon Ajax-S, which is a short for AJAX-Slides. Now the best part is, it is available […]
[…] d Ajax Development. Tags: Ajax Development, Ajax Resources. I recently stumbled upon Ajax-S, which is a short for AJAX-Slides. AJAX-S uses an XML format for the actu […]
Hi, very good stuff !
I already used it for a couple of presentations
(see there)
and i wonder now if (and how) would it be possible to print the whole presentation at a time.
Thanks,
Francois
[…] AJAX-S 2 Ihr wollt eine AJAX Slideshow erzeugen? Hier findet ihr das XML fressende AJAX-S. Es gibt auch eine Online Demo, die euc […]
Francois,
Thank you!
As you can see in my demo of AJAX-S, there’s a link in the footer to a printable version of the presentation containing all slides. Just download the latest version and you will see how it is implemented.
[…] row-buttons on your keyboard. Check the specifications, the demo and the ZIP’ed demo here. […]
[…] ascript) Geocollaboration using Peer-Peer GIS – Articles (tags: collaboration GIS p2p) Proudly presenting AJAX-S! 使çâ€Â¨ajax制作幻ç¯片 (tags: ajax slideshow prese […]
[…] verschiedenen Autoren erlaubt, zusammen an einem Dokument zu arbeiten. Tools AJAX-S ist eine Slideshow von Robert Nyman, welche auf Ajax basiert. Aus s […]
[…] galerÃÂa en HTML o montar un PHP-Nuke, es darte un paseo por aqui y probar unas cuantas de las galerÃÂas que hay implementadas con funcionalidades en Ajax. He estado proba […]
[…] . For presentations like this, I have switched from a standard presentation software to an AJAX based version of S5. The result is a website that runs like a presentation, […]
[…] tives combining the best of both options. S5: A Simple Standards-Based Slide Show System AJAX-S Basically, they use javascript to format webpages to emulate a powerpoin […]
[…] acute;n de diapositivas completa y tener una versión para imprimir también. AJAX-S El Ajax-s es el nombre corto de AJAX-Slides. Naturalmente, […]
ajax is fun…thanks for a great resource
Sumeet,
It is fun, indeed! 🙂
Sorry, but your code contains errors, I am currently browsing with opera 8 (supports ajax) but there's an alert ("Your Browser does not support XMLHttpRequests"). I thinks thats wrong and you should review your code.
Thank you,
Andi
Andreas,
Actually, what error message says is:
The problem with AJAX-S is that Opera 8 supports <code>XMLHttpRequest</code> but doesn't support <code>XSLTProcessor</code>. Opera 9, however, supports <code>XSLTProcessor</code> but there seems to be a problem with the <code>XMLSerializer</code> and how it's handled.
If you know any solution to that, please let me know.
Hi Robert,
Thanks for this great application. I wanted to embed <applet> tags into AJAX-S and entering the applet tag in ajax-s-html.xml seems to break the parser. Do you have any suggestions on what I could do?
Thanks
Saurabh,
Thanks!
If you enter it in the XML file, it has to be well-formed XHTML, i.e. every tag must be closed. My guess is that your <code>applet</code> tag contains <code>param</code> tags that aren't closed properly.
I have two AJAX-S presentations and was wondering whether it is possible to link to an individual slide in presentation A from presentation B? It is easy enough placing links from one slide to another slide if they are in the same presentation, but I can't quite work out how to link between different presentation. Any help would be appreciated.
tricky,
I haven't tried this, but I think a good idea would to link to a page with a hash value in the URL, e.g. presentation-two.htm#3.
Then you can alter the <code>windowLoad</code> funtion to check for a value in the <code>location.hash</code> part of the URL, and call the function <code>getContent</code> with that value.
For instance, if you want to go to slide 3 in your presentation, you could add something like this to the <code>windowLoad</code> function:
if(location.hash.length > 0){
getContent(location.hash.replace(/#/, ""));
}
Thanks for the tip, especially considering your current home commitments. I inserted it as suggested and it wouldn't work. However, I did eventually find a solution that works…
Most of the code comes from hyperlisk whose post I found at webdeveloper.com so thanks. Basically in the <code>windowLoad</code> function, there is the XMLHttpRequest part of the code and I changed it from this:
<code> if(typeof XMLHttpRequest != "undefined" && typeof XSLTProcessor != "undefined"){
var oXMLHTTP = new XMLHttpRequest();
oXMLHTTP.onreadystatechange = function (){
if(oXMLHTTP.readyState == 4){
oXML = oXMLHTTP.responseXML;
createPaging();
getContent(intCurrentPage);
}
};</code>
to this:
<code> if(typeof XMLHttpRequest != "undefined" && typeof XSLTProcessor != "undefined"){
var oXMLHTTP = new XMLHttpRequest();
oXMLHTTP.onreadystatechange = function (){
if(oXMLHTTP.readyState == 4){
oXML = oXMLHTTP.responseXML;
createPaging();
if(loc.indexOf("?") != -1) { //New Code
var f=loc.indexOf("?")+1; //New Code
var xxx= parseInt(loc.substr(f)); //New Code
getContent(xxx); //New Code
} //New Code
else { //New Code
getContent(intCurrentPage); //New Code
} //New Code
}
};</code>
and added the following piece of code to the beginning of the <code>windowLoad</code> function:
<code>var loc= window.location.href;</code>
This needs doing for the ActiveXObject code a little further down the function as well. To make it work, you simply add a ? and the number of the slide you want to go to after the URL of the page.
The only minor issue I have is that the Navigation bar updates with this method using ActiveX (IE6 on winxp), but doesn't seem to work on Firefox 1.4 on MacOS 10.4.6. Still, since most of the people viewing the slides are running the former, it's not too much of a problem!
tricky,
I'm glad that you found a solution that works for you! 🙂
[…] ient / Database class by Sven Wagener) The Presentation Some very basic slides, made with AJAX-S
Posted by oemebamo
Filed in tech, school (tags: […]
[…] torials/ http://developer.mozilla.org/en/docs/AJAX http://www.ajaxian.com/archives/2005/11 http://www.robertnyman.com/2005/11/13/proudly-presenting-ajax-s/ http://www.ajax […]
[…] toolkit/ http://developer.mozilla.org/en/docs/AJAX http://www.ajaxian.com/archives/2005/11 http://www.robertnyman.com/2005/11/13/proudly-presenting-ajax-s/ http://www.ajax […]
Can't see the Demo under Safari 2.0.3.
Is that normal?
Best
Delfin,
Safari doesn't support the <code>XsltProcessor</code> object, so when you enter the demo with Safari you will get a dialog that tells you that and offers you to go to the printable version instead.
[…] ject Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text / […]
[…] c Ajax image gallery example S5: A Simple Standards-Based Slide Show System : at MeyerWeb Ajax-S : at RobertNyman Slide Show with Controls : at Zapatec Miniature slidesho […]
very nice stuff
tnx u
i m going to try ur slideshow in my blog (:
jimy,
Enjoy! 🙂
what that is the most stuff over the places
[…] ject Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text / […]
[…] ��时间å†Â看下é¢的了fallseir.lee Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text […]
[…] rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text[…]
[…] ject Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text[…]
[…] ject Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text / […]
[…] ns AJAX – Devmo Ajax Optimization: Serving JavaScript Fast Ajax Resources @ Solutoire.com AJAX-S: An Ajax-based slideshow system Ajax and Flash: AFLAX Ajax Desi […]
[…] ons AJAX – Devmo AjaxOptimization: Serving JavaScript Fast Ajax Resources @ Solutoire.com AJAX-S: An Ajax-based slideshowsystem Ajax and Flash: AFLAX Ajax Design Patterns […]
[…] Published on Thursday, September 7th, 2006 For those of you using the very flexible AJAX-S for slideshows, I have now created a little add-on script to hide the foo […]
[…] mmentieren
Sep 06 08
Robert Nymans AJAX-basierte Slideshow: AJAX-S, eine kleine Slideshow aus HTML, CSS und JavaScript (Demo), mit kleinem A […]
Very impressive script, I like it, but there is one feature I immediately thought of – right click funcitonality. In powerpoint the easiest way to go back a slide (rather than the drop down) would be a simple javascript right click menu, even if it contained just "forward" and "back". Also, the show shouldn't advance on right click, only left click, to avoid confusion.
Other than that, keep up the good work!
Jason,
Thanks!
I might add that in the future, although at the moment you have the web browser back and forward buttons, the <kbd>backspace</kbd> key and the <kbd>alt</kbd> + left and right arrows (in Windows) to navigate back and forth.
You have all the reasons to be proud of it. Pretty neat!
vickeybird,
Thanks! 🙂
[…] ject Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text / […]
[…] ject Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text / […]
[…] ject Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text / […]
[…] c Ajax image gallery example S5: A Simple Standards-Based Slide Show System : at MeyerWeb Ajax-S : at RobertNyman Slide Show with Controls : at Zapatec Miniature slidesho […]
[…] ct Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJA […]
[…] ic Ajax image gallery example S5: A Simple Standards-Based Slide Show System : at MeyerWeb Ajax-S : at RobertNyman Slide Show with Controls : at Zapatec Miniature slidesho […]
[…] c Ajax image gallery example S5: A Simple Standards-Based Slide Show System : at MeyerWeb Ajax-S : at RobertNyman Slide Show with Controls : at Zapatec Miniature slidesho […]
[…] s Aptana Aptana is a robust, JavaScript-focused IDE for building dynamic web applications AJAX-S ist eine Slideshow von Robert Nyman, welche auf Ajax basiert. Aus seiner […]
[…] for presentations at web conferences. Now there’s some competition: AJAX-S by Robert Nyman uses Ajax to display a presentation, like this demo. It […]
[…] ax image gallery example S5: A Simple Standards-Based Slide Show System : at MeyerWeb Ajax-S : at RobertNyman Slide Show with Controls : at Zapatec Miniature sli […]
[…] ric Meyer’s S5 presentations at web conferences. Now there’s some competition: AJAX-S by Robert Nyman display a presentation, like this demo It ends up looki […]
[…] for the slides is very simple, highly semantic, and completely accessible. AJAX-S The name AJAX-S is short for AJAX-Slides (or Asynchronous JavaScript and […]
Finally, I included AJAX-S in my overview on web standards based presentation solutions (German) – though there still are validation issues!?
(Apologies for cross-posting.)
[…] applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text / […]
哈哈
^_^
[…] ash vs. Ajax : Flash . Actionscript : Brand Spanking New (tags: flash actionscript ajax) Proudly presenting AJAX-S! – Robert’s talk (tags: ajax slideshow presentation […]
[…] cript:urchinTracker (‘/outgoing/www.robertnyman.com/2005/11/13/proudly-presenting-ajax-s/’);” href=”http://www.robertnyman.com/2005/11/13/proudly-presenting-ajax-s/”>Ajax-S Ajax-S es un script muy facil de usar, liviano y muy, pero muy configurab […]
[…] Ajax Tutorial Slide in RSS Items Mastering Ajax Digg Voting Ajax Poll Ajax-S – Ajax Slideshow Ajax and Flash – Aflax Aj […]
[…] ns AJAX – Devmo Ajax Optimization: Serving JavaScript Fast Ajax Resources @ Solutoire.com AJAX-S: An Ajax-based slideshow system Ajax and Flash: AFLAX […]
[…] Ajax image gallery example S5: A Simple Standards-Based Slide Show System : at MeyerWeb Ajax-S : at RobertNyman Slide Show with Controls : at Zapatec Miniature slides […]
[…] rnative XML àPowerPoint
Filed under: XML — Daniel Lemire @ 10:56 pm
AJAX-S est un outil utilisant le XSLT pour générer des transparents. C’ […]
[…] s Aptana Aptana is a robust, JavaScript-focused IDE for building dynamic web applications AJAX-S ist eine Slideshow von Robert Nyman, welche auf Ajax basiert. Aus seiner […]
The work is great I like your slide
[…] ject Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text / […]
[…] Cropping RSS Ticker Ajax Tutorial Slide in RSS Items Mastering Ajax Digg Voting Ajax Poll […]
[…] Ajax Slideshow – I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. […]
[…] Ajax Slideshow – I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. […]
[…] AJAX-S : An Ajax-based slideshow system. […]
[…] http://www.robertnyman.com/2005/11/13/proudly-presenting-ajax-s/ : Pour réaliser des présentations sur le web, le tout en ajax et la possibilité d’impression. […]
[…] Ajax-S – Ajax Slideshow […]
[…] Ajax Slideshow – I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. Ajax Poll Script […]
[…] Ajax-S – Ajax Slideshow […]
[…] Ajax-S : at RobertNyman […]
[…] AJAX-S : An Ajax-based slideshow system. […]
[…] Ajax-S : at RobertNyman […]
[…] AJAX Slidshow – I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. The code is probably not perfect, but I’m going more for the concept here. The tweaking options are endless. […]
[…] Ajax-S : at RobertNyman […]
[…] Ajax-S : at RobertNyman […]
[…] AJAX-S : An Ajax-based slideshow system. […]
XHTML support is a great news, thx.
The work is great I like your slide
It works great with IE but I couldn't use it with opera.
Robert, great work! Thank you.
[…] Proudly presenting AJAX-S! – Robert’s talk […]
[…] Proudly presenting AJAX-S! – Robert’s talk […]
[…] AJAX Slidshow – I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. The code is probably not perfect, but I’m going more for the concept here. The tweaking options are endless. […]
[…] AJAX-S : An Ajax-based slideshow system. […]
[…] Ajax-S : at RobertNyman […]
[…] AJAX-S : An Ajax-based slideshow system. […]
[…] AJAX-S : An Ajax-based slideshow system. […]
"Very cool, except the ALT + Left Arrow takes you back to the page you came from, not back a page in the presentation. Just thought I’d let you know." I agree!
Any update or improvement on AJAX-S?
On IE6 and IE7, the printable version does not scroll down at all. The mouse scroll wheel does not work and the up/down arrow keys also does not work.
AJAX-S does work with Opera 9.25. Although the image is broken in the printable version.
AJAX-S does work with Firefox 3 but it seem a lot slower than Firefox 2.
Biodiesel,
Sorry, I haven't been doing anything with AJAX-S in a long time. All my time go into the development of DOMAssistant. But if you have any fixes/simple suggestions, please let me know!
Dear Robert,
I spoken too soon about AJAX-S working with Firefox 2 and 3. It does work fine on local server but the content goes blank when I upload it to the webserver. However, it works in IE6 ,7 and Opera 9.25.
Firefox console gave this error:
[nsIXSLTProcessor.importStylesheet]" nsresult: "0x80004003
After a few hours of hair-pulling, the problem seem to be with webserver not setting correct mime type for xml file and Firefox being picky about loading it. Adding overrideMimeType will fix this.
<code>
var oXMLHTTP = new XMLHttpRequest();
oXMLHTTP.overrideMimeType('text/xml'); //New Code
var oXSLTRequest = new XMLHttpRequest();
oXSLTRequest.overrideMimeType('text/xml'); //New Code
</code>
All browsers have problem with image not showing up in Printable View. It seem that /xml/ is some how added to the image URL.
The IE no-scrolling problem with Printable View is probably because of "overflow:visible;" in print.css. Not sure how to fix this since IE6 does not support "overflow:visible;"
A feature request is adding a forward and back button in the footer for those mouse-dependent users (new users seem lost in the current GUI without buttons or instructions even though AJAX-S offer a good selections of navigation keys). My current hack is not very pretty 🙂
<code>
<<< |
Page: 1 of
| <a href="getContent(intCurrentPage + 1);" rel="nofollow">>>>
</code>
For ajax-s.css , this change make the presentation look great:
<code>
div#main-content{
width: 80%;
margin: 2% auto;
font-size: 110%;
}
</code>
I do hope you will update AJAX-S from time to time because it produces the most consistent online presentation accross differrent browsers out of the 6 online slideshow tools I tried.
Thank you for time.
Biodiesel,
Trust me, I'd like to have the time to improve it as well. 🙂
I think you are right in the observations about the problems, although the broken image should just be a path that should be corrected in that XSLT file.
For the moment, unfortunately, I'm sorry to say that you and other have to resort to doing some local tweaking yourselves to get it to work. Maybe in the future, I'll start working on it again, but for the moment it won't be happening.
Thanks for understanding and good input!
It works great with IE and Firefox
Good job Robert, keep it up
Nelly Furtado Fan,
Thanks!
Under MS Windows, AJAX-S works with:
Internet Explorer 6
Internet Explorer 7
Mozilla Firefox 2.0.0.12
Mozilla Firefox 3 beta 3
Opera 9.26
Opera 9.50 beta
Safari 3.0.4
*All browsers have broken image link in Printable version.
*Internet Explorer 6,7 do not scroll in Printable version.
*Firefox 2,3 need to have correct MimeType('text/xml')
*Safari 3.0.4 is very fast, very pretty and very unstable 🙂
[…] Ajax-S – Ajax Slideshow […]
[…] de volledigheid verder nog een tweetal tools dat voor een meer technische doelgroep bestemd is: AJAX-S en […]
[…] AJAX-S : An Ajax-based slideshow system. […]
[…] AJAX-S Feb 12, 06 The name AJAX-S is short for AJAX-Slides (or Asynchronous JavaScript and XML Slides, if you want to). Naturally, one of my inspirations for creating a HTML-based slideshow are from Eric Meyer and his S5. However, I wanted to take it one notch further, to make it more flexible and also usable for people with no HTML knowledge whatsoever. Another motivating factor was to just transform the data for the current page, as opposed to creating all the HTML needed for all the pages when the page is initially loaded. A leaner end user experience, basically. […]
[…] Proudly presenting AJAX-S! – Robert’s talk – Web development and Internet trends an AJAX-based slideshow (tags: ajax animation slideshow javascript presentation) […]
i am looking for an ajax script like this. i want to use it on my news site. when i mause over news title i want its picture tobe loaded somewhere in site with ajax. is there any of changing this script to it.
Regards
Biodiesel,
Thanks for testing!
minikperi,
It takes some serious coding changes to achieve that, and AJAX-S isn't really intended to do that.
[…] Ajax-S — ??????????? ? ?????? ? ????????????? ????????. Ajax-S ????? ?????? ? ???????? XML ?????, ??? ?????? ??? ????? ?????????????. ????? ?????? ? ?????? ??????????? ?????????, ? ??? ???? ?????: ?????? ??????? ??????, ????????? ?? ?????????? ???? “drop-down” ??????. […]
[…] AJAX Slidshow – I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. The code is probably not perfect, but I’m going more for the concept here. The tweaking options are endless. […]
[…] ???? ??????? ???? Ajax-S ? […]
[…] AJAX-S: An Ajax-based slideshow system […]
[…] AJAX-S : An Ajax-based slideshow system. […]
It's great, but i needwith a slideshow buttons like 1, 2, 3, 4 to select images
Great Job Robert 🙂
—————————————————————————————-
* ngoding javascript kok ribet banget seh…..
[…] Ajax Slideshow – I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. […]
[…] Ajax-S – Ajax Slideshow […]
[…] AJAX-S : An Ajax-based slideshow system. […]
Okay… stupid question: is AJAX-S valid html/xhtml? Thank You.
very very thanx…
[…] AJAX-S: An Ajax-based slideshow system […]
i wonder now if would it be possible to print the whole presentation at a time.
Mira
Mira,
There's a link in the presentation to a printable version, which will list all the content in the same page.
[…] AJAX-S : An Ajax-based slideshow system. […]
[…] AJAX-S The name AJAX-S is short for AJAX-Slides (or Asynchronous JavaScript and XML Slides, if you want to). Naturally, one of my inspirations for creating a HTML-based slideshow are from Eric Meyer and his S5. However, I wanted to take it one notch further, to make it more flexible and also usable for people with no HTML knowledge whatsoever. Another motivating factor was to just transform the data for the current page, as opposed to creating all the HTML needed for all the pages when the page is initially loaded. A leaner end user experience, basically. […]
[…] AJAX-S : An Ajax-based slideshow system. […]
There’s a link in the presentation to a printable version, which will list all the content in the same page.
thanx alot
[…] Ajax Slideshow – I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. […]
[…] Ajax-S – Ajax Slideshow […]
[…] AJAX-S : An Ajax-based slideshow system. […]
Can’t do images, though, unless you know a way of doing images inline in IE that I don’t know — data urls don’t work, JavaScript URLs don’t work, etc, etc, unless someone’s come up with a new technique I don’t know about. You can’t even use XBMs any more; IE7 dropped support for them
[…] AJAX-S : An Ajax-based slideshow system. […]
thanx a lot admin
Hello,
Many greats for your works about ajax-s, I found this very useful and use it some times on my presentation on web, i would like to show what's can be possible with some tips and tricks, you can try this on link below, ajax prototype and scriptaculos for few animation
presentation, it's a smal contribution of your very great job, thanks again
Abel
AJAX-S is good for developers. Great resource.
Thanks for your good website and for sharing your experiences.
[…] AJAX-S : An Ajax-based slideshow system.????????? […]
[…] : Project Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text / form content. Ajax […]
[…] Robert’s talk » Proudly presenting AJAX-S! This entry was posted in Education, Higher education, Web, web2.0 and tagged ajax, slideshow, web2.0, webdesign. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL. « Motion Mountain – The Free Physics Textbook Getting started with "Getting Things Done" | 43 Folders » […]
[…] AJAX-S : An Ajax-based slideshow system. […]
[…] : Project Management applicaiton with rich UI Ajax Rater : A star rating system that uses Ajax. AJAX-S : An Ajax-based slideshow system. AJAX Spell Checker : spell check text / form content. Ajax […]
[…] AJAX-S : An Ajax-based slideshow system. […]
very nice.
AJAX is a very good technology and it is very useful for web desiging. I like it.
[…] AJAX-S : An Ajax-based slideshow system. […]
[…] AJAX-S : An Ajax-based slideshow system.????????? […]
[…] AJAX-S : An Ajax-based slideshow system. […]
AJAX is a very good technology and it is very useful for web desiging
[…] Ajax-S is an ajaxed, nice looking and easy to use slideshow application. […]
[…] AJAX-S: An Ajax-based slideshow system […]
[…] AJAX-S : An Ajax-based slideshow system. […]
[…] strumenti per le presentazioni e gli slideshow: abbiamo S5 di Eric Meyer, il padre dei Css, e Ajax-S che vi si ispira. Per gli slideshow abbiamo invece Ajax Slideshow o Fotograf. Dissolvenze ed […]
[…] Proudly presenting AJAX-S! ?? S5 ?? Presentation Slide?????? XML ???????????? Ajax + XSLT ????? Data Layer ??????? […]