S5 1.1b5

Published 13 years, 2 weeks ago

And now, S5 1.1b5: try the testbed online, or download the 208KB ZIP file).  There is one functional change since S5 1.1b4: the Home and End keys now jump to the first and last slides, respectively, when in the slide show view.  In outline view, S5 will ignore those keystrokes (as it does all keys other than “T”) and allow the browser to do whatever it usually does.  This is actually an addition, as neither key was being used in previous versions of S5.

There is still a major conflict between S5 and the AdBlock extension for Firefox/Mozilla.  I don’t know what’s causing it, but I do know that if you’re running AdBlock and you load up an S5 presentation, you’re likely to find yourself trapped in the presentation, unable to use the back button or do much of anything else short of quit the program.  Don’t say I didn’t warn you.  I’ve started a thread in the AdBlock forum about it, and hopefully a solution will be found.  I will not delay finalizing 1.1 for this, however.  If a solution comes up after that and it calls for modifications to S5, then I’ll release a 1.1.1 version for AdBlock users.

A similar problem in Safari is still hanging about: in the outline view, the Page Up and Page Down keys are ignored.  I still have no idea why.  If anyone can find a solution, please let me know.

The PNG transparency fix introduced in 1.1b4 is still restricted to foreground images (i.e., those brought in via an img element).  In the default directory, there are two .htc files.  v1.1b5 uses pngbehavior.htc.  The other file, iepngfix.htc, can theoretically confer alpha-channel recognition to background PNGs in IE/Win.  I was unable to make this work, but the pieces are all there to experiment and find the fix I missed.  The behaviors need to be attached using addRule calls in slides.js; there’s one there already.  Hopefully a fix can be found in time to make it into 1.1 final.

