Seminar

What Is S5?

It's a Simple Standards-based Slide Show System

One XHTML document provides all of the slide show's content

CSS handles the layout and look of the slides

JavaScript handles the dynamic aspects of the show

That's all there is to it! (skip to summary; demonstrates links internal to the slide show)

I have notes here!
Keen.
Remember to tell people that notes are a new feature in 1.2

Operatic Origins

Opera 4 introduced Opera Show, a projection-mode style sheet technology (link demonstrates external link styling and window spawning)

Allows a single XHTML document to be turned into a PowerPoint-like slide show

Adding screen and print style sheets allows for multi-medium views of a single document

Highly efficient, but highly browser centric...

S5 and OperaShow diverged greatly in S5 1.1
S5 1.2 should (we hope) bring them into harmony once more

Incremental Display

Keep hitting/clicking "next" as long as it isn't the control link (»)

Bullet points are revealed one by one +

All based on class name of inc
Lists can be classed to make items appear individually
Individual items can be classed as well to create "animations"; see Derek Featherstone's example

Let's try it again, but without the first bullet point being pre-highlighted...

Incremental Display II

Keep hitting/clicking "next" as long as it isn't the control link (»)

Bullet points are revealed one by one +

All based on class name of incremental
Lists can be classed to make items appear individually
Individual items can be classed as well to create "animations"; see Derek Featherstone's example

Notice how the sub-list was part of the parent bullet point; that was done on purpose

Now to move on to other test slides!

