Skip to content

Commit bc1034d

Browse files
author
Chris Ferdinandi
committed
Converted from spaces to tabs
http://lea.verou.me/2012/01/why-tabs-are-clearly-superior/
1 parent 71c914d commit bc1034d

File tree

1 file changed

+115
-115
lines changed

1 file changed

+115
-115
lines changed

‎index.html‎

Lines changed: 115 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,130 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Slider - A simple, responsive, touch-enabled content slider.</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
8-
<!-- A basic responsive reset -->
9-
<style>
10-
@-webkit-viewport { width: device-width; zoom: 1.0; }
11-
@-moz-viewport { width: device-width; zoom: 1.0; }
12-
@-ms-viewport { width: device-width; zoom: 1.0; }
13-
@-o-viewport { width: device-width; zoom: 1.0; }
14-
@viewport { width: device-width; zoom: 1.0; }
15-
16-
html { overflow-y: auto; }
17-
18-
img, audio, video, canvas { max-width: 100%; }
19-
20-
/* Sets body width */
21-
.container {
22-
max-width: 40em;
23-
width: 88%;
24-
margin-left: auto;
25-
margin-right: auto;
26-
}
27-
</style>
28-
29-
<!-- stylesheets -->
30-
<link rel="stylesheet" href="slider.css" type="text/css">
31-
32-
<script>
33-
if ( 'querySelector' in document && 'addEventListener' in window ) {
34-
document.documentElement.className += 'js';
35-
}
36-
</script>
37-
38-
<!-- HTML5 Shim for IE -->
39-
<!--[if IE]>
40-
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
41-
<![endif]-->
4+
<meta charset="utf-8">
5+
<title>Slider - A simple, responsive, touch-enabled content slider.</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!-- A basic responsive reset -->
9+
<style>
10+
@-webkit-viewport { width: device-width; zoom: 1.0; }
11+
@-moz-viewport { width: device-width; zoom: 1.0; }
12+
@-ms-viewport { width: device-width; zoom: 1.0; }
13+
@-o-viewport { width: device-width; zoom: 1.0; }
14+
@viewport { width: device-width; zoom: 1.0; }
15+
16+
html { overflow-y: auto; }
17+
18+
img, audio, video, canvas { max-width: 100%; }
19+
20+
/* Sets body width */
21+
.container {
22+
max-width: 40em;
23+
width: 88%;
24+
margin-left: auto;
25+
margin-right: auto;
26+
}
27+
</style>
28+
29+
<!-- stylesheets -->
30+
<link rel="stylesheet" href="slider.css" type="text/css">
31+
32+
<script>
33+
if ( 'querySelector' in document && 'addEventListener' in window ) {
34+
document.documentElement.className += 'js';
35+
}
36+
</script>
37+
38+
<!-- HTML5 Shim for IE -->
39+
<!--[if IE]>
40+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
41+
<![endif]-->
4242
</head>
4343

4444
<body>
4545
<section class="container">
4646

47-
<h1 style="text-align: center; font-size: 3em;">Slider</h1>
48-
<p style="text-align: center; font-size: 1.5em;">A simple, responsive, touch-enabled content slider.</p>
47+
<h1 style="text-align: center; font-size: 3em;">Slider</h1>
48+
<p style="text-align: center; font-size: 1.5em;">A simple, responsive, touch-enabled content slider.</p>
4949

50-
<div class="slider">
51-
<div class="slides">
52-
<div><img src="img/image1.jpg"></div>
53-
<div><img src="img/image2.jpg"></div>
54-
<div><img src="img/image3.jpg"></div>
55-
</div>
56-
</div>
57-
<div class="slide-nav"></div>
58-
<div class="slide-count"></div>
50+
<div class="slider">
51+
<div class="slides">
52+
<div><img src="img/image1.jpg"></div>
53+
<div><img src="img/image2.jpg"></div>
54+
<div><img src="img/image3.jpg"></div>
55+
</div>
56+
</div>
57+
<div class="slide-nav"></div>
58+
<div class="slide-count"></div>
5959

6060
</section>
6161

6262

