<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: S5 1.1a3</title>
	<atom:link href="http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/feed/" rel="self" type="application/rss+xml" />
	<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/</link>
	<description>Things that Eric A. Meyer, CSS expert, writes about on his personal Web site; it&#039;s largely Web standards and Web technology, but also various bits of culture, politics, personal observations, and other miscellaneous stuff</description>
	<lastBuildDate>Fri, 19 Mar 2010 00:27:46 -0400</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>By: Micha</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1876</link>
		<dc:creator>Micha</dc:creator>
		<pubDate>Tue, 16 Nov 2004 11:07:35 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1876</guid>
		<description>Eric, I&#039;ve made the following changes to &lt;code&gt;ui2/slides3.js&lt;/code&gt;. As you can see, I removed the multiple &lt;code&gt;var vSize&lt;/code&gt; and &lt;code&gt;var hSize&lt;/code&gt; declarations in &lt;code&gt;fontScale() &lt;/code&gt; subroutine and revamped &lt;code&gt;fontSize() &lt;/code&gt; once again:your &lt;code&gt;if (!(s5ss = document.getElementById(&#039;s5ss&#039;)))&lt;/code&gt; check was ineffective for IE and I merged the almost identical &#039;if/else&#039; blocks together. Unfortunately I wasn&#039;t able to replicate the rule removing feature you wrote for Mozilla browsers since support for the &lt;code&gt;removeRule()&lt;/code&gt; 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.

&lt;code&gt;
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&#039;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 + &#039;px&#039;);
   if (isGe) {  // hack to counter incremental reflow bugs
      var obj = document.getElementsByTagName(&#039;body&#039;)[0];
      obj.style.display = &#039;none&#039;;
      obj.style.display = &#039;block&#039;;
   }
}

