S5 1.1b4

Published 19 years, 10 months past

As promised, I now draw back the curtain on S5 1.1b4 (try the testbed online, or download the 263KB ZIP file).  Here are the changes from 1.1b3:

  • “Meta” keys—function keys, command, control, alt, and option—should no longer be trapped by keys().  Thus, for those of you who discovered that you couldn’t use command-W to close the window in Firefox/OS X, that should be fixed; hitting F11 to invoke full-screen mode should also work; and so on, and so on.

  • While I was at it, I restructured keys() so that the only keystroke S5 pays attention to when in the outline view is “T”, to let you toggle back to the slide show view.  Anything else gets passed up by S5.  Despite this, Safari is still ignoring Page Up and Page Down while in the outline view.  I can’t for the life of me figure out why.

  • At the suggestion of Romain Herault, I’ve modified clicker(e) so that it will ignore clicks inside of embed and object elements.  This will allow you to interact with an embedded object, like a Flash file or a video, without advancing the slide show.

    I’m aware that some people have run into problems adding videos to their presentations, but I’m not at this point able to take on the task of analyzing the problems and figuring out potential solutions.  If someone else wants to work on fixes, there’s every chance I’ll be able to get fixes into the next version of S5, but very likely not this one.  I have a similar stance regarding the long pause of unstyled content while the presentation loads.  If someone devises a fix, I’ll study it for inclusion in the next version.  I personally don’t have a problem with the pause, but I realize there are those who’d like to eliminate it, and if it can be done without causing problems I’ll certainly add it.  Just likely not in this version.

  • PNG alpha channels are now honored in IE/Win, if only for img elements and not backgrounds.  You can see this happening on slide 5 of the testbed.  Woohoo!  This happens thanks to Erik Arvidsson’s pngbehavior.htc, a copy of which now resides in the default directory.  It may one day be replaced with IE7, but we’ll burn that bridge when we come to it.

    The one sort-of drawback to using this approach is that it seems to require that the call to pngbehavior.htc sits in an embedded style sheet, or else nothing happens.  This may very well have to do with the way the JavaScript monkeys around with external style sheets during startup.  If any of you IE/Win JS gurus can figure out a way to get the behavior to fire without having to embed it into the presentation, that would be stellar.  If not, it’ll just be documented as a “leave this in if you’re using alpha PNGs; otherwise you can take it out” thing.

One thing I’m still thinking about changing is the handling of the Home and End keys.  Right now, they move you forward or backward by one slide, just like the arrow keys and several others.  I’m thinking of making them jump to the first or last slide instead.  I’m hesitant because making the change means it would be much easier for a presenter to accidentally jump to the beginning or end of a slideshow with a single keystroke, and you can already easily jump to any slide by typing the slide number and hitting Return.  On the other hand, it’s a functionality that makes general sense, and it makes it much easier for a presenter to intentionally jump to the beginning or end of a slideshow with a single keystroke.  What are your opinions?

At this point, I would anticipate that 1.1 will have one more beta version to eliminate any bugs that are discovered as well as adopt any optimizations, and then it’ll go final.  I know there have been other feature requests (and may be more on this post, which is fine) but it’s really late in the beta cycle to add anything else.  Any new features will have a chance to get into the next version.

Comments (20)

  1. I think it makes sense to make Home and End map to the first and last slides. That’s what those keys mean in some other slideshow applications, but more importantly I think it would be nice to have a single key press method to go to the end or beginning of a presentation. If a presenter accidentally hits that key, he/she can get back by entering the slide number that he/she was on. Much nicer to have the feature and not need it, than to need the feature and not have it. :)

  2. Per your drawback for using the IE png fix… I took a look and wrote up a quick script that applies the fix via JS but doesn’t require any image specific coding.

    Hope it is helpful.

  3. I also vote for Home/End going to the Home (first) or End (last) pages, it just makes sense to me.

  4. It may or may not interest you, but I’ve written a very similar behaviour-based PNG fix for IE that supports both backgrounds (on any element) and IMG tags. The only limitation is that backgrounds are stretched and not tiled (this is an IE AlphaImageLoader problem, sorry). It’s freely redistributable, so feel free to roll it into S5!

    And as to your call for IE gurus: chuck this in your script:

    if (isIE && document.styleSheets && document.styleSheets[0]) document.styleSheets[0].addRule(‘img’, ‘behavior: url(iepngfix.htc)’);

    which will add a rule activating the PNG fix (just tested it with mine and it works fine; I use ‘*’ in place of ‘img’ for background support on any element, too). It requires that at least one stylesheet has been added to the page, which shouldn’t be a problem ;).

    Also, would you be interested in some cross-browser transition animations for S5? I just had a quick look through the script and should be able to implement some clipping-based “wipe” transitions, an opacity-based “fade”, and perhaps a combination of both via a pluggable animation framework. I’ve done a similar animation as part of an image gallery script so I can probably nick half the code from there. Cretive Commons license is fine as long as I can beg a name/URL in the credits.

    By the way: with this line in the script:

    var slideCSS = document.getElementById(‘slideProj’).href;

    It’s usually good JS practise to define it as null or an empty string, then get a reference to the node within your onload event handler (when the script actually runs). Although browsers will usually work quite well as-is, there’s no guarantee that they’ll have a complete DOM parse tree available by the time your script runs, especially if someone accidentally puts the SCRIPT tag before the LINK for the ID’d stylesheet.

  5. End should be the last slide, and Home should be the first. This behavior’s too intuitive to not have it that way. In my opinion it’s the way good applications work: even if you don’t know what’ll happen, you should be able to make a very good guess as to what will happen as often as possible.

  6. Angus: thanks much! Unfortunately, when I switched in your HTC file and made adjustments, it didn’t work on backgrounds although foreground PNGs got alpha’ed quite nicely. If you could get the 1.1b4 testbed to alpha-ize both foreground and background image, that would be awesome. So far as I could tell from the diagnostic alerts I played around with, the routines to swap out backgrounds and apply the filter never got called, though I don’t know why.

    On the other hand, the addRule call you described was exactly the cure for having to embed the behavior call into the document. Thanks! At the moment, my local copy is using it to call pngbehavior.htc, since it works on foregrounds and I understand it better. If I see an example where an HTC works on both foregrounds and backgrounds in S5, then I’ll switch to that.

    I’ll look at fixing up my global-variable definitions. Thanks for the explanation.

    Update on Home/End: my local copy of S5 now has Home and End jumping to the beginning or end of the slide show. In the process, I discovered that neither key was being used for movement in the slide show, even though I was sure they were. So this turned out to be not a change in behavior, but a case of adding new behavior.

  7. Trackback ::

    random notes

    S5
    Eric Meyer’s S5 plugs a hole which the ubiquitous Powerpoint and the cinematic Keynote cannot quite fill — a slideshow system that is platform independent and is not operating system specific. S5 simply depends on a (modern day) browser to displ…

  8. How about Ctrl+Home / Ctrl+End for First/Last slides, since some browsers [Firefox for one] use Home/End for very start/end of a page.

  9. Eric: Glad the addRule worked!

    As for backgrounds: One more thing I forgot to mention. The DXImageTransform filters only apply to elements that have a specific dimension set. So put something like this in your slideshow:

    <div style=”background: url(foo/bar.png); width: 90%”>

    It’s a stupid limitation of the IE rendering engine; you can supply a width of anything other than ‘auto’ and it’ll work. Of course your addRule must be ‘*’ not ‘img’ so the behaviour applies to all elements, too (that might have been part of the problem?).

    Hope this helps! By the way, what’s your opinion on the animation proposal?

  10. Trackback ::

    Talk.org

    A very CSS weekend causes better previews
    I have just had the most hard core css intensive weekend ever. Then end product is that SoapBX has received…

  11. I’ve been following and using S5 (for teaching in my school) since v1.0 and this version is looking and working great. Only thing is the same problem as before with Adblock (WinXP, FF 1.0, Adblock 0.5). It captures the back button, the return key in the address bar and stops links from opening within the presentation. So you’re pretty much stuck on the page once you’re in unless you turn off adblock.

  12. Eric,

    I’ve run into a couple of problems that I can’t seem to figure out. The first is some lines across the images (specifically the XFN pics in the testbed) when the window size is reduced in Firefox 1.0. I assume it’s a rendering thing, but just thought I’d throw it out there.

    The second is a problem with my the buttons in Firefox 1.0 when the slideshow is running. For some reason, none of the buttons like Back, Reload, Home or favorite buttons do anything. I don’t know if this is some sort of odd interaction between Firefox and JavaScript, but it’s a little disconcerting. Also, when I try to enter a new URL and press enter, it just advances the slideshow instead of taking me to the page I want. Granted, there are easy workarounds for both of these, but I think it’s a problem that the slideshow is interferring with my normal browser functionality.

  13. > The only limitation is that backgrounds are stretched and not tiled

    I found that removing the last argument to AlphaImageLoader makes the background image not stretch any more :)

  14. When I’m in the testbed, I can’t go anywhere else except opening a new tab : specifying another URL doesn’t work, clicking on a bookmark or Home doesn’t work as well. (I’m using Firefox 1.0/Linux).

    I don’t know if this behaviour is done on purpose, but it’s confusing…

  15. Angus: I did add a ‘div’ rule to apply the filter, but I don’t think the divs in question had explicit widths. I’ll try it again with that in place and see what happens.

    As for your other question, I’m interested in animation effects for a future version. I did some tests in that direction myself, and found that wipes were quite possible, but full-slide fades were very slow. This may be an effect of my coding style, but it’s something I put off worrying about until later. You can take a look at my tests if you’re interested. There are things that would have to be fixed, like flickers and such.

    A “pluggable animation framework” would be nifty, only I haven’t the slightest idea how to go about creating one. Others have proposed plugin architectures, and that sounds very cool, but without an example I’d have no clue how to even begin laying the groundwork for one, let alone create it.

    Tyler: I don’t see lines when I resize, probably because the images don’t resize when the window size changes (that’s something I haven’t built in yet). I’m not sure what might be causing what you see.

    Tyler and Julien: are you running AdBlock? If so, please disable it and test the slide show again. In the past, the kinds of behavior you both have reported have generally been linked to AdBlock, which I don’t run. I don’t have any of the problems you describe in Firefox 1.0/OS X [specifically Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0]. The navigation buttons all work fine for me, and I can enter a URL into the address bar and get there by hitting return. What actually happens in the latter case is that the slide show advances and then the requested URL loads, which is a little weird but tolerable. I can also use bookmarks without incident.

    If you aren’t running AdBlock, then knowing which extensions you are running would be very helpful.

  16. Eric: you’re right; when I disable adblock, the browser works correctly again.

  17. Eric: Let me know how it goes with the divs and PNGs!

    For an example of an animation plugin framework (if you’ll forgive me pimping my wares again) see the FreeStyle Menu script I wrote. You might find the script intriguing and/or useful… it was inspired in part by your demo of a CSS :hover menu and uses a CSS layout with a JavaScript behaviour/effects layer on top. If you want to use it on your site feel free!

    Anyway, the plugin framework is used with the nested list menu in the main HTML page. I have bundled two animation functions (clipping and alpha fade) with the demo script. They’re called from the FSMenuNode.prototype.setVis() function in the core script. I’m basically using an array of references to functions; the script loops through it, calling each function with a reference to the element being animated and the percentage progress of the animation. Each function therefore does its stuff at each step of the animation and users can add or remove effects as they want.

    For S5 you’d either have to have a JS array in the script file, or perhaps ship a few demo animation functions and allow configuration via a META tag, something like:

    <meta name=”animation” content=”clipLeftwards” />

    S5 would pick it up and use eval() to retrieve a reference to the function. It could then call that reference during transitions at each animation step.

    Hope some of this rambling turns out useful!

  18. Will the following kind of drawing capabilities can be expected from future S5?

    http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

  19. Angus: I’ve had no luck at all with background PNGs, and that’s with an explicit width set and the appropriate addRule and everything. I’m about to post v1.1b5, and it will have everything needed to do your own experimentation along those lines. As for the rest of your comment, that all sounds really, really cool—at least, the bits I understood did, which was honestly about every fifth word. In any case, it’s much too big an addition for 1.1, so I’ll have to return to it later on.

    anaadhi: That’s the first I’ve ever seen that script, so there are no current plans to add drawing capabilities to S5. That isn’t the final word; I’d have to play around with the drawing program to see how it works, and big its scripts are. In all that, I’d have to decide whether or not I think such a thing would really be useful. My initial reaction is to doubt that it would be, but I’m willing to let it stew for a few days and see how I feel then.

  20. Others (from the AdBlock forum) may be able to offer better advice, but this sounds an awful lot like a false positive and your content has been nabbed by a rule.

    Probably the easiest way to work it out is to get regex-coach, paste your rules (they will need to be modified slightly from the exported text file [remove the trailing ‘/’, replacing the leading ‘/’ with a ‘|’ (regex ‘or’ operator), pulling the ‘[Adblock]’ line, and not putting a ‘|’ on the first line]) and the URL, and see what matches.. and try to fix the rule to allow your content while still blocking the nastiness it was designed to protect against..

    Best of luck..

    (Cross-posted to the AdBlock forum)

Add Your Thoughts

Meyerweb dot com 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>

if you’re satisfied with it.

Comment Preview