Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Converted slide indicators from CSS counters to JS, so now I can hide…
… all slides but next/current/previous for big perf boost
  • Loading branch information
Lea Verou committed Oct 22, 2011
1 parent 6dd0bc0 commit b3a6253
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 13 deletions.
8 changes: 3 additions & 5 deletions slideshow.css
Expand Up @@ -28,7 +28,7 @@
}

.slide {
visibility: hidden;
display: none;
position:absolute;
top:0;
right:0;
Expand All @@ -49,9 +49,8 @@

.slide.previous,
.slide:target,
.slide:target + .slide, /* just in case, not really needed */
.slide.next {
visibility: visible;
display: block;
}

.slide:target {
Expand All @@ -65,8 +64,7 @@
/**
Slide numbers
*/
.slide:target::before {
content: counter(slide);
#indicator {
position: absolute;
top: .05in;
right: .5em;
Expand Down
21 changes: 14 additions & 7 deletions slideshow.js
Expand Up @@ -39,21 +39,26 @@ var self = window.SlideShow = function(container, slide) {
// Current .delayed item in the slide
this.item = 0;

// Do we need to add a timer?
// Create timer, if needed
this.duration = container.getAttribute('data-duration');

if(this.duration > 0) {
var timer = document.createElement('div'),
declaration = 'transition: ' + this.duration * 60 + 's linear; ';
var timer = document.createElement('div');

timer.id = 'timer';
timer.setAttribute('style', '-moz-' + declaration + '-webkit-' + declaration + '-o-' + declaration + '-ms-' + declaration + declaration);
timer.setAttribute('style', PrefixFree.prefixCSS('transition: ' + this.duration * 60 + 's linear;'));
container.appendChild(timer);

setTimeout(function() {
timer.className = 'end';
}, 1);
}
}

// Create slide indicator
this.indicator = document.createElement('div');

this.indicator.id = 'indicator';
container.appendChild(this.indicator);

// Get the slide elements into an array
this.slides = $$('.slide', container);
Expand Down Expand Up @@ -358,6 +363,8 @@ self.prototype = {

this.adjustFontSize();

this.indicator.textContent = this.index;

// Update items collection
this.items = $$('.delayed, .delayed-children > *', this.slides[this.slide]);
this.item = 0;
Expand All @@ -370,8 +377,8 @@ self.prototype = {
this.slides[i].classList.remove('next');
}

this.slides.previous = this.slides[this.slide-1];
this.slides.next = this.slides[this.slide+1];
this.slides.previous = this.slides[this.order[this.index - 1]];
this.slides.next = this.slides[this.order[this.index + 1]];

this.slides.previous && this.slides.previous.classList.add('previous');
this.slides.next && this.slides.next.classList.add('next');
Expand Down
2 changes: 1 addition & 1 deletion theme.css
Expand Up @@ -97,7 +97,7 @@ strong, b {
border:30px solid transparent;
}

.slide:target::before {
#indicator {
background: rgba(255, 255, 255, .6);
color: black;
text-shadow: .03em .03em .1em white;
Expand Down

0 comments on commit b3a6253

Please sign in to comment.