html/javascript link to a local file

Question

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.

Why don't you use http://localhost/? and can we know your directory structure and where this page is stored? — Vedant Terkar, Commented Jun 4, 2014 at 17:14
Did you try like this? <a href="file:///C:/wamp/www/Projects/tile/name.docx">Link 1</a> — Abs, Commented Jun 4, 2014 at 17:16
http://jquery.com links to jQuery home page, not any js file. — Teemu, Commented Jun 4, 2014 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, Commented Jun 4, 2014 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, Commented Jun 4, 2014 at 17:43

Community · Accepted Answer · 2017-05-23 10:30:14Z

8

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.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Jun 4, 2014 at 17:26

Vedant Terkar

4,6638 gold badges37 silver badges62 bronze badges

you have the jquery and ajax lines as absolutely wrong. How do I correct those lines?
– Mary
Commented Jun 4, 2014 at 17:39
@Mary just remove line: <script type="text/javascript" src='http://jquery.com'></script> coz it is sites address and not javascript files address. Also You're including JQuery correctly aright after that line using: <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>. So first line is un-necessary and wrong.
– Vedant Terkar
Commented Jun 4, 2014 at 17:45
I deleted it. Thank you so much for your help. It is much appreciated
– Mary
Commented Jun 4, 2014 at 17:51
@Mary I'm glad that I could help you.
– Vedant Terkar
Commented Jun 4, 2014 at 17:59
links to file://C might be ok on a windows computer but what if the user is using another OS like mac or linux? Isn't there a way to link to local files from a web browser?
– Joshua Robison
Commented Oct 18, 2023 at 5:32

| Show 1 more comment

Julian Jensen · Accepted Answer · 2014-06-04 17:18:12Z

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.

answered Jun 4, 2014 at 17:18

Julian Jensen

3212 silver badges5 bronze badges

Add a comment |

sites · Accepted Answer · 2014-06-04 17:25:00Z

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:

I would search what is the folder that the web server is... serving :p. Which in your case seems to be: c:\wamp\www
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.
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.

Collectives™ on Stack Overflow

html/javascript link to a local file

3 Answers 3

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
html
css
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Not the answer you're looking for? Browse other questions tagged javascriptjqueryhtmlcss or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
html
css
or ask your own question.