Skip to content

Commit 8ec25cf

Browse files
tardatetardate
committed
externalise site css; tweak formatting
1 parent c41cd1b commit 8ec25cf

File tree

3 files changed

+75
-174
lines changed

3 files changed

+75
-174
lines changed

‎css/jtab-site.css

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
body {
3+
background: #fff url(../images/bg-black-gradient.jpg) repeat-x fixed top;
4+
color:#000;
5+
font-family: helvetica, arial, sans-serif;
6+
}
7+
p, div, span, li {
8+
font-size: 13px;
9+
}
10+
11+
#header {
12+
width: 1030px;
13+
clear: both;
14+
padding:0 10px;
15+
margin-bottom:10px;
16+
color: #FEFAFA;
17+
}
18+
#header h1 {
19+
color: #FFFF33;
20+
}
21+
22+
#menu {
23+
float: left;
24+
position:relative;
25+
width: 180px;
26+
background-color: transparent;
27+
color: #FEFAFA;
28+
}
29+
#menu ul {
30+
margin-left:10px;
31+
padding-left:10px;
32+
}
33+
#menu a,
34+
#menu a:visited,
35+
#menu a:hover {
36+
color: #FEFAFA;
37+
}
38+
39+
40+
#content {
41+
margin-left: 180px;
42+
padding:1px 10px 10px;
43+
width: 850px;
44+
background-color: #F4EFFE;
45+
}
46+
47+
#footer {
48+
width: 1030px;
49+
clear: both;
50+
}
51+
52+
pre {
53+
background-color: #000;
54+
color: #EEE;
55+
padding: 10px;
56+
}

‎examples.htm

+6-102
Original file line numberDiff line numberDiff line change
@@ -8,94 +8,16 @@
88
<meta name="description" content="jTab is a javascript-based library that allows you to easily render arbitrary guitar chord and tabulature (tab) notation on the web"/>
99
<meta name="keywords" content="guitar,chord,tab,tabulature,music,notation,javascript,css,svg,html,xhtml"/>
1010

11-
<style type="text/css" media="screen">
12-
body {
13-
background: #fff url(http://tardate.com/images/bg-black-gradient.jpg) repeat-x fixed top;
14-
color:#000;
15-
font-family: helvetica, arial, sans-serif;
16-
}
17-
p, div, span, li {
18-
font-size: 13px;
19-
}
20-
21-
#header {
22-
width: 1030px;
23-
clear: both;
24-
padding:0 10px;
25-
color: #FEFAFA;
26-
}
27-
#header h1 {
28-
color: #FFFF33;
29-
}
30-
31-
#menu {
32-
float: left;
33-
position:relative;
34-
width: 180px;
35-
background-color: transparent;
36-
color: #FEFAFA;
37-
}
38-
#menu ul {
39-
margin-left:10px;
40-
padding-left:10px;
41-
}
42-
#menu a,
43-
#menu a:visited,
44-
#menu a:hover {
45-
color: #FEFAFA;
46-
}
47-
48-
49-
#content {
50-
margin-left: 180px;
51-
padding:1px 10px 10px;
52-
width: 850px;
53-
background-color: #F4EFFE;
54-
}
55-
56-
#footer {
57-
width: 1030px;
58-
clear: both;
59-
}
60-
61-
</style>
62-
63-
<script type="text/javascript">
64-
window.onload=function(){
65-
// just to make sure we can chain onload handlers correctly
66-
// alert('original onload');
67-
}
68-
</script>
11+
<link type="text/css" rel="stylesheet" href="css/jtab-site.css"/>
6912

7013
<!-- START: for jtab -->
7114
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
72-
<link type="text/css" rel="stylesheet" media="screen" href="css/jtab-helper.css"/>
15+
<link type="text/css" rel="stylesheet" href="css/jtab-helper.css"/>
7316
<script src="javascripts/prototype.js" type="text/javascript"></script>
7417
<script src="javascripts/raphael.js" type="text/javascript"></script>
7518
<script src="javascripts/jtab.js" type="text/javascript"></script>
7619
<!-- END: for jtab -->
7720

