Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@geraldb
geraldb committed Nov 20, 2011
1 parent d006968 commit 13bc4ee
Show file tree
Hide file tree
Showing 20 changed files with 607 additions and 132 deletions.
6 changes: 3 additions & 3 deletions blank.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
-->

<!-- style sheet links -->
<link rel="stylesheet/less" href="css/projection.css.less" media="screen,projection">
<link rel="stylesheet/less" href="css/screen.css.less" media="screen">
<link rel="stylesheet/less" href="css/print.css.less" media="print">
<link rel="stylesheet/less" href="themes/blank/projection.css.less" media="screen,projection">
<link rel="stylesheet/less" href="themes/blank/screen.css.less" media="screen">
<link rel="stylesheet/less" href="themes/blank/print.css.less" media="print">

<link rel="stylesheet/less" href="blank.css.less" media="screen,projection">

Expand Down
6 changes: 3 additions & 3 deletions blank5.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
-->

<!-- style sheet links -->
<link rel="stylesheet/less" href="css/projection.css.less" media="screen,projection">
<link rel="stylesheet/less" href="css/screen.css.less" media="screen">
<link rel="stylesheet/less" href="css/print.css.less" media="print">
<link rel="stylesheet/less" href="themes/blank/projection.css.less" media="screen,projection">
<link rel="stylesheet/less" href="themes/blank/screen.css.less" media="screen">
<link rel="stylesheet/less" href="themes/blank/print.css.less" media="print">

<link rel="stylesheet/less" href="blank.css.less" media="screen,projection">

Expand Down
1 change: 0 additions & 1 deletion css/print.css.less
View file

This file was deleted.

Binary file added images/example-cat.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/example-graph.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 27 additions & 1 deletion js/jquery.slideshow.controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,33 @@ Slideshow.ctrlPopulateJumpList = function()
var list = $('#jumplist').get(0);

this.$slides.each( function(i) {
var text = $(this).find( self.settings.titleSelector ).text();
var text = "-"; // untitled slide

// todo: use titleSelector if user set??
// $(this).find( self.settings.titleSelector ).text();

var $h1 = $( 'h1', this );
if( $h1.length > 0 )
{
text = $h1.first().text();
}
else // try h2
{
var $h2 = $( 'h2', this );
if( $h2.length > 0 )
{
text = $h2.first().text();
}
else // try h3
{
var $h3 = $( 'h3', this );
if( $h3.length > 0 )
{
text = $h3.first().text();
}
}
}

list.options[list.length] = new Option( (i+1)+' : '+ text, (i+1) );
});
}
Expand Down
79 changes: 66 additions & 13 deletions js/jquery.slideshow.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@

