title: html/javascript link to a local file
body: <p>I'm trying to show a link to a local file using javascript, and it isn't working.  I'm not sure what I'm doing wrong.  </p>
  
  <p>the html is:</p>
  
  <pre><code>&lt;!DOCTYPE&gt;&lt;HTML&gt;
  &lt;head&gt;
      &lt;title&gt;Name&lt;/title&gt;
      &lt;meta charset="UTF-8"/&gt;
      &lt;link href="C://wamp/www/Projects/File/stylesheet.css" type="text/css" rel="stylesheet"&gt;
      &lt;link href="C://wamp/www/jquery-ui-1.10.3.custom/css/Mary/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet"&gt;
      &lt;script type="text/javascript" src='http://jquery.com'&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="C://wamp/www/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="C://wamp/www/Projects/File/jscript.js"&gt;&lt;/script&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="content"&gt;
      &lt;div id="list"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;text &lt;small&gt;text&lt;/small&gt; text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li style="font-family:Andale Mono"&gt;&lt;a href="#"&gt; &amp;#x2603 text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li style="font-family:fantasy"&gt;&lt;a href="#"&gt;&amp;#x2600 text &amp;#x2600 &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li style="font-family: Bitstream Vera Sans Mono"&gt;&lt;a href="#"&gt;(text)&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;mark&gt;text&lt;/mark&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;text &amp;#x231B &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;text&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt; 
  &lt;/div&gt;
  &lt;a href="C://wamp/www/Projects/tile/name.docx"id="background"&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the css is: </p>
  
  <pre><code>#content {
      background-color: #030505;
      height:100%;
      width:100%;
  }
  
  #list{
      height:100%;
      width:100%;
      position:relative;
      margin:0 auto;
      overflow:hidden;
  }
  
  #list ul, #list li{
      list-style:none;
      margin:0;
      padding:0;
  }
  
  #list a{
      position:absolute;
      text-decoration: none;
      color: #444444;
  }
  #list a:hover{
      color: #EB7500;
  }
  
  #background {
      width: 100%;
      height: 100%;
      position: fixed;
  }
  </code></pre>
  
  <p>and the javascript is:</p>
  
  <pre><code>$(document).ready(function () {
      var element = $('#list a');
      var offset = 0;
      var stepping = 0.03;
      var list = $('#list');
      var $list = $(list);
          $list.mousemove(function (e) {
              var topOfList = $list.eq(0).offset().top;
              var listHeight = $list.height();
              stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;
  });
  for (var i = element.length - 1; i &gt;= 0; i--) {
      element[i].elemAngle = i * Math.PI * 2 / element.length;
          }
      setInterval(render, 30);
  function render() {
      for (var i = element.length - 1; i &gt;= 0; i--) {
          var angle = element[i].elemAngle + offset;
              x = 120 + Math.sin(angle) * 10;
              y = 45 + Math.cos(angle) * 40;
              size = Math.round(40 - Math.sin(angle) * 20);
                  var elementCenter = $(element[i]).width() / 2;
                  var leftValue = (($list.width() / 2) * x / 100 - elementCenter) + "px"
                      $(element[i]).css("fontSize", size + "pt");
                      $(element[i]).css("opacity", size / 100);
                      $(element[i]).css("zIndex", size);
                      $(element[i]).css("left", leftValue);
                      $(element[i]).css("top", y + "%");
                  }
                  offset += stepping;
              }
  });
  
  $(function(){
      $('#content').click(function(){
          $(this).hide();
          $('#background').show;
      });
  });
  </code></pre>
  
  <p>when I click on the content, it just shows a blank screen.  I've tried to make the link every way I know how, and I'm sure I'm missing something silly, but it's driving me crazy!  I can't even get my jquery .show to do any of it's inputs like explode or puff, but if I use div elements with text and borders, it shows up.  Please help!  Thanks so much.</p>