S5 1.1a3
Published 20 years, 4 days past
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:
- A way to choose whether to show/hide all of the navigation controls, or just the menu. Indicating the preferred behavior via a
metatag 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. - 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.
- 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!
Comments (21)
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.
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 usingdata:URIs for the external resources, including images.You made the right decision about that. It would be annoying if, when going back 1 slide, it always reset the highlighting.
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.
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
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.
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}
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.
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 */ ).
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.
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…
A little example for such a dynamically created style switcher menu.
But perhaps i do missunderstand that feature.
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 ).
Keep up the good work, Eric. I love S5.
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.
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.
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
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.
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!
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?
Jason: could you please send me that “Play” feature? Thanks.
ftp://schestowitz.com (username: ftp@schestowitz.com)
Eric, I’ve made the following changes to
ui2/slides3.js. As you can see, I removed the multiplevar vSizeandvar hSizedeclarations infontScale()subroutine and revampedfontSize()once again:yourif (!(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 theremoveRule()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) }