63-
<!-- Javascript -->
64-
<script src='slider.js'></script>
65-
<script>
66-
if ( 'querySelector' in document && 'addEventListener' in window ) {
67-
68-
// Slider Variable
69-
var slider = document.querySelector('.slider');
70-
71-
// If a Slider exists
72-
if (slider) {
73-
74-
// Activate Slider
75-
window.mySwipe = Swipe(slider, {
76-
continuous: true,
77-
callback: function(index, elem) {
78-
countSlides();
79-
},
80-
});
81-
82-
83-
// Function to display slide count
84-
var countSlides = function () {
85-
// Variables
86-
var slideTotal = mySwipe.getNumSlides();
87-
var slideCurrent = mySwipe.getPos();
88-
var slideCount = document.querySelector('.slide-count');
89-
// Content
90-
if (slideCount) {
91-
slideCount.innerHTML = slideCurrent + ' of ' + slideTotal;
92-
}
93-
}
94-
// Run slide count function on load
95-
countSlides();
96-
97-
98-
// Create Previous & Next Buttons
99-
var slideNav = document.querySelector('.slide-nav')
100-
if (slideNav) {
101-
slideNav.innerHTML = '<a class="slide-nav-prev" href="#">Previous</a> | <a class="slide-nav-next" href="#">Next</a>';
102-
}
103-
104-
// Toggle Previous & Next Buttons
105-
var btnNext = document.querySelector('.slide-nav-next');
106-
var btnPrev = document.querySelector('.slide-nav-prev');
107-
if (btnNext) {
108-
btnNext.addEventListener('click', function(e) { e.preventDefault(); mySwipe.next(); }, false);
109-
}
110-
if (btnPrev) {
111-
btnPrev.addEventListener('click', function(e) { e.preventDefault(); mySwipe.prev(); }, false);
112-
}
113-
114-
115-
// Toggle Left & Right Keypress
116-
window.addEventListener('keydown', function (e) {
117-
if (e.keyCode == 37) {
118-
mySwipe.prev();
119-
}
120-
if (e.keyCode == 39) {
121-
mySwipe.next();
122-
}
123-
}, false);
124-
125-
}
126-
127-
}
128-
</script>
63+
<!-- Javascript -->
64+
<script src='slider.js'></script>
65+
<script>
66+
if ( 'querySelector' in document && 'addEventListener' in window ) {
67+
68+
// Slider Variable
69+
var slider = document.querySelector('.slider');
70+
71+
// If a Slider exists
72+
if (slider) {
73+
74+
// Activate Slider
75+
window.mySwipe = Swipe(slider, {
76+
continuous: true,
77+
callback: function(index, elem) {
78+
countSlides();
79+
},
80+
});
81+
82+
83+
// Function to display slide count
84+
var countSlides = function () {
85+
// Variables
86+
var slideTotal = mySwipe.getNumSlides();
87+
var slideCurrent = mySwipe.getPos();
88+
var slideCount = document.querySelector('.slide-count');
89+
// Content
90+
if (slideCount) {
91+
slideCount.innerHTML = slideCurrent + ' of ' + slideTotal;
92+
}
93+
}
94+
// Run slide count function on load
95+
countSlides();
96+
97+
98+
// Create Previous & Next Buttons
99+
var slideNav = document.querySelector('.slide-nav')
100+
if (slideNav) {
101+
slideNav.innerHTML = '<a class="slide-nav-prev" href="#">Previous</a> | <a class="slide-nav-next" href="#">Next</a>';
102+
}
103+
104+
// Toggle Previous & Next Buttons
105+
var btnNext = document.querySelector('.slide-nav-next');
106+
var btnPrev = document.querySelector('.slide-nav-prev');
107+
if (btnNext) {
108+
btnNext.addEventListener('click', function(e) { e.preventDefault(); mySwipe.next(); }, false);
109+
}
110+
if (btnPrev) {
111+
btnPrev.addEventListener('click', function(e) { e.preventDefault(); mySwipe.prev(); }, false);
112+
}
113+
114+
115+
// Toggle Left & Right Keypress
116+
window.addEventListener('keydown', function (e) {
117+
if (e.keyCode == 37) {
118+
mySwipe.prev();
119+
}
120+
if (e.keyCode == 39) {
121+
mySwipe.next();
122+
}
123+
}, false);
124+
125+
}
126+
127+
}
128+
</script>
129129
</body>
130130
</html>

0 commit comments

Comments
 (0)