meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

S5 1.1a3

We’re up to 1.1 alpha 3, with the big news this time around being incremental display.  So far, the way this works is that you can class a ul or ol element, and have the bullets in that list be incrementally displayed.  This is easier to understand by seeing than by reading an explanation, so go check out the alpha testbed.  In the first slide, all the bullets are displayed incrementally; you move through them by using any “next” action (keyboard or mouse).  You can also back up using a “previous” action.  The exception to this is the next and previous controls in the lower right-hand corner of the slide.  These always move forward or backward by one slide.

On the first slide, all of the bullet points are greyed out until you advance through the slide.  On the second slide, the first point is pre-highlighted.  This is intentional; it shows the difference between the two ways of presenting an incremental list.  On the third slide, the main-level points are all normal but the sub-list is incremental.  Again, this is intentional.  The highlight effect is completely CSS-based (using the class current), so every theme can have its own incremental-display look.  I picked red because it was really, really obvious, and I was too lazy to think about what color would fit in better with the default theme.  I’ll get around to tidying that up later.

The one thing I’ve made the system do but am not sure about is that when you back up to a slide that has incremental display, it starts out looking normal and then “un-highlights” as you move backward through the points.  I’m not sure that this is desirable, but at the same time I think it could be very useful.  (Plus you can always skip back a whole slide by using the lower-right controls.)  I’d like to hear feedback on what people think about the way the incremental display works now, and how it could be better.

For those who want to play around with incremental display, you add a class of inc to a list whose items you want to be incremental.  If you want a slide to start with the first point highlighted, add psf to the class value, so you have class="inc psf".  If you want to reveal arbitrary elements one by one on a slide, individually class them with inc.

I don’t have all of the contributed code merged into the JS yet, but I’ve seen everyone’s contributions from earlier posts, so please be patient.  I’m still at a loss as to how to make the intra-slide links work in Safari, and could use help figuring out what’s wrong there.  To test it, hit the “skip to summary” link on slide 1 of the testbed.  For that matter, if you uncomment the li:after rule in pretty.css, you’ll see that Safari keeps adding “NaN” into the classes of incrementally-displayed list items when you move back and forth from one incremental slide to another.  I can’t figure that one out, either.  Help is always appreciated.

So from my original 1.1a2 to-do list, the following are still left to do:

  1. A way to choose whether to show/hide all of the navigation controls, or just the menu. Indicating the preferred behavior via a meta tag is starting to feel more like the right way to go, since it means the presentation author can decide whether he wants the controls to be visible or hidden.  The problem of exactly how to manage the behavior is as yet unresolved.
  2. Better, possibly more dynamic, theme selection.  I still don’t have a clear idea of how this would really work.  It might be better to simply write a clear description of how to associate a new theme with the presentation file, and write up guidelines for theme authors.
  3. A way to indicate the target resolution in the CSS, so that the scripts can use that for scaling purposes (and thus make the scaling more intelligent).  I’m actually leaning pretty heavily toward dropping this, because I don’t see a pressing need to include it at this stage.  For the purposes of scaling foreground iamges, it wouldn’t be much more powerful than the author managing scaling via CSS.

And there you have the current state of s5 development.  Feedback is welcome.  Ever forward!

