CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mary
Mary

Reputation: 97

html/javascript link to a local file

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.

Upvotes: 3

Views: 34845

Answers (3)

Vedant Terkar
Vedant Terkar

Reputation: 4682

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.

Upvotes: 8

sites
sites

Reputation: 21815

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.

Upvotes: 0

Julian Jensen
Julian Jensen

Reputation: 321

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.

Upvotes: 0

Related Questions