78-
<!-- START: for syntaxhighlighter -->
79-
<link href='http://tardate.com/syntaxhighlighter/css/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
80-
<script language='javascript' src='http://tardate.com/syntaxhighlighter/js/shCore.js'></script>
81-
<script language='javascript' src='http://tardate.com/syntaxhighlighter/js/shBrushJScript.js'></script>
82-
<script language='javascript' src='http://tardate.com/syntaxhighlighter/js/shBrushCss.js'></script>
83-
<script language='javascript' src='http://tardate.com/syntaxhighlighter/js/shBrushXml.js'></script>
84-
<style type='text/css'>
85-
.dp-highlighter ol li {
86-
background: #F8F8F8 url(http://tardate.com/images/wrap-cont-l.png) no-repeat 0 14px;
87-
padding-left: 14px !important;
88-
}
89-
.dp-highlighter ol li.alt {
90-
background: #FFFFFF url(http://tardate.com/images/wrap-cont-l.png) no-repeat 0 14px;
91-
padding-left: 14px !important;
92-
}
93-
.dp-highlighter .bar, .dp-highlighter .bar .tools {
94-
margin-bottom:0;
95-
}
96-
</style>
97-
<!-- END: for syntaxhighlighter -->
98-
9921
</head>
10022
<body>
10123

@@ -123,8 +45,6 @@ <h1>jTab - Guitar Chord and Tab Notation for the Web</h1>
12345
</div>
12446

12547

126-
127-
12848
<div id="content">
12949

13050
<h2>Live Examples</h2>
@@ -136,7 +56,9 @@ <h2>Live Examples</h2>
13656
<h3>Render notation provided by a user</h3>
13757
<p>
13858
</p>
139-
<span>Try it out. Enter a phrase here (see <a href="index.htm#notation">notation</a> for help):</span><input id="notation" size="40"><input type="button" value="Notate this!" onclick="jtab.render('tab',$('notation').value);">
59+
<span>Try it out. Enter a phrase here (see <a href="index.htm#notation">notation</a> for help):</span>
60+
<input id="notation" size="40">
61+
<input type="button" value="jTab this!" onclick="jtab.render('tab',$('notation').value);">
14062
<div id="tab"><i>jTab will render your phrase here</i></div>
14163

14264

@@ -175,7 +97,7 @@ <h3>More than one note at a time in tab</h3>
17597
<h3>Scripted rendering</h3>
17698
<p>
17799
</p>
178-
<pre name="code" class="xml:wraplines:nocontrols">
100+
<pre>
179101
&lt;div id="mytab"&gt;&lt;/div&gt;
180102
&lt;script type="text/javascript"&gt;
181103
jtab.render('mytab','Am7 C');
@@ -195,24 +117,6 @@ <h3>Scripted rendering</h3>
195117

196118
<div id="footer">
197119
</div>
198-
<!-- START: for syntaxhighlighter -->
199-
<script language='javascript'>
200-
dp.SyntaxHighlighter.ClipboardSwf = 'http://tardate.com/syntaxhighlighter/js/clipboard.swf';
201-
dp.SyntaxHighlighter.HighlightAll('code');
202-
</script>
203-
<!-- END: for syntaxhighlighter -->
204-
205-
<!-- START: for google analytics -->
206-
<script type="text/javascript">
207-
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
208-
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
209-
</script>
210-
<script type="text/javascript">
211-
try {
212-
var pageTracker = _gat._getTracker("UA-4894631-6");
213-
pageTracker._trackPageview();
214-
} catch(err) {}</script>
215-
<!-- END: for google analytics -->
216120

217121
</body>
218122
</html>

‎index.htm

+13-72
Original file line numberDiff line numberDiff line change
@@ -8,74 +8,11 @@
88
<meta name="description" content="jTab is a javascript-based library that allows you to easily render arbitrary guitar chord and tabulature (tab) notation on the web"/>
99
<meta name="keywords" content="guitar,chord,tab,tabulature,music,notation,javascript,css,svg,html,xhtml"/>
1010

