Skip to content

Commit 76e7709

Browse files
vhardyvhardy
committed
Made style toggle work on FF/WebKit/Opera
1 parent 4819138 commit 76e7709

10 files changed

Lines changed: 58 additions & 33 deletions

File tree

‎css3-exclusions/Exclusions.src.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,18 @@
77
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css" />
88

99

10-
<link id="st" href="alternate-spec-style.css" rel="stylesheet"
10+
<link id="st" href="alternate-spec-style.css" rel="alternate stylesheet"
1111
type="text/css" disabled title="additional spec styles">
1212

1313
<script type="text/javascript" src="style-toggle.js"></script>
1414

1515
<style type="text/css">
16+
17+
/* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */
18+
/* The fonts are not applied if only loaded from the alternate stylesheet */
19+
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
20+
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
21+
1622
.singleImgExample {
1723
display: block;
1824
margin: auto;

‎css3-exclusions/Overview.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,17 @@
99
<link href=default.css rel=stylesheet type="text/css">
1010
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
1111
type="text/css">
12-
<link disabled href=alternate-spec-style.css id=st rel=stylesheet
13-
title="additional spec styles" type="text/css">
12+
<link disabled href=alternate-spec-style.css id=st
13+
rel="alternate stylesheet" title="additional spec styles" type="text/css">
1414
<script src=style-toggle.js type="text/javascript"></script>
1515

1616
<style type="text/css">
17+
18+
/* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */
19+
/* The fonts are not applied if only loaded from the alternate stylesheet */
20+
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
21+
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
22+
1723
.singleImgExample {
1824
display: block;
1925
margin: auto;

‎css3-exclusions/style-toggle.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@
22
var defaultStyleText = 'default spec. style';
33
var additionalStyleText = "additional spec. style";
44
var toggle;
5-
6-
5+
76
function toggleStyle() {
87
var st = document.getElementById('st');
98

109
if (st.hasAttribute('disabled') === true) {
1110
st.removeAttribute('disabled');
11+
st.disabled = false;
1212
toggle.textContent = defaultStyleText;
1313
} else {
1414
st.setAttribute('disabled', 'true');
15+
st.disabled = true;
1516
toggle.textContent = additionalStyleText;
1617
}
1718
}
@@ -21,10 +22,6 @@
2122
var divHead = document.getElementById('div-head');
2223
var defaultText = additionalStyleText;
2324

24-
if (st.hasAttribute('disabled') === false) {
25-
defaultText = defaultStyleText;
26-
}
27-
2825
toggle = document.createElement('a');
2926

3027
divHead.insertBefore(toggle, divHead.firstChild);

‎css3-regions/Overview.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,17 @@
99
<link href=default.css rel=stylesheet type="text/css">
1010
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
1111
type="text/css">
12-
<link disabled href=alternate-spec-style.css id=st rel=stylesheet
13-
title="additional spec styles" type="text/css">
12+
<link disabled href=alternate-spec-style.css id=st
13+
rel="alternate stylesheet" title="additional spec styles" type="text/css">
1414
<script src=style-toggle.js type="text/javascript"></script>
1515

1616
<style type="text/css">
17+
18+
/* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */
19+
/* The fonts are not applied if only loaded from the alternate stylesheet */
20+
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
21+
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
22+
1723
a.toggle {
1824
position: fixed;
1925
top: 0.5em;

‎css3-regions/Overview.src.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,18 @@
88
<link rel="stylesheet" type="text/css"
99
href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
1010

11-
<link id="st" href="alternate-spec-style.css" rel="stylesheet"
11+
<link id="st" href="alternate-spec-style.css" rel="alternate stylesheet"
1212
type="text/css" disabled title="additional spec styles">
1313

1414
<script type="text/javascript" src="style-toggle.js"></script>
1515

1616
<style type="text/css">
17+
18+
/* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */
19+
/* The fonts are not applied if only loaded from the alternate stylesheet */
20+
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
21+
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
22+
1723
a.toggle {
1824
position: fixed;
1925
top: 0.5em;

‎css3-regions/style-toggle.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@
22
var defaultStyleText = 'default spec. style';
33
var additionalStyleText = "additional spec. style";
44
var toggle;
5-
6-
5+
76
function toggleStyle() {
87
var st = document.getElementById('st');
98

109
if (st.hasAttribute('disabled') === true) {
1110
st.removeAttribute('disabled');
11+
st.disabled = false;
1212
toggle.textContent = defaultStyleText;
1313
} else {
1414
st.setAttribute('disabled', 'true');
15+
st.disabled = true;
1516
toggle.textContent = additionalStyleText;
1617
}
1718
}
@@ -21,10 +22,6 @@
2122
var divHead = document.getElementById('div-head');
2223
var defaultText = additionalStyleText;
2324

24-
if (st.hasAttribute('disabled') === false) {
25-
defaultText = defaultStyleText;
26-
}
27-
2825
toggle = document.createElement('a');
2926

3027
divHead.insertBefore(toggle, divHead.firstChild);

‎css3-transforms/Overview.html‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,17 @@
99
<link href=default.css rel=stylesheet type="text/css">
1010
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
1111
type="text/css">
12-
<link disabled href=alternate-spec-style.css id=st rel=stylesheet
13-
title="additional spec styles" type="text/css">
12+
<link disabled href=alternate-spec-style.css id=st
13+
rel="alternate stylesheet" title="additional spec styles" type="text/css">
1414
<script src=style-toggle.js type="text/javascript"></script>
1515

1616
<style type="text/css">
17+
18+
/* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */
19+
/* The fonts are not applied if only loaded from the alternate stylesheet */
20+
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
21+
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
22+
1723
.singleImgExample {
1824
display: block;
1925
margin: auto;
@@ -81,15 +87,15 @@
8187

8288
<h1>CSS transforms</h1>
8389

84-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 October
90+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 October
8591
2011</h2>
8692

8793
<dl>
8894
<dt>This version:
8995

9096
<dd> <a
91-
href="http://www.w3.org/TR/2011/ED-css3-2d-transforms-20111028/">http://dev.w3.org/csswg/css3-2d-transforms/</a>
92-
<!--http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111028-->
97+
href="http://www.w3.org/TR/2011/ED-css3-2d-transforms-20111029/">http://dev.w3.org/csswg/css3-2d-transforms/</a>
98+
<!--http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111029-->
9399

94100
<dt>Latest version:
95101

‎css3-transforms/Transforms.src.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,18 @@
77
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css" />
88

99

10-
<link id="st" href="alternate-spec-style.css" rel="stylesheet"
10+
<link id="st" href="alternate-spec-style.css" rel="alternate stylesheet"
1111
type="text/css" disabled title="additional spec styles">
1212

1313
<script type="text/javascript" src="style-toggle.js"></script>
14-
14+
1515
<style type="text/css">
16+
17+
/* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */
18+
/* The fonts are not applied if only loaded from the alternate stylesheet */
19+
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
20+
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
21+
1622
.singleImgExample {
1723
display: block;
1824
margin: auto;

‎css3-transforms/alternate-spec-style.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
2-
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
31

42
body {
53
font-family: 'Droid Serif', serif;

‎css3-transforms/style-toggle.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@
22
var defaultStyleText = 'default spec. style';
33
var additionalStyleText = "additional spec. style";
44
var toggle;
5-
6-
5+
76
function toggleStyle() {
87
var st = document.getElementById('st');
98

109
if (st.hasAttribute('disabled') === true) {
1110
st.removeAttribute('disabled');
11+
st.disabled = false;
1212
toggle.textContent = defaultStyleText;
1313
} else {
1414
st.setAttribute('disabled', 'true');
15+
st.disabled = true;
1516
toggle.textContent = additionalStyleText;
1617
}
1718
}
@@ -21,10 +22,6 @@
2122
var divHead = document.getElementById('div-head');
2223
var defaultText = additionalStyleText;
2324

24-
if (st.hasAttribute('disabled') === false) {
25-
defaultText = defaultStyleText;
26-
}
27-
2825
toggle = document.createElement('a');
2926

3027
divHead.insertBefore(toggle, divHead.firstChild);

0 commit comments

Comments
 (0)