var Slideshow = {

// variables
settings: {},

isProjection: false, // are we in projection (slideshow) mode (in contrast to screen (outline) mode)?
Expand All @@ -12,7 +11,9 @@ var Slideshow = {

$slides: null,
$stylesProjection: null,
$stylesScreen: null
$stylesScreen: null,

slideClasses: [ 'far-past', 'past', 'current', 'next', 'far-next' ]
};


Expand All @@ -24,9 +25,7 @@ var Slideshow = {
*/

Slideshow.transition = function( $from, $to ) {

$from.hide();
$to.show();
// do nothing here; by default lets use css3 for transition effects
}


Expand Down Expand Up @@ -63,7 +62,7 @@ Slideshow.init = function( options ) {

this.addSlideIds();
this.steps = this.collectSteps();
this.updateSlides(); // mark slides w/ far-past,past,current,next,far-next

// $stylesProjection holds all styles (<link rel="stylesheet"> or <style> w/ media type projection)
// $stylesScreen holds all styles (<link rel="stylesheet"> or <style> w/ media type screen)
Expand Down Expand Up @@ -107,8 +106,12 @@ Slideshow.init = function( options ) {

Slideshow.normalize = function() {

// check for .presentation aliases, that is, .deck
$( '.deck' ).addClass( 'presentation' );
// check for .presentation aliases, that is, .deck, .slides
$( '.deck, .slides' ).addClass( 'presentation' );

// add slide class to immediate children
// todo: use autoslide option that lets you turn on/off option?
$( '.presentation' ).children().addClass( 'slide' );

// todo: scope with .slide?? e.g .slide .incremental
// todo: make removing "old" class an option??
Expand Down Expand Up @@ -172,7 +175,10 @@ Slideshow.toggle = function() {
self.isProjection = styleScreen.disabled;
});


/*
* note: code no longer needed; using (adding/removing) css classes hide/show)
*
if( this.isProjection )
{
this.$slides.each( function(i) {
Expand All @@ -185,7 +191,8 @@ Slideshow.toggle = function() {
else
{
this.$slides.show();
}
}
*/
} // end toggle()


Expand Down Expand Up @@ -245,6 +252,8 @@ Slideshow.go = function( dir )
}

if( !(cid == nid) ) {
this.updateSlides();

this.debug( "transition from " + cid + " to " + nid );
this.transition( $( cid ), $( nid ) );

Expand All @@ -256,6 +265,47 @@ Slideshow.go = function( dir )
} // end go()


Slideshow.updateSlideClass = function( $slide, className )
{
if( className )
$slide.addClass( className );

for( var i in this.slideClasses )
{
if( className != this.slideClasses[i] )
$slide.removeClass( this.slideClasses[i] );
}
}

Slideshow.updateSlides = function()
{
var self = this;
this.$slides.each( function( i ) {
switch( i ) {
case (self.snum-1)-2:
self.updateSlideClass( $(this), 'far-past' );
break;
case (self.snum-1)-1:
self.updateSlideClass( $(this), 'past' );
break;
case (self.snum-1):
self.updateSlideClass( $(this), 'current' );
break;
case (self.snum-1)+1:
self.updateSlideClass( $(this), 'next' );
break;
case (self.snum-1)+2:
self.updateSlideClass( $(this), 'far-next' );
break;
default:
self.updateSlideClass( $(this) );
break;
}
});
}



Slideshow.subgo = function( dir )
{
this.debug( 'subgo: ' + dir + ', incpos before: ' + this.incpos + ', after: ' + (this.incpos+dir) );
Expand Down Expand Up @@ -472,9 +522,12 @@ Slideshow.addStyles = function() {
" .extra { display: block !important; } \n"+
"</style>";

$( 'head' ).append( styleProjection );
$( 'head' ).append( styleScreen );
$( 'head' ).append( stylePrint );
// note: use prepend (not append) to make sure this
// styles come first (and do not overrule user supplied styles)

$( 'head' ).prepend( styleProjection );
$( 'head' ).prepend( styleScreen );
$( 'head' ).prepend( stylePrint );
}

Slideshow.addStyles();
5 changes: 5 additions & 0 deletions js/jquery.slideshow.transition.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@

function transition( $from, $to ) {
$from.hide();
$to.show();
}

function transitionSlideUpSlideDown( $from, $to ) {
$from.slideUp( 500, function() { $to.slideDown( 1000 ); } );
}
Expand Down
38 changes: 7 additions & 31 deletions minimalistic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
body,
.presentation { margin: 0; padding: 0; }

.slide { position: absolute;
.slide { display: none;
position: absolute;
top: 0; left: 0;
margin: 0;
border: none;
Expand All @@ -37,30 +38,15 @@
z-index: 2;
}

.slide.current { display: block; } /* only display current slide in projection mode */

.slide .stepcurrent { color: black; }
.slide .step { color: silver; } /* or hide next steps e.g. .step { visibility: hidden; } */

.slide {
background-image: -webkit-linear-gradient(top, blue, aqua, blue, aqua);
background-image: -moz-linear-gradient(top, blue, aqua, blue, aqua);
}

.layout #header { position: fixed;
top: 0; left: 0;
width: 100%; height: 0.5em;
z-index: 1;
}

.layout #footer { position: fixed;
top: auto; bottom: 0;
padding: 1em 0; /* css note: order is => 1st top,bottom; 2nd right,left */
width: 100%; height: 1em;
z-index: 5;
font-size: 100%; font-weight: bold;
}

.layout #footer h1 { display: block; margin: 0; padding: 0 1em; font-size: 50%; }
.layout #footer h2 { display: block; margin: 0; padding: 0 1em; font-size: 50%; font-style: italic; }
</style>

<style media="screen">
Expand All @@ -82,8 +68,6 @@
<script src="js/jquery.slideshow.js"></script>
<script src="js/jquery.slideshow.counter.js"></script>
<script src="js/jquery.slideshow.controls.js"></script>
<script src="js/jquery.slideshow.footer.js"></script>
<script src="js/jquery.slideshow.autoplay.js"></script>
<script>
$(document).ready( function() {
Slideshow.init();
Expand All @@ -104,27 +88,19 @@
</head>
<body>

<div class="layout">
<div id="header"></div>
<div id="footer">
<h1>[your_footer_here]</h1>
<h2>[your_subfooter_here]</h2>
</div>
</div>

<div class="presentation">

<!-- add slides here; example -->

<div class='slide cover'>
<div class='cover'>
<h1>Your Slide Title Here</h1>
<ul>
<li>Item One Here</li>
<li>Item Two Here</li>
</ul>
</div>

<div class='slide'>
<div>
<h1>Steps Demos</h1>

<!-- mark list with class step to mark all items at once -->
Expand All @@ -144,7 +120,7 @@ <h1>Steps Demos</h1>

</div>

<div class='slide'>
<div>
<h1>Another Slide Title Here</h1>
<p>yada yada yada</p>
</div>
Expand Down
Loading

0 comments on commit 13bc4ee

Please sign in to comment.