11-
<style type="text/css" media="screen">
12-
body {
13-
background: #fff url(images/bg-black-gradient.jpg) repeat-x fixed top;
14-
color:#000;
15-
font-family: helvetica, arial, sans-serif;
16-
}
17-
p, div, span, li {
18-
font-size: 13px;
19-
}
20-
21-
#header {
22-
width: 1030px;
23-
clear: both;
24-
padding:0 10px;
25-
color: #FEFAFA;
26-
}
27-
#header h1 {
28-
color: #FFFF33;
29-
}
30-
31-
#menu {
32-
float: left;
33-
position:relative;
34-
width: 180px;
35-
background-color: transparent;
36-
color: #FEFAFA;
37-
}
38-
#menu ul {
39-
margin-left:10px;
40-
padding-left:10px;
41-
}
42-
#menu a,
43-
#menu a:visited,
44-
#menu a:hover {
45-
color: #FEFAFA;
46-
}
47-
48-
49-
#content {
50-
margin-left: 180px;
51-
padding:1px 10px 10px;
52-
width: 850px;
53-
background-color: #F4EFFE;
54-
}
55-
56-
#footer {
57-
width: 1030px;
58-
clear: both;
59-
}
60-
61-
pre {
62-
background-color: #000;
63-
color: #EEE;
64-
padding: 10px;
65-
}
66-
67-
</style>
68-
69-
<script type="text/javascript">
70-
window.onload=function(){
71-
// just to make sure we can chain onload handlers correctly
72-
// alert('original onload');
73-
}
74-
</script>
11+
<link type="text/css" rel="stylesheet" href="css/jtab-site.css"/>
7512

7613
<!-- START: for jtab -->
7714
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
78-
<link type="text/css" rel="stylesheet" media="screen" href="css/jtab-helper.css"/>
15+
<link type="text/css" rel="stylesheet" href="css/jtab-helper.css"/>
7916
<script src="javascripts/prototype.js" type="text/javascript"></script>
8017
<script src="javascripts/raphael.js" type="text/javascript"></script>
8118
<script src="javascripts/jtab.js" type="text/javascript"></script>
@@ -145,7 +82,8 @@ <h3>Interactive/Explicit Rendering using Javascript</h3>
14582
jTab can be used to render notation in real-time using Javascript. This could be based on user input (like here), or with the notation feed
14683
being generated or retrieved from some system or web service.
14784
</p>
148-
<span>Try it out. Enter a phrase here (see <a href="#notation">notation</a> for help):</span><input id="notation" size="40"><input type="button" value="Notate this!" onclick="jtab.render('tab',$('notation').value);">
85+
<span>Try it out. Enter a phrase here (see <a href="#notation">notation</a> for help):</span>
86+
<input id="notation" size="40"><input type="button" value="jTab this!" onclick="jtab.render('tab',$('notation').value);">
14987
<div id="tab"><i>jTab will render your phrase here</i></div>
15088

15189

@@ -263,13 +201,16 @@ <h3>1. Include jTab Javascript files</h3>
263201

264202
<pre>
265203
&lt;head&gt;
266-
... (other stuff) ...
267-
&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt; &lt;!-- recommended to avoid security warnings with SVG in IE8 --&gt
268-
&lt;link type="text/css" rel="stylesheet" media="screen" href="http://tardate.com/jtab/css/jtab-helper.css"/&gt; &lt;!-- optional: helpers to preset jtab region heights to avoid rendering jitter --&gt
204+
... (other stuff) ...
205+
&lt;!-- recommended to avoid security warnings with SVG in IE8 --&gt
206+
&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;
207+
&lt;!-- optional: helpers to preset jtab region heights to avoid rendering jitter --&gt
208+
&lt;link type="text/css" rel="stylesheet" href="http://tardate.com/jtab/css/jtab-helper.css"/&gt;
269209

270-
&lt;script src="http://tardate.com/jtab/javascripts/prototype.js" type="text/javascript"&gt;&lt;/script&gt;
271-
&lt;script src="http://tardate.com/jtab/javascripts/raphael.js" type="text/javascript"&gt;&lt;/script&gt;
272-
&lt;script src="http://tardate.com/jtab/javascripts/jtab.js" type="text/javascript"&gt;&lt;/script&gt;
210+
&lt;!-- mandatory script includes for jtab --&gt
211+
&lt;script src="http://tardate.com/jtab/javascripts/prototype.js" type="text/javascript"&gt;&lt;/script&gt;
212+
&lt;script src="http://tardate.com/jtab/javascripts/raphael.js" type="text/javascript"&gt;&lt;/script&gt;
213+
&lt;script src="http://tardate.com/jtab/javascripts/jtab.js" type="text/javascript"&gt;&lt;/script&gt;
273214

274215
&lt;/head&gt;
275216
&lt;body&gt;

0 commit comments

Comments
 (0)