' + + '[' + fd + ss + ']<\/span> ' + + '' + snum + '<\/strong><\/span>' + + '\/<\/span>' + + '' + (smax-1) + '<\/span> ' + + '[' + at + ']<\/span>' + + '<\/div>'; + + if (snum == 0) { + cs.style.visibility = 'hidden'; + } else { + cs.style.visibility = 'visible'; + } +} + +function go(step) { + if (document.getElementById('slideProj').disabled || step == 0) return; + jl = document.getElementById('jumplist'); + cid = 'slide' + snum; + var ce = document.getElementById(cid); + if (incrementals[snum].length > 0) { + for (var i = 0; i < incrementals[snum].length; i++) { + removeClass(incrementals[snum][i], 'current'); + removeClass(incrementals[snum][i], 'incremental'); + } + } + if (step != 'j') { + snum += step; + lmax = smax - 1; + if (snum > lmax) snum = lmax; + if (snum < 0) snum = 0; + }else { + snum = parseInt(jl.value); + } + nid = 'slide' + snum; + var ne = document.getElementById(nid); + if (!ne) { + ne = document.getElementById('slide0'); + nid = 'slide0'; + snum = 0; + } + if (step < 0) { + incpos = incrementals[snum].length + }else { + incpos = 0; + } + if (incrementals[snum].length > 0 && incpos == 0) { + for (var i = 0; i < incrementals[snum].length; i++) { + if (hasClass(incrementals[snum][i], 'current')) { + incpos = i + 1; + }else { + addClass(incrementals[snum][i], 'incremental'); + } + } + } + if (incrementals[snum].length > 0 && incpos > 0) { + addClass(incrementals[snum][incpos - 1], 'current'); + } + var guru = document.getElementById('guru'); + if(guru && snum==0) { + guru.style.visibility = 'visible'; + }else if(guru && snum>0) { + guru.style.visibility = 'hidden'; + } + if(tranSitions && s5mode && fadeModus) { + if(curSoundID != getSoundID(nid)) { + if(curSoundID == bgSoundItem && !sound[getSoundID(nid)]) { + }else {fadeoutSound(curSoundID,true); } // audio support + } + changeOpac(0,nid); + changeOpac(100,cid); + ce.style.visibility = 'visible'; + shiftOpacity(cid,fadeDuration); + window.setTimeout("changeSlides()",fadeDuration); + }else { + if(curSoundID != getSoundID(nid)) { + if(curSoundID == bgSoundItem && !sound[getSoundID(nid)]) { + }else {stopSound(curSoundID); } // audio support + } + ce.style.visibility = 'hidden'; + if (isOp) location.hash = nid; + ne.style.visibility = 'visible'; + finishSlides(); + } +} + +function changeSlides() { + if(nid != cid) changeOpac(100,cid); + document.getElementById(cid).style.visibility = 'hidden'; + document.getElementById(nid).style.visibility = 'visible'; + if (isOp) location.hash = nid; + shiftOpacity(nid,fadeDuration); + window.setTimeout("finishSlides()",fadeDuration); +} + +function finishSlides() { + jl.selectedIndex = snum; + currentSlide(); + loadNote(); + permaLink(); + number = undef; + if(sound[getSoundID(nid)]) { + playSound(nid); // audio support + }else if(sound[bgSoundItem] && curSoundID != bgSoundItem) { + playSound(bgSoundItem); // audio support + } +} + +function goTo(target) { + if (target >= smax || target == snum) return; + go(target - snum); +} + +function subgo(step) { + if (step > 0) { + removeClass(incrementals[snum][incpos - 1],'current'); + removeClass(incrementals[snum][incpos], 'incremental'); + if(tranSitions && s5mode && fadeModus) { + if(!incrementals[snum][incpos].id) { + var tmp = new Date(); tid = "inc" + String(tmp.getTime()); + incrementals[snum][incpos].id = tid; + }else { + tid = incrementals[snum][incpos].id; + } + if(typeof(incrementals[snum][incpos].src) != "undefined" || incrementals[snum][incpos].getContext) { + changeOpac(0,tid); + addClass(incrementals[snum][incpos],'current'); + shiftOpacity(tid,incrDuration); + setTimeout("nextInc()",incrDuration); + }else { + addClass(incrementals[snum][incpos],'current'); + nextInc(); + } + }else { + addClass(incrementals[snum][incpos],'current'); + nextInc(); + } + } else { + incpos--; + removeClass(incrementals[snum][incpos],'current'); + addClass(incrementals[snum][incpos], 'incremental'); + addClass(incrementals[snum][incpos - 1],'current'); + loadNote(); + } +} + +function nextInc() { + incpos++; + loadNote(); +} + +function toggle() { + var slideColl = GetElementsWithClassName('*','slide'); + var slides = document.getElementById('slideProj'); + var outline = document.getElementById('outlineStyle'); + var guru = document.getElementById('guru'); + if (!slides.disabled) { + stopPlay(); + if(audioSupport && !swfUnloaded) stopAllSounds(); + slides.disabled = true; + outline.disabled = false; + s5mode = false; + fontSize(1,'em'); + for (var n = 0; n < smax; n++) { + var slide = slideColl[n]; + slide.style.visibility = 'visible'; + } + if(guru) guru.style.visibility = 'hidden'; + } else { + slides.disabled = false; + outline.disabled = true; + s5mode = true; + fontScale(); + for (var n = 0; n < smax; n++) { + var slide = slideColl[n]; + slide.style.visibility = 'hidden'; + } + slideColl[snum].style.visibility = 'visible'; + if(guru && snum==0) guru.style.visibility = 'visible'; + } +} + +function showHide(action) { + var obj = GetElementsWithClassName('*','hideme')[0]; + switch (action) { + case 's': + obj.style.visibility = 'visible'; + break; + case 'h': + obj.style.visibility = 'hidden'; + break; + case 'k': + if (obj.style.visibility != 'visible') { + obj.style.visibility = 'visible'; + } else { + obj.style.visibility = 'hidden'; + } + break; + } +} + +function keys(key) { + if (!key) { + key = event; + key.which = key.keyCode; + } + if (helpmode) { + dumpHelpReq(); + return; + } + if (key.which == 84 && !isOp) { + toggle(); + return; + } + if (s5mode) { + if (autoMatic) { + switch (key.which) { + case 70: // f/ading on/off + switchFade(); + break; + case 83: // s/ound on/off + toggleSounds(); + break; + case 67: // c + showHide('k'); + break; + case 65: // a/utoplay on/off + stopPlay(); + break; + case 76: // l/ooping on/off + switchLoop(); + break; + case 80: // p/ause + case 32: // spacebar + pausePlay(); + break; + } + }else { + switch (key.which) { + case 8: // backspace = HELP + createHelpReq(); + break; + case 10: // return + case 13: // enter + if (window.event && isParentOrSelf(window.event.srcElement, 'controls')) return; + if (key.target && isParentOrSelf(key.target, 'controls')) return; + if(number != undef) { + goTo(number); + break; + } + case 32: // spacebar + case 34: // page down + case 39: // rightkey + case 40: // downkey + if(number != undef) { + go(number); + } else if (!incrementals[snum] || incpos >= incrementals[snum].length) { + go(1); + } else { + subgo(1); + } + break; + case 33: // page up + case 37: // leftkey + case 38: // upkey + if(number != undef) { + go(-1 * number); + } else if (!incrementals[snum] || incpos <= 0) { + go(-1); + } else { + subgo(-1); + } + break; + case 65: // a/utoplay + startPlay(); + break; + case 72: // h + case 36: // home + goTo(0); + break; + case 69: // e + case 35: // end + goTo(smax-1); + break; + case 70: // f/ade transitions on/off + switchFade(); + break; + case 76: // l/ooping on/off + switchLoop(); + break; + case 83: // s/ound support on/off + toggleSounds(); + break; + case 27: // escape + case 81: // q + if(!isOp) byby(); + break; + case 67: // c + showHide('k'); + break; + case 78: // n + createNotesWindow(); + break; + } + if (key.which < 48 || key.which > 57) { + 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 - 48); + } + } + } + return false; +} + +function clicker(e) { + number = undef; + var target; + if (window.event) { + target = window.event.srcElement; + e = window.event; + } else { + target = e.target; + } + if (target.href != null || hasValue(target.rel, 'external') || isParentOrSelf(target, 'controls') || isParentOrSelf(target,'embed') || isParentOrSelf(target,'object')) return true; + if (!helpmode) { + if (!e.which || e.which == 1) { + if (!incrementals[snum] || incpos >= incrementals[snum].length) { + go(1); + } else { + subgo(1); + } + } + } else { + dumpHelpReq(); + } +} + +function findSlide(hash) { + var target = null; + var slides = GetElementsWithClassName('*','slide'); + for (var i = 0; i < slides.length; i++) { + var targetSlide = slides[i]; + if ( (targetSlide.name && targetSlide.name == hash) + || (targetSlide.id && targetSlide.id == hash) ) { + target = targetSlide; + break; + } + } + while(target != null && target.nodeName != 'BODY') { + if (hasClass(target, 'slide')) { + return parseInt(target.id.slice(5)); + } + target = target.parentNode; + } + return null; +} + +function slideJump() { + if (window.location.hash == null) return; + var sregex = /^#slide(\d+)$/; + var matches = sregex.exec(window.location.hash); + var dest = null; + if (matches != null) { + dest = parseInt(matches[1]); + } else { + dest = findSlide(window.location.hash.slice(1)); + } + if (dest != null) + go(dest - snum); +} + +function fixLinks() { + var thisUri = window.location.href; + thisUri = thisUri.slice(0, thisUri.length - window.location.hash.length); + var aelements = document.getElementsByTagName('A'); + for (var i = 0; i < aelements.length; i++) { + var a = aelements[i].href; + var slideID = a.match('\#slide[0-9]{1,2}'); + if ((slideID) && (slideID[0].slice(0,1) == '#')) { + var dest = findSlide(slideID[0].slice(1)); + if (dest != null) { + if (aelements[i].addEventListener) { + aelements[i].addEventListener("click", new Function("e", + "if (document.getElementById('slideProj').disabled) return;" + + "go("+dest+" - snum); " + + "if (e.preventDefault) e.preventDefault();"), true); + } else if (aelements[i].attachEvent) { + aelements[i].attachEvent("onclick", new Function("", + "if (document.getElementById('slideProj').disabled) return;" + + "go("+dest+" - snum); " + + "event.returnValue = false;")); + } + } + } + } +} + +function externalLinks() { + if (!document.getElementsByTagName) return; + var anchors = document.getElementsByTagName('a'); + for (var i=0; i' + + '
' + + 'i<\/a>' + + '±<\/a>' + + '|<<\/a>' + + '<<\/a>' + + '><\/a>' + + '>|<\/a>' + + '
' + + '><\/a> ' + + '||<\/a> ' + + '∞<\/a> ' + + '5<\/a>·' + + '10<\/a>·' + + '15<\/a>·' + + '30<\/a>·' + + '60<\/a>' + + '<\/div><\/select>' + + '
' + + '▨<\/a> ' + + '<\/div>
' + + '♫<\/a> ' + + '◢<\/a>' + + ' +|| +|< + +
+
+ +
...
+
+ +
...
+
+ + +

Seminar

Daichi Toma

Seminar

Daichi Toma

What Is S5?

Operatic Origins

Incremental Display

Incremental Display II

PNG Alpha Tests

S5 Default File Structure

S5 Themes

Incremental S5 Themes

Incremental Animation

In Summary

...

...