function fontSize(value) {
   if (!isIE) {
      if (!(s5ss = document.getElementById(&#039;s5ss&#039;))) {
         document.getElementsByTagName(&#039;head&#039;)[0].appendChild(s5ss = document.createElement(&quot;style&quot;));
         s5ss.setAttribute(&#039;media&#039;,&#039;screen, projection&#039;);
         s5ss.setAttribute(&#039;id&#039;,&#039;s5ss&#039;);
      }
      while (s5ss.lastChild) s5ss.removeChild(s5ss.lastChild);
      s5ss.appendChild(document.createTextNode(&#039;body {font-size: &#039; + value + &#039; !important;}&#039;));
   } else {
      if (&#039;undefined&#039; == document[&#039;s5ss&#039;] + &#039;&#039;) {
         document.createStyleSheet();
         document.s5ss = document.styleSheets[document.styleSheets.length - 1];
      }
      document.s5ss.addRule(&#039;body&#039;,&#039;font-size: &#039; + value + &#039; !important;&#039;);
   }
}

...

window.onresize = function () { setTimeout(&#039;fontScale()&#039;, 50) }&lt;/code&gt;</description>
		<content:encoded><![CDATA[<p>Eric, I&#8217;ve made the following changes to <code>ui2/slides3.js</code>. As you can see, I removed the multiple <code>var vSize</code> and <code>var hSize</code> declarations in <code>fontScale() </code> subroutine and revamped <code>fontSize() </code> once again:your <code>if (!(s5ss = document.getElementById('s5ss')))</code> check was ineffective for IE and I merged the almost identical &#8216;if/else&#8217; blocks together. Unfortunately I wasn&#8217;t able to replicate the rule removing feature you wrote for Mozilla browsers since support for the <code>removeRule()</code> 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.</p>
<p><code><br />
function fontScale() {<br />
   if (!s5mode) return false;<br />
   var vScale = 22;  // both yield 32 (after rounding) at 1024x768<br />
   var hScale = 32;  // perhaps should auto-calculate based on theme's declared value?<br />
   var vSize = 700;  // assuming 1024x768, minus chrome and such<br />
   var hSize = 1024; // these do not account for kiosk mode or Opera Show<br />
   if (window.innerHeight) {<br />
      vSize = window.innerHeight;<br />
      hSize = window.innerWidth;<br />
   } else if (document.documentElement.clientHeight) {<br />
      vSize = document.documentElement.clientHeight;<br />
      hSize = document.documentElement.clientWidth;<br />
   } else if (document.body.clientHeight) {<br />
      vSize = document.body.clientHeight;<br />
      hSize = document.body.clientWidth;<br />
   }<br />
   var newSize = Math.min(Math.round(vSize/vScale),Math.round(hSize/hScale));<br />
   fontSize(newSize + 'px');<br />
   if (isGe) {  // hack to counter incremental reflow bugs<br />
      var obj = document.getElementsByTagName('body')[0];<br />
      obj.style.display = 'none';<br />
      obj.style.display = 'block';<br />
   }<br />
}</p>
<p>function fontSize(value) {<br />
   if (!isIE) {<br />
      if (!(s5ss = document.getElementById('s5ss'))) {<br />
         document.getElementsByTagName('head')[0].appendChild(s5ss = document.createElement("style"));<br />
         s5ss.setAttribute('media','screen, projection');<br />
         s5ss.setAttribute('id','s5ss');<br />
      }<br />
      while (s5ss.lastChild) s5ss.removeChild(s5ss.lastChild);<br />
      s5ss.appendChild(document.createTextNode('body {font-size: ' + value + ' !important;}'));<br />
   } else {<br />
      if ('undefined' == document['s5ss'] + '') {<br />
         document.createStyleSheet();<br />
         document.s5ss = document.styleSheets[document.styleSheets.length - 1];<br />
      }<br />
      document.s5ss.addRule('body','font-size: ' + value + ' !important;');<br />
   }<br />
}</p>
<p>...</p>
<p>window.onresize = function () { setTimeout('fontScale()', 50) }</code></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Roy</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1866</link>
		<dc:creator>Roy</dc:creator>
		<pubDate>Mon, 15 Nov 2004 05:43:53 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1866</guid>
		<description>Jason: could you please send me that &quot;Play&quot; feature? Thanks.

ftp://schestowitz.com (username: ftp@schestowitz.com)</description>
		<content:encoded><![CDATA[<p>Jason: could you please send me that &#8220;Play&#8221; feature? Thanks.</p>
<p><a href="ftp://schestowitz.com" rel="nofollow">ftp://schestowitz.com</a> (username: <a href="mailto:ftp@schestowitz.com">ftp@schestowitz.com</a>)</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Eric</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1865</link>
		<dc:creator>Eric</dc:creator>
		<pubDate>Mon, 15 Nov 2004 04:11:34 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1865</guid>
		<description>Scott: I&#039;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?</description>
		<content:encoded><![CDATA[<p>Scott: I&#8217;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?</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Scott DeMers</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1864</link>
		<dc:creator>Scott DeMers</dc:creator>
		<pubDate>Mon, 15 Nov 2004 03:15:13 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1864</guid>
		<description>I&#039;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!</description>
		<content:encoded><![CDATA[<p>I&#8217;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!</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Eric</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1863</link>
		<dc:creator>Eric</dc:creator>
		<pubDate>Mon, 15 Nov 2004 02:56:03 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1863</guid>
		<description>Christian: Unfortunately, your slide show is pretty thoroughly shattered in Safari.  I&#039;ll look through the code to see what you&#039;ve done, but unless the Safari problems are fixed I&#039;m not sure how much I&#039;ll be able to use.  Don&#039;t get me wrong-- I definitely appreciate the effort you&#039;ve put forth!

Jason: I&#039;d like to see the code.  Send it on over to me via e-mail; my contact address is on &lt;a href=&quot;/eric/&quot;&gt;my personal page&lt;/a&gt;.</description>
		<content:encoded><![CDATA[<p>Christian: Unfortunately, your slide show is pretty thoroughly shattered in Safari.  I&#8217;ll look through the code to see what you&#8217;ve done, but unless the Safari problems are fixed I&#8217;m not sure how much I&#8217;ll be able to use.  Don&#8217;t get me wrong&#8211; I definitely appreciate the effort you&#8217;ve put forth!</p>
<p>Jason: I&#8217;d like to see the code.  Send it on over to me via e-mail; my contact address is on <a href="/eric/">my personal page</a>.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Jason Karns</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1862</link>
		<dc:creator>Jason Karns</dc:creator>
		<pubDate>Mon, 15 Nov 2004 02:07:48 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1862</guid>
		<description>I have added a &quot;play&quot; feature that will proceed to the next slide at preset intervals. (in seconds) It is compatible with Mozilla and IE but hasn&#039;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&#039;t have any webspace to post it so if you&#039;re interested, shoot me a request: karnsj@cse.ohio-state.edu</description>
		<content:encoded><![CDATA[<p>I have added a &#8220;play&#8221; feature that will proceed to the next slide at preset intervals. (in seconds) It is compatible with Mozilla and IE but hasn&#8217;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&#8217;t have any webspace to post it so if you&#8217;re interested, shoot me a request: <a href="mailto:karnsj@cse.ohio-state.edu">karnsj@cse.ohio-state.edu</a></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Lars Olesen</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1859</link>
		<dc:creator>Lars Olesen</dc:creator>
		<pubDate>Sun, 14 Nov 2004 22:04:52 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1859</guid>
		<description>S5 is brilliant. And it just gets better. I like Christian&#039;s addons. Don&#039;t know if it is necessary with a styleswitcher, but the menu in the bottom corner IMHO is visually more appealing.

I don&#039;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.</description>
		<content:encoded><![CDATA[<p>S5 is brilliant. And it just gets better. I like Christian&#8217;s addons. Don&#8217;t know if it is necessary with a styleswitcher, but the menu in the bottom corner IMHO is visually more appealing.</p>
<p>I don&#8217;t know if you seen <a href="http://www.solitude.dk/archives/OperaShow/" rel="nofollow">http://www.solitude.dk/archives/OperaShow/</a>. It is kind of simple, but a nice way quickly to get a list of shows, and it supports both Opera and S5.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: christian</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1856</link>
		<dc:creator>christian</dc:creator>
		<pubDate>Sun, 14 Nov 2004 15:08:33 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1856</guid>
		<description>I have added &lt;a href=&#039;http://aleto.ch/test/slide6a.html&#039;&gt;a Font Scalling Feature&lt;/a&gt;. ( 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 &#039; displayControl &#039;.

I have added one more Slide with a little bit more explanations.

See what you can use from it.</description>
		<content:encoded><![CDATA[<p>I have added <a href='http://aleto.ch/test/slide6a.html'>a Font Scalling Feature</a>. ( Tested in Opera, Fox and IE. Any Browser Bug/Shortcomming get much more important with it ).</p>
<p>The Font Size does scale on Load and on Resize. The behavior can be controlled ( stopped ) in the meta tag &#8216; displayControl &#8216;.</p>
<p>I have added one more Slide with a little bit more explanations.</p>
<p>See what you can use from it.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Roy</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1852</link>
		<dc:creator>Roy</dc:creator>
		<pubDate>Sun, 14 Nov 2004 06:46:18 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1852</guid>
		<description>Keep up the good work, Eric. I love S&lt;sup&gt;5&lt;/sup&gt;.</description>
		<content:encoded><![CDATA[<p>Keep up the good work, Eric. I love S<sup>5</sup>.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: christian</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1848</link>
		<dc:creator>christian</dc:creator>
		<pubDate>Sat, 13 Nov 2004 21:10:44 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1848</guid>
		<description>I have made &lt;a href=&#039;http://aleto.ch/test/slide6.html&#039;&gt;a version&lt;/a&gt; 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 &#039;displayControl&#039;. ( 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 ).</description>
		<content:encoded><![CDATA[<p>I have made <a href='http://aleto.ch/test/slide6.html'>a version</a> where the inslide jumps do work too in Opera.</p>
<p>In the upper right corner is a menu to choose a theme.</p>
<p>Quick jumper window, theme menu and controls are created depending from the value in the metatag &#8216;displayControl&#8217;. ( menu,themes,controls )</p>
<p>A little enhancement: if one click in the left half of the window it goes back ( and forward in the right side ).</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: christian</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1846</link>
		<dc:creator>christian</dc:creator>
		<pubDate>Sat, 13 Nov 2004 15:36:11 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1846</guid>
		<description>A little example for &lt;a href=&#039;http://aleto.ch/test/styleSwitcher2b.html&#039;&gt;such a dynamically created style switcher menu&lt;/a&gt;.

But perhaps i do missunderstand that feature.</description>
		<content:encoded><![CDATA[<p>A little example for <a href='http://aleto.ch/test/styleSwitcher2b.html'>such a dynamically created style switcher menu</a>.</p>
<p>But perhaps i do missunderstand that feature.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Leung WC</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1845</link>
		<dc:creator>Leung WC</dc:creator>
		<pubDate>Sat, 13 Nov 2004 15:25:59 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1845</guid>
		<description>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&#039;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...</description>
		<content:encoded><![CDATA[<p>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&#8217;t be a big problem for Gecko, but I wonder if the IE code will break.</p>
<p>BTW, for a end user, to creating such JS file, a dedicated automation tool (probably in EXE or similar format) is needed. So decide&#8230;</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: christian</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1843</link>
		<dc:creator>christian</dc:creator>
		<pubDate>Sat, 13 Nov 2004 14:50:21 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1843</guid>
		<description>I overlooked your last comment. I don&#039;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.</description>
		<content:encoded><![CDATA[<p>I overlooked your last comment. I don&#8217;t see the problem with the alternate Stylesheets. </p>
<p>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. </p>
<p>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.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: christian</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1842</link>
		<dc:creator>christian</dc:creator>
		<pubDate>Sat, 13 Nov 2004 14:36:28 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1842</guid>
		<description>actually a bit more logical in &lt;a href=&#039;http://aleto.ch/test/slide5a3.html&#039;&gt;that way&lt;/a&gt;.

- in the head: &lt;meta name=&quot;displayControl&quot; content=&quot;menu, controls&quot; /&gt;

- in the onload:
&lt;code&gt;
	var metas=document.getElementsByTagName(&#039;meta&#039;), meta, i;
	for(i=0; meta=metas[i]; i++) {
		if(/displayControl/i.test(meta.getAttribute(&#039;name&#039;)))
			doControls=meta.getAttribute(&#039;content&#039;);
	}
&lt;/code&gt;
where the doControls is global.

Then you do ( or do not ) create the control elements ( if(/menu/i.test(doControls)) /*instruction */ ).</description>
		<content:encoded><![CDATA[<p>actually a bit more logical in <a href='http://aleto.ch/test/slide5a3.html'>that way</a>.</p>
<p>- in the head: &lt;meta name=&#8221;displayControl&#8221; content=&#8221;menu, controls&#8221; /&gt;</p>
<p>- in the onload:<br />
<code><br />
	var metas=document.getElementsByTagName('meta'), meta, i;<br />
	for(i=0; meta=metas[i]; i++) {<br />
		if(/displayControl/i.test(meta.getAttribute('name')))<br />
			doControls=meta.getAttribute('content');<br />
	}<br />
</code><br />
where the doControls is global.</p>
<p>Then you do ( or do not ) create the control elements ( if(/menu/i.test(doControls)) /*instruction */ ).</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Eric</title>
		<link>http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1841</link>
		<dc:creator>Eric</dc:creator>
		<pubDate>Sat, 13 Nov 2004 14:27:48 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comment-1841</guid>
		<description>Daniel: I know what NaN means.  I just don&#039;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&#039;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&#039;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&#039;t use the S&lt;sup&gt;5&lt;/sup&gt; 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 S&lt;sup&gt;5&lt;/sup&gt; routines and fix them without breaking things for other browsers, and then we&#039;ll just bypass the built-in Opera Show altogether.  I&#039;m not, at this point, particularly motivated to do that.  What I will do before 1.1 goes final is make sure Opera doesn&#039;t get stuck with faded-out slides that can&#039;t be incrementally displayed.  That&#039;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&#039;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&#039;m overlooking something.  It wouldn&#039;t be the first time.</description>
		<content:encoded><![CDATA[<p>Daniel: I know what NaN means.  I just don&#8217;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&#8217;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&#8217;re displaying per inch.  Everywhere else, things would go seriously awry.</p>
<p>Fabian: I agree that it would be nice to have incrementals work in Opera.  The problem is that Opera Show doesn&#8217;t use the S<sup>5</sup> 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 S<sup>5</sup> routines and fix them without breaking things for other browsers, and then we&#8217;ll just bypass the built-in Opera Show altogether.  I&#8217;m not, at this point, particularly motivated to do that.  What I will do before 1.1 goes final is make sure Opera doesn&#8217;t get stuck with faded-out slides that can&#8217;t be incrementally displayed.  That&#8217;s something to handle in the beta phase. </p>
<p>Nico: Thanks for the feedback.</p>
<p>Christian: my thoughts for the control-display problem run along similar lines.  As for alternate style sheets, I&#8217;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&#8217;m overlooking something.  It wouldn&#8217;t be the first time.</p>
]]></content:encoded>
	</item>
</channel>
</rss>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head profile="http://gmpg.org/xfn/1">
<title>meyerweb.com</title>
<link rel="openid.server" href="http://www.myopenid.com/server">
<link rel="openid.delegate" href="http://emeyer.myopenid.com/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="shortcut icon" href="/favicon.ico"><link rel="home" href="http://meyerweb.com/" title="Home" ><link rel="stylesheet" href="http://meyerweb.com/ui/meyerweb.css" type="text/css" media="screen, projection"><link rel="stylesheet" href="http://meyerweb.com/ui/theme.css" type="text/css" media="screen, projection" id="themeLink"><link rel="stylesheet" href="http://meyerweb.com/ui/print.css" type="text/css" media="print"><script src="http://meyerweb.com/ui/addresses.js" type="text/javascript"></script><link rel="stylesheet" href="/ui/wordpress.css" type="text/css" media="screen">
<link rel="stylesheet" href="/ui/tfe.css" type="text/css" media="screen">
<link rel="stylesheet" href="/ui/home.css" type="text/css" media="screen">
<link rel="alternate" type="application/rss+xml" title="Thoughts From Eric" href="/eric/thoughts/rss2/full" />
<link rel="alternate" type="application/rss+xml" title="Thoughts From Eric (only technical posts)" href="/eric/thoughts/category/tech/rss2/full" />
<link rel="alternate" type="application/rss+xml" title="Thoughts From Eric (only personal posts)" href="/eric/thoughts/category/personal/rss2/full" />
<link rel="alternate" type="application/rss+xml" title="Distractions" href="/eric/thoughts/recent-links/rss2" />
<link rel="alternate" type="application/rss+xml" title="Excuse of the Day" href="/feeds/excuse/rss20.xml" />
</head>
<body id="www-meyerweb-com" class="hpg">

<div id="sitemast"><h1><a href="/"><span>meyerweb</span>.com</a></h1></div><div id="search"><h4>Exploration</h4><!-- SiteSearch Google --><form method="get" action="http://www.google.com/custom" target="_top"><div><input type="hidden" name="domains" value="meyerweb.com"></input><label for="sbb" style="display: none">Submit search form</label><input type="submit" name="sa" value="Google Search" id="sbb"></input><label for="sbi" style="display: none">Enter your search terms</label><input type="text" name="q" size="31" maxlength="255" value="" id="sbi"></input><p><input type="radio" name="sitesearch" value="meyerweb.com" checked id="ss1"></input><label for="ss1" title="Search meyerweb.com">meyerweb.com</label><input type="radio" name="sitesearch" value="" id="ss0"></input><label for="ss0" title="Search the Web">Web</label></p><input type="hidden" name="client" value="pub-3772084027748653"></input><input type="hidden" name="forid" value="1"></input><input type="hidden" name="ie" value="ISO-8859-1"></input><input type="hidden" name="oe" value="ISO-8859-1"></input><input type="hidden" name="safe" value="active"></input><input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input><input type="hidden" name="hl" value="en"></input></div></form><!-- SiteSearch Google --><!-- <form method="get" action="http://www.google.com/custom"><div><input type="submit" name="sa" value="Search"><input type="text" name="q" size="20" maxlength="255" value=""><input type="hidden" name="sitesearch" value="meyerweb.com"></div></form><small><a href="http://www.google.com/search">Powered by Google</a></small> --></div><div id="main"><div class="skipper">Skip to: <a href="#extra">site navigation/presentation</a></div><div class="skipper">Skip to: <a href="#thoughts">Thoughts From Eric</a></div>
<div id="thoughts">


<div class="entry">
<h3><a href="http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/" rel="bookmark" title="Permanent Link: S<sup>5</sup> 1.1a3">S<sup>5</sup> 1.1a3</a></h3>
<ul class="meta">
<li class="date">Sat 13 Nov 2004</li>
<li class="time">0004</li>
<li class="cat"><a href="http://meyerweb.com/eric/thoughts/category/tech/s5/" title="View all posts in S5" rel="category tag">S5</a><br> <a href="http://meyerweb.com/eric/thoughts/category/tech/tools/" title="View all posts in Tools" rel="category tag">Tools</a></li>
<li class="cmt"><a href="http://meyerweb.com/eric/thoughts/2004/11/13/s5-11a3/#comments">21 responses</a></li>
<li></li><li></li></ul>

<div class="text">
<p>
We&#8217;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 <code>ul</code> or <code>ol</code> 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 <a href="/eric/tools/s5/s5-testbed.html">alpha testbed</a>.  In the first slide, all the bullets are displayed incrementally; you move through them by using any &#8220;next&#8221; action (keyboard or mouse).  You can also back up using a &#8220;previous&#8221; 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.
</p>
<p>
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 <code>current</code>), 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&#8217;ll get around to tidying that up later.
</p>
<p>
The one thing I&#8217;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 &#8220;un-highlights&#8221; as you move backward through the points.  I&#8217;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&#8217;d like to hear feedback on what people think about the way the incremental display works now, and how it could be better.
</p>
<p>
For those who want to play around with incremental display, you add a class of <code>inc</code> to a list whose items you want to be incremental.  If you want a slide to start with the first point highlighted, add <code>psf</code> to the class value, so you have <code>class="inc psf"</code>.  If you want to reveal arbitrary elements one by one on a slide, individually class them with <code>inc</code>.
</p>
<p>
I don&#8217;t have all of the contributed code merged into the JS yet, but I&#8217;ve seen everyone&#8217;s contributions from earlier posts, so please be patient.  I&#8217;m still at a loss as to how to make the intra-slide links work in Safari, and could use help figuring out what&#8217;s wrong there.  To test it, hit the &#8220;skip to summary&#8221; link on <a href="/eric/tools/s5/s5-testbed.html#slide1">slide 1</a> of the testbed.  For that matter, if you uncomment the <code>li:after</code> rule in <code>pretty.css</code>, you&#8217;ll see that Safari keeps adding &#8220;NaN&#8221; into the classes of incrementally-displayed list items when you move back and forth from one incremental slide to another.  I can&#8217;t figure that one out, either.  Help is always appreciated.
</p>
<p>
So from my original 1.1a2 to-do list, the following are still left to do:
</p>
<ol>
<li>A way to choose whether to show/hide all of the navigation controls, or just the menu. Indicating the preferred behavior via a <code>meta</code> 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.</li>
<li>Better, possibly more dynamic, theme selection.  I still don&#8217;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.</li>
<li>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&#8217;m actually leaning pretty heavily toward dropping this, because I don&#8217;t see a pressing need to include it at this stage.  For the purposes of scaling foreground iamges, it wouldn&#8217;t be much more powerful than the author managing scaling via CSS.</li>
</ol>
<p>
And there you have the current state of s<sup>5</sup> development.  Feedback is welcome.  Ever forward!
</p></div>

</div>

</div>
<p style="font-size: 90%; text-align: right; margin-top: 0.5em; padding-top: 0;">(If you care, there's even an <a href="/eric/thoughts/page/2/">archive of previous thoughts</a>...)</p>

</div><div id="extra"><div class="panel" id="archipelago"><h4>Identity Archipelago</h4><ul><li><a href="http://flickr.com/photos/meyerweb/" rel="me">Flickr</a></li><li><a href="http://twitter.com/meyerweb/" rel="me">Twitter</a></li><li><a href="http://dopplr.com/traveller/meyerweb">Dopplr</a></li><li><a href="http://www.linkedin.com/in/meyerweb" rel="me">LinkedIn</a></li><li><a href="http://technorati.com/profile/emeyer" rel="me">Technorati</a></li></ul></div><div class="panel" id="pointers"><h4>Projects Elsewhere</h4><ul><li><a href="http://aneventapart.com/">An Event Apart</a></li><li><a href="http://complexspiral.com/">Complex Spiral Consulting</a></li><li><a href="http://www.webassist.com/go/css/emeyer/">CSS Sculptor</a></li><li><a href="http://css-discuss.org/">css-discuss</a></li><li><a href="http://microformats.org/">Microformats</a></li><li><a href="http://s5project.org/">S5</a></li></ul></div><div class="panel" id="tour"><ul><li><a href="http://fray.com/issue3/"><img src="http://fray.com/images/i3c.gif" alt="Fray Contributor (Issue 3: Sex &amp; Death)" /></a></li><!-- <li><a href="http://www.webassist.com/go/css/emeyer/"><img src="/pix/CS_ad_180x109.jpg" alt="CSS Sculptor for Dreamweaver" style="max-width: 100%;" /></a></li> --></ul></div><div class="panel">
<h4>Recently Tweeted</h4>
<p class="more"><a href="http://twitter.com/meyerweb">see more</a></p>
<p>Spent the afternoon manhandling a rototiller whose clutch design was exactly the inverse of anything resembling reasonable or safe. <small>&#8211;tweeted 2 hours, 2 minutes ago</small></p>
</div><div id="sideblog" class="panel">
<h4>Distractions</h4>
<p class="more">
<a href="/eric/thoughts/recent-links/">archive</a>
</p>
<ul>
<li><a href="http://tweetagewasteland.com/2010/03/my-head-is-in-the-cloud/" title="March 18 | &#8220;I sense that my addiction to the realtime stream is only making room for the consumption of a faster stream.&#8221;">My Head is in the Cloud</a> <small>[via <a href="http://daringfireball.net/">John</a>]</small></li>
<li><a href="http://8bitnyc.com/" title="March 17 | All of a sudden I want to establish a mission in Central Park and negotiate with the natives for gold and food.">8-Bit NYC</a></li>
<li><a href="http://www.youtube.com/watch?v=nFicqklGuB0&amp;feature=player_embedded" title="March 12 | Wry comment expressing my appreciation of the creative derivativeness of this video and its uncanny accuracy in mocking common tropes.">Academy Award Winning Movie Trailer</a></li>
<li><a href="http://www.youtube.com/watch?v=414TmP12WAU" title="March 9 | &#8220;Apple juice&#8230; for half price!&#8221;  More like twice PRICELESS.  (Note: If you&#8217;re at work, don your headphones.)">Happy in Paraguay</a> <small>[via <a href="http://unstoppablerobotninja.com/">Ethan</a>]</small></li>
<li><a href="http://www.youtube.com/watch?v=9V5ubAOeOBk&amp;feature=player_embedded" title="February 10 | This is approximately the best thing ever.">U900 -Walk Don&#8217;t Run (Isogabamaware)</a></li>
<li><a href="http://www.456bereastreet.com/archive/201002/sifr_default_css_hides_content_from_at_least_one_screen_reader/?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A 456bereastreet %28456 Berea Street%29" title="February 8 | -9999px comes through again, but I really wish we were beyond that kind of thing.">sIFR default CSS hides content from at least one screen reader</a></li>
<li><a href="http://www.macosxhints.com/article.php?story=20100117064356428" title="February 8 | Storing this for future use.">Take a picture with the iSight camera when a folder is opened</a></li>
<li><a href="http://mingle2.com/blog/view/web-developer-mind" title="February 4 | Mostly valid.  (SEE WHAT I DID THERE?)">The Mind of a Web Developer: An Illustrated Diagram</a></li>
<li><a href="http://www.theonion.com/content/news/science_channel_refuses_to_dumb" title="January 28 | &#8220;Punkin Chunkin, for Christ&#8217;s sake&#8230; What more do you people want?&#8221;">Science Channel Refuses To Dumb Down Science Any Further</a></li>
<li><a href="http://www.mailchimp.com/blog/project-omnivore-declassified/" title="January 27 | Sounds like quite a feat.  But I wonder how we&#8217;d feel if Microsoft or Google announced the same kind of thing on their e-mail services.">MailChimp&#8217;s Project Omnivore: Declassified</a></li>
<li><a href="http://www.politifact.com/truth-o-meter/statements/2010/jan/25/carolyn-maloney/congresswoman-says-democratic-presidents-create-mo/" title="January 26 | &#8220;Obviously, luck matters a lot, but when there is a consistent pattern over more than 60 years, it starts to look like more than just luck.&#8221;">Congresswoman says Democratic presidents create more private-sector jobs</a></li>
<li><a href="http://www.ted.com/talks/taylor_mali_what_teachers_make.html" title="January 25 | Truth.">Taylor Mali: What teachers make</a></li>
<li><a href="http://notebook.johnmartz.com/how-websites-work?c=1" title="January 22 | At last, the truth is out and I can stop pretending:  beatific monkeys are what makes it all go.">How websites work</a></li>
</ul>
</div>
<div class="panel" id="advisory">
<div class="guarded">
<a href="http://blogadvisorysystem.com/"><img src="/pix/bas/guarded.png" alt="Blog Advisory System Alert Level: Guarded"></a>
</div>
</div>

<div class="panel" id="excuse">
<h4>The <a href="/feeds/excuse/">excuse of the day</a> is</h4>
<p>Internet 1 traffic is being routed onto Internet 2</p>
</div>

<div class="panel" id="extras">
<h4>Extras</h4>
<ul>
<li><a href="/feeds/">Feeds</a> &#8226;</li>
<li><a href="/eric/faq.html">FAQ</a> &#8226;</li>
<li><a href="/family.html">Family</a></li>
</ul>
</div>

</div>

<div id="navigate">
<h4>Navigation</h4>
<ul id="navlinks">
<li id="archLink"><a href="/eric/thoughts/">Archives</a></li>
<li id="cssLink"><a href="/eric/css/">CSS</a></li>
<li id="toolsLink"><a href="/eric/tools/">Toolbox</a></li>
<li id="writeLink"><a href="/eric/writing.html">Writing</a></li>
<li id="speakLink"><a href="/eric/talks/">Speaking</a></li>
<li id="otherLink"><a href="/other/">Leftovers</a></li>
<li id="aboutsite"><a href="/ui/about.html">About this site</a></li>
</ul>
</div>

<div id="footer">
<p class="sosumi">All contents of this site, unless otherwise noted, are &copy;1995-2008 <strong>Eric A. and Kathryn S. Meyer</strong>.  All Rights Reserved.</p>
<p>"<a href="/eric/thoughts/">Thoughts From Eric</a>" is powered by the &uuml;bercool <a href="http://wordpress.org/">WordPress</a></p>
</div>
</body>
</html>