21 Responses»

    • #1
    • Comment
    • Sat 13 Nov 2004
    • 0337
    Daniel Brooks wrote in to say...

    I haven’t looked at the code, but NaN means Not a Number. You usually get it when you divide by zero, or try to coerce a string that contains letters into a number. Hopefully that helps

    Also, you keep mentioning scaling fonts and images and so on. You could just specify those dimensions in inches/centimeters, and they’d scale correctly when the resolution changes, at least on correctly configured computers that know what their DPI is.

    • #2
    • Comment
    • Sat 13 Nov 2004
    • 0345
    Lachlan Hunt wrote in to say...

    This is absolutely fantastic! I’ll never use powerpoint for presentations again, this beats nearly every feature. The only disadvantage I can see is that it requires so many seperate files, compared with the single file required for powerpoint shows, but that’s easily handled by adding the scripts and styles inline within the <head> and/or using data: URIs for the external resources, including images.

    The one thing I’ve made the system do but am not sure about is that when you back up to a slide that has incremental display, it starts out looking normal and then “un-highlights” as you move backward through the points.

    You made the right decision about that. It would be annoying if, when going back 1 slide, it always reset the highlighting.

    • #3
    • Comment
    • Sat 13 Nov 2004
    • 0438
    Fabian wrote in to say...

    This is a great enhancement, but unfortunately seems to fail in Opera. It is a pity this project tends to turn away from the browser that originally invented this presentation thing in the first place.

    I hope compatibility can still receive some attention in next versions.

    • #4
    • Comment
    • Sat 13 Nov 2004
    • 0647
    Nico Edtinger wrote in to say...

    I at least like the way the incremental display works when going back. What I see at talks is, that someone asks “could we have the last point again – I have a question to it” and the presenter goes to the last slide and hast to press forward until all of the text is on the page again. Much better with s5 now =)

    b4n

    • #5
    • Comment
    • Sat 13 Nov 2004
    • 0838
    christian wrote in to say...

    General suggestion to control the display with a a meta tag ( something ):

    get the meta tags and check the name attribute for ‘displayControl’ and if positive, set the content as class name to the main container of the control elements. Then set the appropriate css rules in the style sheet. That will work ok, as long as you have a clear structure in your main control container.

    The theme change i think i would do with alternate Stylesheets. There are avaible routines to handle this.

    • #6
    • Comment
    • Sat 13 Nov 2004
    • 0902
    christian wrote in to say...

    a example for that display control ( i have a little bit a different structure, but it’s still more or less the same )

    it does require:
    - in the head:

    - in the onload event:

    var metas=document.getElementsByTagName('meta'), meta, i;
    for(i=0; meta=metas[i]; i++) {
    if(/displayControl/i.test(meta.getAttribute('name')))
    document.getElementById('layout').className=
    meta.getAttribute('content');
    }

    - and in the css: .hideControl #controls {display:none}

    • #7
    • Comment
    • Sat 13 Nov 2004
    • 0927
    Eric wrote in to say...

    Daniel: I know what NaN means. I just don’t know why Safari is dropping it into the class attribute when, so far as I can work out, only strings are being manipulated. As for using physical-world measurements, that’s a non-starter. They would work fairly well on the 0,0001% of computers that are correctly configured to know how many pixels they’re displaying per inch. Everywhere else, things would go seriously awry.

    Fabian: I agree that it would be nice to have incrementals work in Opera. The problem is that Opera Show doesn’t use the S5 events to switch slides. It just does it. If there is an Opera-friendly DOM event that indicates a move from one slide to another, or some way of detecting the switch (and preventing Opera Show from jumping slides if there is incremental work to be done) I can very likely make the incremental display work in Opera as well. If not, then someone will have to work through all of the DOM problems Opera has with the actual S5 routines and fix them without breaking things for other browsers, and then we’ll just bypass the built-in Opera Show altogether. I’m not, at this point, particularly motivated to do that. What I will do before 1.1 goes final is make sure Opera doesn’t get stuck with faded-out slides that can’t be incrementally displayed. That’s something to handle in the beta phase.

    Nico: Thanks for the feedback.

    Christian: my thoughts for the control-display problem run along similar lines. As for alternate style sheets, I’m hesitant because that means the choice of alternates is hard-coded into the presentation, and if the HTML is passed on without all the themes then the mechanism breaks. Unless I’m overlooking something. It wouldn’t be the first time.

    • #8
    • Comment
    • Sat 13 Nov 2004
    • 0936
    christian wrote in to say...

    actually a bit more logical in that way.

    - in the head: <meta name=”displayControl” content=”menu, controls” />

    - in the onload:

    var metas=document.getElementsByTagName('meta'), meta, i;
    for(i=0; meta=metas[i]; i++) {
    if(/displayControl/i.test(meta.getAttribute('name')))
    doControls=meta.getAttribute('content');
    }

    where the doControls is global.

    Then you do ( or do not ) create the control elements ( if(/menu/i.test(doControls)) /*instruction */ ).

    • #9
    • Comment
    • Sat 13 Nov 2004
    • 0950
    christian wrote in to say...

    I overlooked your last comment. I don’t see the problem with the alternate Stylesheets.

    You can add them in the normal way with the link tag. Then Opera and Geckos do have build in the feature to choose a other theme.

    To make it more comfortable, it would be quite easy to read out all link tags, check them for the rel attribute, and then create dynamically some other little menu to choose one from the avaible themes.

    • #10
    • Comment
    • Sat 13 Nov 2004
    • 1025
    Leung WC wrote in to say...

    I think the theme definition should be done in a JS file. For each theme used in the presentation, one line of JS is added into the file. The code of creating/deleting stylesheets should’t be a big problem for Gecko, but I wonder if the IE code will break.

    BTW, for a end user, to creating such JS file, a dedicated automation tool (probably in EXE or similar format) is needed. So decide…

    • #11
    • Comment
    • Sat 13 Nov 2004
    • 1036
    christian wrote in to say...

    A little example for such a dynamically created style switcher menu.

    But perhaps i do missunderstand that feature.

    • #12
    • Comment
    • Sat 13 Nov 2004
    • 1610
    christian wrote in to say...

    I have made a version where the inslide jumps do work too in Opera.

    In the upper right corner is a menu to choose a theme.

    Quick jumper window, theme menu and controls are created depending from the value in the metatag ‘displayControl’. ( menu,themes,controls )

    A little enhancement: if one click in the left half of the window it goes back ( and forward in the right side ).

    • #13
    • Comment
    • Sun 14 Nov 2004
    • 0146
    Roy wrote in to say...

    Keep up the good work, Eric. I love S5.

    • #14
    • Comment
    • Sun 14 Nov 2004
    • 1008
    christian wrote in to say...

    I have added a Font Scalling Feature. ( Tested in Opera, Fox and IE. Any Browser Bug/Shortcomming get much more important with it ).

    The Font Size does scale on Load and on Resize. The behavior can be controlled ( stopped ) in the meta tag ‘ displayControl ‘.

    I have added one more Slide with a little bit more explanations.

    See what you can use from it.

    • #15
    • Comment
    • Sun 14 Nov 2004
    • 1704
    Lars Olesen wrote in to say...

    S5 is brilliant. And it just gets better. I like Christian’s addons. Don’t know if it is necessary with a styleswitcher, but the menu in the bottom corner IMHO is visually more appealing.

    I don’t know if you seen http://www.solitude.dk/archives/OperaShow/. It is kind of simple, but a nice way quickly to get a list of shows, and it supports both Opera and S5.

    • #16
    • Comment
    • Sun 14 Nov 2004
    • 2107
    Jason Karns wrote in to say...

    I have added a “play” feature that will proceed to the next slide at preset intervals. (in seconds) It is compatible with Mozilla and IE but hasn’t been tested with the new incremental routines. It features play/pause and stop (return to first slide) and it will stop automatically when the slideshow finishes (returns to slide 1). I don’t have any webspace to post it so if you’re interested, shoot me a request: karnsj@cse.ohio-state.edu

    • #17
    • Comment
    • Sun 14 Nov 2004
    • 2156
    Eric wrote in to say...

    Christian: Unfortunately, your slide show is pretty thoroughly shattered in Safari. I’ll look through the code to see what you’ve done, but unless the Safari problems are fixed I’m not sure how much I’ll be able to use. Don’t get me wrong– I definitely appreciate the effort you’ve put forth!

    Jason: I’d like to see the code. Send it on over to me via e-mail; my contact address is on my personal page.

    • #18
    • Comment
    • Sun 14 Nov 2004
    • 2215
    Scott DeMers wrote in to say...

    I’m getting some odd behavior in Firefox 1.0. On the first slide (after the title slide) clicking on the first greyed item immediately advances me to the next slide. The same happens on the third slide with the greyed sub-list. The second slide worked as expected. Otherwise, an excellent slideshow!

    • #19
    • Comment
    • Sun 14 Nov 2004
    • 2311
    Eric wrote in to say...

    Scott: I’m not seeing that in Firefox 1.0/OS X. I clicked directly on the first greyed-out item and it ran through the points as expected. Ditto for the list on slide 3. Do you get the same results if you use the space bar/page down/right arrow to advance through the slide show?

    • #20
    • Comment
    • Mon 15 Nov 2004
    • 0043
    Roy wrote in to say...

    Jason: could you please send me that “Play” feature? Thanks.

    ftp://schestowitz.com (username: ftp@schestowitz.com)

    • #21
    • Comment
    • Tue 16 Nov 2004
    • 0607
    Micha wrote in to say...

    Eric, I’ve made the following changes to ui2/slides3.js. As you can see, I removed the multiple var vSize and var hSize declarations in fontScale() subroutine and revamped fontSize() once again:your if (!(s5ss = document.getElementById('s5ss'))) check was ineffective for IE and I merged the almost identical ‘if/else’ blocks together. Unfortunately I wasn’t able to replicate the rule removing feature you wrote for Mozilla browsers since support for the removeRule() method is sketchy at best in IE5/Mac. :-( This is not to worry upon since it seems to work quite well as is. Also I added a timeout in resize handler that fixes IE5/Mac odd behavior (some sluggishness updating its window dimensions properties); this should have no noticeable impact on other browsers.


    function fontScale() {
    if (!s5mode) return false;
    var vScale = 22; // both yield 32 (after rounding) at 1024x768
    var hScale = 32; // perhaps should auto-calculate based on theme's declared value?
    var vSize = 700; // assuming 1024x768, minus chrome and such
    var hSize = 1024; // these do not account for kiosk mode or Opera Show
    if (window.innerHeight) {
    vSize = window.innerHeight;
    hSize = window.innerWidth;
    } else if (document.documentElement.clientHeight) {
    vSize = document.documentElement.clientHeight;
    hSize = document.documentElement.clientWidth;
    } else if (document.body.clientHeight) {
    vSize = document.body.clientHeight;
    hSize = document.body.clientWidth;
    }
    var newSize = Math.min(Math.round(vSize/vScale),Math.round(hSize/hScale));
    fontSize(newSize + 'px');
    if (isGe) { // hack to counter incremental reflow bugs
    var obj = document.getElementsByTagName('body')[0];
    obj.style.display = 'none';
    obj.style.display = 'block';
    }
    }

    function fontSize(value) {
    if (!isIE) {
    if (!(s5ss = document.getElementById('s5ss'))) {
    document.getElementsByTagName('head')[0].appendChild(s5ss = document.createElement("style"));
    s5ss.setAttribute('media','screen, projection');
    s5ss.setAttribute('id','s5ss');
    }
    while (s5ss.lastChild) s5ss.removeChild(s5ss.lastChild);
    s5ss.appendChild(document.createTextNode('body {font-size: ' + value + ' !important;}'));
    } else {
    if ('undefined' == document['s5ss'] + '') {
    document.createStyleSheet();
    document.s5ss = document.styleSheets[document.styleSheets.length - 1];
    }
    document.s5ss.addRule('body','font-size: ' + value + ' !important;');
    }
    }

    ...

    window.onresize = function () { setTimeout('fontScale()', 50) }

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


November 2004
SMTWTFS
October December
 123456
78910111213
14151617181920
21222324252627
282930  

Sidestep

Feeds

Extras