html/javascript link to a local file
css, html, javascript, jquery
Solution
There are few corrections in your page:
<script type="text/javascript" src='http://jquery.com'></script> <!-- This is Absolutely Wrong -->
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
And To Load Local scripts use: `file:///` for it:
So:
<script type="text/javascript" src="C://wamp/www/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script> <!-- Also It is C:/ not C:// -->
will be:
<script type="text/javascript" src="file:///C:/wamp/www/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
By Using `file:///` and `C:/` instead of `C://` for all `<script>`'s `src` and `<a>`'s, `<link>`'s `href` will solve your problem.
But As you are using `wamp`, Switch it on and use `http://localhost`, also using `relative paths` to the page will be much more easy. In general, it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.
For more see: Absolute vs relative URLs and http://www.webdeveloper.com/forum/showthread.php?208825-lt-script-gt-with-source-as-a-local-file
Hope it'll solve the problem.
Problem
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. the html is: ``` <!DOCTYPE><HTML> <head> <title>Name</title> <meta charset="UTF-8"/> <link href="C://wamp/www/Projects/File/stylesheet.css" type="text/css" rel="stylesheet"> <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"> <script type="text/javascript" src='http://jquery.com'></script> <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script> <script type="text/javascript" src="C://wamp/www/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script> <script type="text/javascript" src="C://wamp/www/Projects/File/jscript.js"></script> <link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'> </head> <body> <div id="content"> <div id="list"> <ul> <li><a href="#">text</a></li> <li><a href="#">text <small>text</small> text</a></li> <li><a href="#">text</a></li> <li style="font-family:Andale Mono"><a href="#"> ☃ text</a></li> <li><a href="#">text</a></li> <li><a href="#">text</a></li> <li style="font-family:fantasy"><a href="#">☀ text ☀ </a></li> <li><a href="#">text</a></li> <li style="font-family: Bitstream Vera Sans Mono"><a href="#">(text)</a></li> <li><a href="#">text</a></li> <li><a href="#"><mark>text</mark></a></li> <li><a href="#">text ⌛ </a></li> <li><a href="#">text</a></li> <li><a href="#">text</a></li> <li><a href="#">text</a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> <a href="C://wamp/www/Projects/tile/name.docx"id="background"> </body> </html> ``` the css is: ``` #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; } ``` and the javascript is: ``` $(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 >= 0; i--) { element[i].elemAngle = i * Math.PI * 2 / element.length; } setInterval(render, 30); function render() { for (var i = element.length - 1; i >= 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; }); }); ``` 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.