2

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="#"> &#x2603 text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li style="font-family:fantasy"><a href="#">&#x2600 text &#x2600 </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 &#x231B </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.

Mary
  • 87
  • 2
  • 2
  • 8
  • Why don't you use `http://localhost/`? and can we know your `directory structure` and where `this page` is stored? – Vedant Terkar Jun 04 '14 at 17:14
  • 2
    Did you try like this? Link 1 – Abs Jun 04 '14 at 17:16
  • `http://jquery.com` links to jQuery home page, not any js file. – Teemu Jun 04 '14 at 17:16
  • i'm having some issues with WAMP. It's not letting me access the files like I used to and i'm not certain why. I used to open it and get a screen with mysql and php and such, and now it's saying I don't have access to it, which doesn't make any sense at all to me. That's why I saved the files locally hoping to be able to zip the entire thing up, send it to someone, and have them open the html file. – Mary Jun 04 '14 at 17:41
  • I removed the jquery.com line. Some of these online courses I take are really confusing me with info I don't need or that doesn't work :/ It's really difficult to learn this on my own with so much bad information out there. Thanks for catching that for me. I appreciate it – Mary Jun 04 '14 at 17:43
  • JetAbe! That worked! But I want it to just open the file rather than providing a clickable link. Is there a way to do that? – Mary Jun 04 '14 at 17:45

3 Answers3

6

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.

Community
  • 1
  • 1
Vedant Terkar
  • 4,553
  • 8
  • 36
  • 62
0

If you're running the script locally (via your browser's File -> Open menu option) then you don't need the drive letter, unless it's on a different drive. If you want to use whatever path you want, use file:// in front. In other words, you can use file:// anywhere you could use http://.

Remember, all paths are relative to the script location.

Julian Jensen
  • 321
  • 2
  • 5
0

When you do that the link will not download the file to your client, I suppose this is what you want.

If this page is going to be served over the internet, you should not be using URLs relative to your computer, instead relative to the server computer:

  1. I would search what is the folder that the web server is... serving :p. Which in your case seems to be: c:\wamp\www
  2. Try changing the link href to /Projects/tile/name.docx. This is the URL relative to the server, which means that when your user is in your page, for example: http://localhost, and clicks the link, user would try to go to: http://localhost/Projects/tile/name.docx.
  3. The server would search in its file system c:\wamp\www\Projects\tile\name.docx.

Note how the file system URLs c:\wamp\www\.. and URLs of the form http://localhost/... are different.

In this case you want in your page an URL of the form http://... , because if you use a file system URL when the person looking at your page clicks the link the browser would search the file in the person computer, and not in the server computer.

Also, you could want to remove c:/wamp/www/ in every place you have it and just leave /.

I hope I did not miss the point.

sites
  • 21,417
  • 17
  • 87
  • 146