Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    Simple Guitar Tabs

    This small code replaces the normal notepad dash -
    which is easy to read in a source page or text editor, with a mdash.
    It also replaces the pipe symbol with #9474 (a vertical bar).
    The code uses a simple, albeit naive, innertext function to keep the space characters in the pre formatted text.

    Code:
    function innerText(obj){
    	return obj.innerHTML.replace(/<[\>]*/g,"");
    }
    var d= document.getElementsByTagName("span");
    for(var i=0;i<d.length;i++){
    	if(d[i].className=="tab"){
    		d[i].innerHTML = "<pre>"+innerText(d[i]).replace(/\|/g,"&#9474").replace(/-/g,"&mdash;")+"</pre>";
    	}
    }
    A full example:

    Code:
    <!doctype html>
    <html>
    <head>
    <title>
    Simple Guitar Tabs
    </title>
    <style type='text/css'>
    body {padding-left:300px;background:#959595;}
    .tabs, .tabs pre {
    
    	color: rgb(0, 0, 0);
    	background-color: rgb(245, 245, 245);
    	display: block;
    	padding: 10px;
    
    	clear: both;
    	font:normal normal 14px/14px Courier new,Andale Mono,Bitstream Vera Sans Mono,OCR A Extended,Lucida Sans Typewriter,Consolas,Lucida Console,Courier,Monospace;
    }
    .tabs{
    	width: 650px;
    	color: rgb(245, 245, 245);
    	background-color: rgb(65, 65, 65);
    	border: 10px solid rgb(204, 204, 204);
    }
    /* comment the next line to remove the border around individual tab staves */
    .tabs pre {border: 1px solid rgb(204, 204, 204);}
    .tabs pre span {
    	color:red;
    }
    .tabs pre span.tab {
    	color:black;
    }
    a {display:block;}
    p.menu {
    	width:200px;
    	background-color: rgb(65, 65, 65);
    	border:solid 10px #ccc;
    	padding:10px;
    	color:#fff;
    	font-weight:900;
    }
    p.menu a {color:#fff;font-weight:normal}
    .tabs a {display:inline;color:#ccc;}
    </style>
    </head>
    <body>
    <a name="top"></a>
    <h1>EZ Guitar Solos</h1>
    <h5>Tabulation by Nicola Mandorino <a href="http://www.guitarnick.com/easy-guitar-songs-for-absolute-beginners-tab.html">GuitarNick.com</a></h5>
    
    <p class="menu">
    Song List
    <a href="#brise">Brise</a>
    <a href="#jinglebells">Jingle Bells</a> 
    <a href="#andantino">Andantino<a> 
    <a href="#surlepont">Sur Le Pont d'Avignon</a> 
    <a href="#shortninbread">Shortnin Bread</a> 
    <a href="#happybirthday">Happ Birthday to You</a> 
    </p>
    
    
    <a name="brise"></a><a href="#top">top</a>
    <p>
    <div class="tabs"><h2>Brise (4/4)</h2><a href="http://www.guitarnick.com/brise-easy-guitar-song-for-beginners-tab.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
       C              G7                            C
    </span><span class="tab">
    |--0--0--3--3--|--3--1--1-----|--------1--1--|--1--0--0-----|
    |--1-----------|--0-----0-----|--3--3--0-----|--1-----1-----|
    |--0-----------|--------0-----|--0-----------|--------0-----|
    |--------2-----|--------------|--------------|--------------|
    |--3-----------|--2-----------|--------2-----|--3-----3-----|
    |--------------|--------3-----|--3-----------|--------------|
    </span>
    <span>
       C              G7                            C
    </span><span class="tab">
    |--0--0--3--3--|--3--1--1-----|--------3--3--|--------0-----|
    |--1-----------|--------0-----|--3--3--3-----|--1-----1-----|
    |--0-----------|--------0-----|--0-----------|--------0-----|
    |--------2-----|--------------|--------------|--2-----------|
    |--3-----------|--2-----------|--------2-----|--------3-----|
    |--------------|--------3-----|--3-----------|--------------|
    </span>
    </pre></div>
    </p>
    
    
    <a name="jinglebells"></a><a href="#top">top</a>
    <p>
    <div class="tabs"><h2>Jingle Bells (4/4)</h2><a href="http://www.guitarnick.com/jingle-bells-1-easy-guitar-song-for-beginners.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
       C
    </span><span class="tab">
    |--0--0--0-----|--0--0--0-----|--0--3--------|--0-----------|
    |--1-----1-----|--1-----------|--1-----1--3--|--1-----------|
    |--0-----0-----|--0-----2-----|--0-----0-----|--0-----------|
    |--------------|--------------|--------2-----|--------------|
    |--3-----------|--3-----------|--3-----------|--3-----3-----|
    |--------------|--------------|--------------|--------------|
    </span>
    <span>
       F              C              D7             G
    </span><span class="tab">
    |--1--1--1--1--|--1--0--0--0--|--0--------0--|--------3-----|
    |--1-----------|--1-----1-----|-----3--3-----|--3-----0-----|
    |--------2-----|--------0-----|--2-----2-----|--0-----0-----|
    |--3-----------|--------------|--------------|--------------|
    |--------------|--3-----3-----|--0-----------|--------2-----|
    |--------------|--------------|--------1-----|--3-----------|
    </span>
    <span>
       C
    </span><span class="tab">
    |--0--0--0-----|--0--0--0-----|--0--3--------|--0-----------|
    |--1-----1-----|--1-----------|--1-----1--3--|--1-----------|
    |--0-----0-----|--0-----2-----|--0-----0-----|--0-----------|
    |--------------|--------------|--------2-----|--------------|
    |--3-----------|--3-----------|--3-----------|--3-----------|
    |--------------|--------------|--------------|--------3-----|
    </span>
    <span>
       F              C              G              C
    </span><span class="tab">
    |--1--1--1--1--|--1--0--0--0--|--3--3--1-----|--------0-----|
    |--1-----1-----|--1-----1-----|--3-----0--3--|--1-----1-----|
    |--2-----2-----|--0-----0-----|--0-----0-----|--------0-----|
    |--3-----------|--------------|--------------|--------------|
    |--------------|--3-----3-----|--------------|--------3-----|
    |--------------|--------------|--3-----------|--------------|
    </span>
    </pre></div>
    </p>
    
    <a name="andantino"></a><a href="#top">top</a>
    <p>
    <div class="tabs"><h2>Andantino (M. Caracssi) (4/4)</h2><a href="http://www.guitarnick.com/andantino-carcassi-easy-guitar-song-for-beginners.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
       C              G              C7              C
    </span><span class="tab">
    |--------------|--------------|--------------|--------------|
    |--1-----1-----|--0-----0-----|--3-----3-----|--1-----1-----|
    |-----0-----0--|-----0-----0--|-----0-----0--|-----0-----0--|
    |--2-----------|--0-----------|--3-----------|--2-----------|
    |--------------|--------------|--------------|--------------|
    |--------------|--------------|--------------|--------------|
    </span>
    <span>
       C              G7             G              C
    </span><span class="tab">
    |--0-----0-----|--1-----1-----|--------------|--------0-----|
    |--------------|--------------|--0-----0-----|--1-----1-----|
    |-----0-----0--|-----0-----0--|-----0-----0--|--0-----0-----|
    |--------------|--------------|--------------|--2-----------|
    |--3-----------|--2-----------|--------------|--3-----------|
    |--------------|--------------|--3-----------|--------------|
    </span>
    </pre></div>
    </p>
    
    
    
    <a name="surlepont"></a><a href="#top">top</a>
    <p>
    <div class="tabs"><h2>Sur Le Pont d'Avignon (4/4)</h2><a href="http://www.guitarnick.com/sur-le-pont-davignon-easy-guitar-song-beginners.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
       C              G              C     Am       Dm    G
    </span><span class="tab">
    |--------------|--------------|--0--1--3-----|--------------|
    |--1--1--1-----|--3--3--3-----|--1--------1--|--0--1--3-----|
    |--0-----0-----|--0-----0-----|--0-----------|-----------0--|
    |--2-----------|--0-----------|--------2-----|--0-----------|
    |--------3-----|--------2-----|--3-----------|--------2-----|
    |--------------|--------------|--------------|--------------|
    </span>
    <span>
       C              G              C     Am       G     C
    </span><span class="tab">
    |--------------|--------------|--0--1--3-----|-----------0--|
    |--1--1--1-----|--3--3--3-----|--1-----1--1--|--3--0--1--1--|
    |--0-----0-----|--0-----0-----|--0-----------|--0-----0--0--|
    |--------2-----|--------0-----|--------2-----|--0-----2-----|
    |--3-----------|--2-----------|--3-----------|--------3-----|
    |--------------|--------------|--------------|--3-----------|
    </span>
    </pre></div>
    </p>
    
    
    <a name="shortninbread"></a><a href="#top">top</a>
    <p>
    <div class="tabs"><h2>Shortnin Bread (4/4)</h2><a href="http://www.guitarnick.com/shortnin-bread-easy-guitar-song-beginners-tab.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
       G                                            D7    G
    </span><span class="tab">
    |--3--0-----0--|--3--0-----3--|--3--0-----0--|-----------3--|
    |--------3-----|--------3--0--|--------3-----|--0--------0--|
    |--------------|-----------0--|--------------|-----2--0--0--|
    |--------------|--------------|--------------|--0-----------|
    |--------2-----|--------------|--------2-----|--------2-----|
    |--3-----------|--3-----------|--3-----------|--------------|
    </span>
    <span>
       G                                            D7    G
    </span><span class="tab">
    |-----0-----0--|-----0-----3--|-----0-----0--|-----------3--|
    |--------3-----|--------3--0--|--------3-----|--0--------0--|
    |--0-----------|--0-----0--0--|--0-----------|-----2--0--0--|
    |--------------|--0-----------|--------------|--0-----------|
    |--------2-----|--------2-----|--------------|--------------|
    |--3-----------|--3-----------|--3-----------|--------3-----|
    </span>
    <span>
       G                                            D7    G
    </span><span class="tab">
    |--3--0-----0--|--3--0-----3--|--3--0-----0--|-----------3--|
    |--0-----3-----|--0-----3--0--|--0-----3-----|--0--------0--|
    |--0-----0-----|--0-----0--0--|--0-----0-----|-----2--0--0--|
    |--------------|--------0-----|--------0-----|--0-----------|
    |--------2-----|--------2-----|--------2-----|--------------|
    |--3-----------|--3-----------|--3-----------|-----------3--|
    </span>
    </pre></div>
    </p>
    
    <a name="happybirthday"></a><a href="#top">top</a>
    <p>
    <div class="tabs"><h2>Happy Birthday to You (3/4)</h2><a href="http://www.guitarnick.com/happy-birthday-easy-guitar-song-beginners-tab.html">Tabulation by Nicola Mandorino</a> (mod by rdspoons)<pre><span>
                   C           G                       C
    </span><span class="tab">
    |-----------|-----------|-----1-----|-----------|-----0-----|
    |-----------|--------1--|--0--0-----|--------3--|--1--1-----|
    |--------00-|--2--0--0--|-----0--00-|--2--0--0--|-----0--00-|
    |--------2--|-----------|--------0--|-----------|--------2--|
    |--------3--|--3--3--3--|--------2--|--2--2--2--|--3-----3--|
    |-----------|-----------|--3--------|-----------|-----------|
    </span>
    <span>
       C           F           C     G     C           C7
    </span><span class="tab">
    |--3--0-----|--------11-|--0--------|-----0-----|-----------|
    |--1-----1--|--0-----1--|--1--1--3--|--1--1-----|-----------|
    |--0--------|--2--2--2--|--0-----0--|--0--0--0--|--2--0--3--|
    |--2--------|--3-----3--|-----------|--2--------|--------2--|
    |-----------|-----------|--3--------|--3--------|--------3--|
    |-----------|-----------|--------3--|-----------|-----------|
    </span>
    </pre></div>
    </p>
    
    <script type="text/javascript">
    function innerText(obj){
    	return obj.innerHTML.replace(/<[\>]*/g,"");
    }
    var d= document.getElementsByTagName("span");
    for(var i=0;i<d.length;i++){
    	if(d[i].className=="tab"){
    		d[i].innerHTML = "<pre>"+innerText(d[i]).replace(/\|/g,"&#9474").replace(/-/g,"&mdash;")+"</pre>";
    	}
    }
    </script>
    
    </body>
    </html>
    works with ie,ff,chrome,safari,opera.
    Only tested on non-mobile windows platfoms.
    Last edited by rdspoons; 05-21-2011 at 01:02 PM.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •