csswg/css3-images Overview.html,1.204,1.205 Overview.src.html,1.212,1.213

Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv5034

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Added another element() example.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.204
retrieving revision 1.205
diff -u -d -r1.204 -r1.205
--- Overview.html	11 Nov 2011 00:37:36 -0000	1.204
+++ Overview.html	11 Nov 2011 00:52:37 -0000	1.205
@@ -565,6 +565,51 @@
    element reference identifier</i></a>; that is determined by the host
    language.)
 
+  <div class=example>
+   <p>The &lsquo;<code class=css>element()</code>&rsquo; function can be put
+    to many uses. For example, it can be used to show a preview of the
+    previous or next slide in a slideshow:</p>
+
+   <pre>
+&lt;!DOCTYPE html>
+&lt;script>
+function navigateSlides() {
+	var currentSlide = ...;
+	var prevSlide = currentSlide.previousElementSibling;
+	var nextSlide = currentSlide.nextElementSibling;
+	document.CSSElementMap['prev-slide'] = prevSlide;
+	document.CSSElementMap['next-slide'] = nextSlide;
+}
+&lt;/script>
+&lt;style>
+#prev-preview, #next-preview { 
+	position: fixed;
+	...
+}
+#prev-preview { background: element(prev-slide); }
+#next-preview { background: element(next-slide); }
+&lt;/style>
+&lt;div id='prev-preview'>&lt;/div>
+&lt;div id='next-preview'>&lt;/div>
+&lt;section class='slide'>...&lt;/section>
+&lt;section class='slide current-slide'>...&lt;/section>
+...</pre>
+
+   <p>In this example, the <code>navigateSlides</code> function updates
+    HTML's <code>CSSElementMap</code> to always point to the next and
+    previous slides, which are then displayed in small floating boxes
+    alongside the slides. Since you can't interact with the slides through
+    the &lsquo;<code class=css>element()</code>&rsquo; function (it's just an
+    image), you could even use <code>click</code> handlers on the preview
+    boxes to help navigate through the page.
+
+   <p class=note>Note: A future version of this specification may allow more
+    than just ID selectors to be passed to &lsquo;<code
+    class=css>element()</code>&rsquo;, allowing an example like this to be
+    done with even less javascript - something like &lsquo;<code
+    class=css>background: element(.current-slide + .slide);</code>&rsquo;.</p>
+  </div>
+
   <p>The image represented by the &lsquo;<code
    class=css>element()</code>&rsquo; function can vary based on a number of
    factors. The function must represent the image described by the first set

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.212
retrieving revision 1.213
diff -u -d -r1.212 -r1.213
--- Overview.src.html	11 Nov 2011 00:37:36 -0000	1.212
+++ Overview.src.html	11 Nov 2011 00:52:38 -0000	1.213
@@ -269,6 +269,39 @@
 
 	<p>If the argument to the ''element()'' function is an ID selector, the function references the element matched by the selector.  If it's an identifier, the function references the element whose <dfn>CSS element reference identifier</dfn> is the given identifier.  (CSS does not define how an element acquires a <i>CSS element reference identifier</i>; that is determined by the host language.)</p>
 
+	<div class='example'>
+		<p>The ''element()'' function can be put to many uses.  For example, it can be used to show a preview of the previous or next slide in a slideshow:</p>
+
+		<pre>
+&lt;!DOCTYPE html>
+&lt;script>
+function navigateSlides() {
+	var currentSlide = ...;
+	var prevSlide = currentSlide.previousElementSibling;
+	var nextSlide = currentSlide.nextElementSibling;
+	document.CSSElementMap['prev-slide'] = prevSlide;
+	document.CSSElementMap['next-slide'] = nextSlide;
+}
+&lt;/script>
+&lt;style>
+#prev-preview, #next-preview { 
+	position: fixed;
+	...
+}
+#prev-preview { background: element(prev-slide); }
+#next-preview { background: element(next-slide); }
+&lt;/style>
+&lt;div id='prev-preview'>&lt;/div>
+&lt;div id='next-preview'>&lt;/div>
+&lt;section class='slide'>...&lt;/section>
+&lt;section class='slide current-slide'>...&lt;/section>
+...</pre>
+
+		<p>In this example, the <code>navigateSlides</code> function updates HTML's <code>CSSElementMap</code> to always point to the next and previous slides, which are then displayed in small floating boxes alongside the slides.  Since you can't interact with the slides through the ''element()'' function (it's just an image), you could even use <code>click</code> handlers on the preview boxes to help navigate through the page.  
+
+		<p class='note'>Note: A future version of this specification may allow more than just ID selectors to be passed to ''element()'', allowing an example like this to be done with even less javascript - something like ''background: element(.current-slide + .slide);''.</p>
+	</div>
+
 	<p>The image represented by the ''element()'' function can vary based on a number of factors.  The function must represent the image described by the first set of conditions, following, that are true:</p>
 
 	<dl>

Received on Friday, 11 November 2011 00:52:45 UTC