Speaking of which, this is the last beta version before going final—I need to get it out the door so I can concentrate on other things for a bit.  Bug reports beyond the AdBlock problem are welcome, and fixes even more so.  I’m still open to feature requests for versions beyond v1.1, of course.


  1. Eric,
    I am still encountering the line problem in Firefox 1.0 on Windows XP. Check out the screen shot of it. The line runs across the bottom of the page, right above “S5 Testbed”. It seems to come and go, and flickers when I mouse over the toggle button/slide menu. If it is not showing up when I open the slideshow, I can usually get it to by resizing my browser window, then maximizing it again. Hopefully this helps.

  2. same as tyler for me too, it blinks out when moving to the next slide, but not when clicking through incremental bullet points.

  3. Oh, it’s a background problem! That wasn’t clear before.

    So I loaded up Firefox in Windows 2000 and was able to reproduce the line problem. Even more distressingly, I noticed the layout “jiggling” around. It was almost like the font sizing was being continually recalculated, and rounding differences were occurring between different calculations. My guess is that as each font-scaling event is finished, the Firefox thinks it’s time to re-re-scale, and does so, and thus is infinitely rescaling the slides. Any suggestions on how to prevent this—that is, have only one scaling operation per window size change—would be really helpful. It may even be that fixing it will clear up the reported line problem.

  4. On this new beta I am unable to use the drop down menu in Firefox 1. I noticed this on an Andy Budd presentation which uses S5. I don’t know whether it’s a problem that’s been introduced because the drop down menu works fine on the version I’m playing with.

  5. Found another one… When I go into the outline view, then use the toggle button in the top right corner to get back to the slideshow, the toggle button, prev and next slide buttons and slide menu are all visible in the slideshow, and do not hide themselves until I mouse over them. It looks like they are just not being hidden in toggle().

    Also, I know it might be a little late for this, but I just realized that it would be neat if the outline view could also be used for navigation, so that, if a presenter does not remember where in the slideshow a particular bullet is (say, during a Q and A session), he can just switch to the outline, find the spot in the slideshow he wants to show and click on that slide title, which would take him back into the slideshow view on the slide he selected.

  6. ‘do much of anything else short of quite the program.”

    “quite” should be “quit” ;-)

  7. “…the Home and End keys now jump to the first and left slides, respectively”

    Did you mean first and last?

  8. It would be nice to be able to capture numbers entered using number pad for the goTo function.
    Included below are the code changes to lines 274-280 of slides.js which will implement this.
    My only question about this would be whether not keyboards other than US-EN also use 96-105 for the number pad.


    if ((key.which < 48 || key.which > 57) && (key.which < 96 || key.which > 105)) {
    number = undef;
    } else {
    if (window.event && isParentOrSelf(window.event.srcElement, 'controls')) return;
    if (key.target && isParentOrSelf(key.target, 'controls')) return;
    number = (((number != undef) ? number : 0) * 10) + (key.which - ((key.which > 57) ? 96 : 48));
    }

  9. I notice from my error logs that whenever a page is reloaded, ./null is looked for without success.

    I haven’t attempted to find the source of this error, but thought it would be sensible to report.

  10. > I notice from my error logs that whenever a page is reloaded, ./null is looked for without success.

    I also found this on an earlier version, but no-one commented further:

    http://meyerweb.com/eric/thoughts/2004/12/09/s5-11b2/#comment-2931

  11. Sorry, Martin, I missed your previous comment amongst the type-to-jump discussions. That happens because of this routine:

    function notOperaFix() {
    slideCSS = document.getElementById('slideProj').href;
    var slides = document.getElementById('slideProj');
    var outline = document.getElementById('outlineStyle');
    slides.setAttribute('media','screen');
    outline.disabled = true;
    if (isGe) {
    slides.setAttribute('href','null'); // Gecko fix
    slides.setAttribute('href',slideCSS); // Gecko fix
    }
    if (isIE && document.styleSheets && document.styleSheets[0]) {
    document.styleSheets[0].addRule('img', 'behavior: url(v11b5/default/pngbehavior.htc)');
    }
    }

    The Gecko-fix lines were put in place to overcome a problem Gecko browsers had when firing up the slide show view; without it, they completely failed to do anything. If someone can come up with a way to get them to work without that hack, and without breaking things in other browsers, I’d be more than happy to use it.

  12. Eric: I sent you an email with an attached example of my PNG fix working with both foreground and background images in S5. I just thought I’d post a note here as I never received a reply and don’t trust the email system more than I can kick it :).

    Did you get it? If so, did it work OK? If it was filtered en route, I can upload it to my site and paste the link here. It was a .ZIP file sent from the email address listed in this post information, if that helps.

  13. Actually I might as well just paste the steps I took to get it working here :). Starting with a vanilla copy of S5…

    1) A DIV with a PNG background image was inserted into the first slide. I used the OPACITY.PNG file from the demo script like so:

    <div style="width: 200px; height: 200px; background: url(pix/opacity.png)">Test test test</div>

    although you are more than welcome to substitute a translucent PNG of your own concotion. It is important that your DIV has a defined width of anything but ‘auto’.

    2) The slides.js file was modified so that it called IEPNGFIX.HTC for both DIV and IMG tags. The change was to the addRule line in SLIDES.JS, replacing it with:

    document.styleSheets[0].addRule('img', 'behavior: url(v11b5/default/iepngfix.htc)');
    document.styleSheets[0].addRule('div', 'behavior: url(v11b5/default/iepngfix.htc)');

    3) The IEPNGFIX.HTC file was modified with the correct path to the blank.gif file for the S5 folder scheme (this only affects IMG tags, not background images). Change the blankImg line to:

    var blankImg = 'v11b5/default/blank.gif';

    4) There is no step 4. At this point it worked well with MSIE 6.2800.1106 under Win98 with all recent security patches. If anyone else can replicate these results in the interests of science, please post :). Alternatively, if the demo script link above fails in your copy of IE I’d love to hear it too.

    P.S. Comment Preview would be neat; fingers crossed, my markup will not mangle itself :).

  14. A pre-loader.

    I brought this up before and haven’t heard a thing since. Eric suggested it wasn’t a real requirement as the slideshow could load up long before the audience sit down for a presentation.

    However, my use of the slideshow takes it out of the lecture theatre and onto a website. Try loading up this early beta version of S5 and see what I mean… http://www.theletter.co.uk/log.php?id=19

  15. I just created my first presentation using S5 and I it is a pretty smooth system… I did notice though when you validate the XHTML it only validates as Tentatively valid.

    I did a little digging and it seems there are some interestings issues or missing fragments of code in the zipped download.

    1. There is no characterset declared so it defaults to UTF-8. I fixed it by adding: <meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ /> to the meta tags in the metadata section
    2. There is no content language specified. I fixed this one by adding the xml:lang=”en-us” to the line <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en-us”>
    3. One problem I am still having though is validating the CSS. I am using W3c’s validator and I get the following Error: Line: 30 Context : img Property behavior doesn’t exist : url(‘../includes/pngbehavior.htc’)

    How can I fix the CSS Error so that this warning goes away?

  16. I started using b3 in the context of a largish college lecture course. I put each lecture under access control, and students can access them to print out the outlines before class, and view them again after.

    This has worked great for me (no problems in either Firefox or Safari) and the majority of students who are able to view them. But I have gotten a number of random problems with display. Some students (who seemed to be using IE 6) were getting completely blank pages. Others (like one I heard from today) was getting the background image on Firefox, but no text content.

    This is all with files that worked perfectly for me. Anyone have any thoughts/suggestions?

  17. Er, I hate to nag, but I haven’t received any acknowledgement of emails sent or any response to comments posted here.

    Does the above approach for the .HTC activation work for you? Are you still interested in background images? Is 42 the meaning of life?

  18. Problem: Stylesheet Switcher extension for Firefox (0.2 I believe) causes CSS issues because it enables both the Slide and Outline CSS files (overriding the JS setting of the active sheet), causing conflicts and breaking the layout.The problem did not occur until I used the extension for the first time yesterday.

    Solution: You can use the toggle (t) to switch to outline and back to slide mode, which sets the slides back to the way they should be viewed, but if you go to another tab and back to your presentation again, the layout is messed up again, so it is only a viable workaround if you are only going to be in your presentation. As I don’t use it that often, I just decided to uninstall the extension and all is back to normal.

  19. When I run the 1.1b5 testbed on IE6 under Windows XP2, some of the slides show boxes with red-X’s. For example, S5 Default File Structure, and Incremental Animation. They work ok on Firefox. I haven’t applied any of the changes mentioned in the comments; are they supposed to fix this?

  20. Just lost everything I had writen in this box just because my e-mail address was misspelled. I quit.

    Great tool but lousy comment system.

  21. Would be nice if the incremental class worked on blockquote.

  22. Angus: I haven’t had a chance to try your changes yet. Sorry! Things have been very, very hectic.

    Blair: hopefully I’ll get a look at your pre-loader after 1.1 is finished. I did look at your example file but didn’t see any pre-loading behavior; the slide show was unstyled until all the images had loaded. Is there a preferred browser for seeing what you’ve done?

    Jeff: the warning is due to the presence of an IE/Win hack necessary to support alpha channels in PNGs. The new version of the script writes it in dynamically, so validation shoudln’t be affected. (Unless the validator now raverses the DOM stylesheet, in which case there isn’t much I can do.) Also, I intentionally left off character encoding and lamguage information to avoid implying that there were required values (like en-US, which wouldn’t work well for a German presentation) for those parameters.

    Aaron: yikes! And yet it makes some sense that things would happen that way. I’m not sure there’s a fix, but I’ll think about it in the post-1.1 stage.

    Ed: that would most likely be due to a failure to load ‘blank.gif’. I still haven’t quite worked out how other files relate to the HTC, but hope I will get it all sorted out in the relatively near future.

    Bruce: How does it not work on blockquote?

    Also, no idea why a slideshow would fail on some systems and not others, except perhaps differences in security levels or proxy/firewall blocking. None of which seems likely, but I can never be sure.

  23. Eric, very, very impressing work – again. I love S5 so much I recommend it to people who do not even have a computer … :)

    Unfortunately, the PNG fix doesn”t seem to work in IE6/Win. The “blank” gif wasn”t found, but even after copying it where it was supposed to be, PNGs were not shown at all. Pathes are correct, and they appear when dragged into the window, but not ihn the context of the page. This is odd.

    Also, IE6 doesn”t show the strings “#” and “of” for the page counter.

    Apart from that, this is simply amazing work. I showed this it to a person who has been teaching PowerPoint for years. She literally screamed when she saw how much could be done with so little in terms of filesize and required knowledge.

  24. The 1.1b5 test bed shows up as blank in Safari under Mac OS 10.2.8. In IE on the Mac I can see the first page but can’t make it go to any other pages. Anybody else seeing this or know how to fix it? The 1.0 test bed has no problems.

  25. Looking forward to the final release of 1.1. I used this system in a presentation at work where accessibility is just becoming a buzzword people understand and at the end when I told them that this presentation was done in a single XHTML using CSS and JavaScript they seemed fairly impressed.

    I am hoping to be able to create a few more presentations using the system. The one feature I Would really like to have though is the ability to scroll up and down wtihin the given text of a slide. Is this possible or even feasible?

  26. BTW if you’d like to see my S5 based presentation for EclipseCon view http://www.eclipsepowered.org/files/presentations/EclipseCon2005/ . It’s a work in progress but should be finalized in a day or two. Still unreadable in IE or Safari 1.0.3 on the Mac but it works in the newer (and older) browsers I tried there. It would be nice if it could fall back to the outline view on unsupported platforms though.

  27. I’m trying to write an XSL esporter from OpenOffice (1.x) Impress to html to use with s5. For now it handle text, title and subtitle, and unordered lists (with some problem…). Just for fun..
    You can found it here: http://kirgroup.com/extra/sxi_to_s5.jar

    To install: in OpenOffice, menu Tools->XML Filter Settings..->Open Package
    To use: File->Export->File format: S5 xhtml presentation (.html)

  28. Are there any examples of s5 out there where the “slide” length is not cut off by the footer? I would think that many “slide shows” are going to have pictures and/or text that extend beyond the limitations of the default settings of s5, such that the Window scrollbar becomes necessary.

    I’ve tried editing the css myself, but have been unable to come up with a solution.

    Any suggestions? Thanks.

  29. Is there a rapid way to jump from page 1 to another page without using the dropdown dialog. When I refresh the page, I find the dialog still very slow, it slows down my work especially when I have to preview each slide I create. Thanks!

Leave a Comment

Management reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand. HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>


Comment Preview

If you're satisfied with what you've written, then go ahead...