Permalink
Browse files

move css for controls (projection) to js

  • Loading branch information...
1 parent 0c849fa commit 16db1aa715cf50edb621bb568391acd74fdb291f @geraldb geraldb committed Nov 1, 2011
Showing with 64 additions and 54 deletions.
  1. +61 −1 shared/jquery.slideshow.js
  2. +3 −53 shared/projection.css.less
@@ -345,8 +345,68 @@ Slideshow.createControls = function()
// if no div.layout exists, create one
if( $( '.layout' ).length == 0 )
- $( "<div class='layout'></div>").appendTo( 'body' );
+ $( 'body' ).append( "<div class='layout'></div>");
+/********* layout block structure
+ *
+ * .layout
+ * > #header
+ * > #footer
+ * > #controls (holding navigation controls)
+ * > #navLinks
+ * > #toggle
+ * > #navList
+ * > #jumplist
+ * > #currentSlide (e.g. 1/7)
+ */
+
+ // add css styles for controls
+
+ // -- format for (navigation) #controls block
+ // -- format for #currentSlide block
+
+ var ctrlStyleProjection =
+"<style media='projection'> \n"+
+" #controls { position: fixed; \n"+
+" left: 60%; bottom: 0; \n"+
+" width: 40%; \n"+
+" z-index: 100; \n"+
+" text-align: right; \n"+
+" font: bold 1.2em Verdana, Helvetica, sans-serif; \n"+
+" } \n"+
+" \n"+
+" #controls :focus { outline: 1px dotted white;} \n"+
+" \n"+
+" #controls #navLinks { text-align: right; margin: 0; visibility: hidden; } \n"+
+
+" \n"+
+" #controls #navLinks a { padding: 0; margin: 0 0.5em; cursor: pointer; border: none; } \n"+
+" \n"+
+" #controls #navLinks :link, \n"+
+" #controls #navLinks :visited {text-decoration: none; } \n"+
+" \n"+
+" #controls #navList #jumplist { background: white; color: black; } \n"+
+" \n"+
+" \n"+
+" //////////////////////////////////////////// \n"+
+" // format for currentSlide block ( e.g. 2/20 ) \n"+
+" \n"+
+" #currentSlide { position: fixed; \n"+
+" left: 45%; bottom: 1em; \n"+
+" width: 10%; \n"+
+" z-index: 10; \n"+
+" text-align: center; \n"+
+" font-size: 0.8em; \n"+
+" } \n"+
+" \n"+
+" #currentSlide :link, \n"+
+" #currentSlide :visited { text-decoration: none; } \n"+
+"</style>";
+
+
+ $( 'body' ).append( ctrlStyleProjection );
+
+
$( '.layout' )
.append( "<div id='controls'>" )
.append( "<div id='currentSlide'>" );
@@ -15,7 +15,7 @@ body,
.presentation { margin: 0; padding: 0; }
-.slide { display: none;
+.slide { display: block;
position: absolute;
top: 0; left: 0;
margin: 0;
@@ -25,23 +25,15 @@ body,
z-index: 2;
}
-#slide1 { display: block; } /* todo: check if this is needed? already handled w/ js? */
.notes { display: none; } /* handout notes/note (use note? handout? notes? */
-/********* format layout block
+/***** layout block structure
*
* .layout
* > #header
* > #footer
- * > #controls (holding navigation controls)
- * > #navLinks
- * > #toggle
- * > #navList
- * > #jumplist
- * > #currentSlide (e.g. 1/7)
- *
*/
.layout {
@@ -67,46 +59,4 @@ body,
h1 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; }
h2 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; font-style: italic; }
}
-} /* end .layout */
-
-/*************************
- * format for navigation controls
- */
-
-
-#controls { position: fixed;
- left: 60%; bottom: 0;
- width: 40%;
- z-index: 100;
- text-align: right;
- font: bold 1.2em Verdana, Helvetica, sans-serif;
- }
-
- #controls :focus { outline: 1px dotted white;}
-
- #controls #navLinks { text-align: right; margin: 0; visibility: hidden; }
-
- #controls #navLinks a { padding: 0; margin: 0 0.5em; cursor: pointer; border: none; }
-
- #controls #navLinks :link,
- #controls #navLinks :visited {text-decoration: none; }
-
- #controls #navList #jumplist { background: white; color: black; }
-
-/*************************
- * format for
- * currentSlide block ( e.g. 2/20 )
- */
-
-#currentSlide { position: fixed;
- left: 45%; bottom: 1em;
- width: 10%;
- z-index: 10;
- text-align: center;
- font-size: 0.8em;
- }
-
-#currentSlide :link,
-#currentSlide :visited { text-decoration: none; }
-
-
+}

0 comments on commit 16db1aa

Please sign in to comment.