How do I link my javascript to this html to work

Question

I am a new to coding and currently working on this website and I can't get my javascript to work. The javascript is used to make the transitions between the different sections smooth and nice. It would be really awesome if you guys could help me. I know the problem is probably very simple but please help out a noobie in need. :)

HTML:

<html lang="en">
<head>



<link rel="stylesheet" type="text/css" href="style.css">
<title><!-- Insert your title here --></title>
</head>
<body>
<nav>
<ul>
<li><a href="#1">First</a></li>
<li><a href="#2">Second</a></li>
<li><a href="#3">Third</a></li>
<li><a href="#4">Fourth</a></li>
<li><a href="#5">Fifth</a></li>
</ul>
</nav>

<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>

<footer></footer>


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">           
</script>
</body>
</html>

javascript:

var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();

$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();

sections.each(function() {
var top = $(this).offset().top - nav_height,
    bottom = top + $(this).outerHeight();

if (cur_pos >= top && cur_pos <= bottom) {
  nav.find('a').removeClass('active');
  sections.removeClass('active');

  $(this).addClass('active');
  nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});

nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');

$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);

return false;
});

Open the Developer Console (supported both in Firefox and Chrome) and see if your Javascript loaded fine and if there are any other errors or such. You can debug your Javascript or add console.log to figure out any errors — Neo, Oct 07 '14 at 16:50

score 0 · Answer 1 · answered Oct 07 '14 at 16:42

Use <script></script> tags. put your JS code between these scripts on your html page. It shall work then.

Another clean approach is to use make a separate file of JavaScript. Name it for example hello.js. Then in <head> tag of your html, put this line to link to your JavaScript file.

<script src="hello.js"></script>

score 0 · Answer 2 · answered Oct 07 '14 at 16:45

put it in a file ie myfile.js and bind it to your html like:

<script src="script/myfile.js"></script>

and make sure that you add the jquery lib before the script

full code

<html lang="en">
<head>



<link rel="stylesheet" type="text/css" href="style.css">
<title><!-- Insert your title here --></title>
</head>
<body>
<nav>
<ul>
<li><a href="#1">First</a></li>
<li><a href="#2">Second</a></li>
<li><a href="#3">Third</a></li>
<li><a href="#4">Fourth</a></li>
<li><a href="#5">Fifth</a></li>
</ul>
</nav>

<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>

<footer></footer>


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">           
</script>
<script src="script/myfile.js"></script>
</body>
</html>

or just do this

<html lang="en">
<head>



<link rel="stylesheet" type="text/css" href="style.css">
<title><!-- Insert your title here --></title>
</head>
<body>
<nav>
<ul>
<li><a href="#1">First</a></li>
<li><a href="#2">Second</a></li>
<li><a href="#3">Third</a></li>
<li><a href="#4">Fourth</a></li>
<li><a href="#5">Fifth</a></li>
</ul>
</nav>

<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>

<footer></footer>


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">           
</script>
<script>
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();

$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();

sections.each(function() {
var top = $(this).offset().top - nav_height,
    bottom = top + $(this).outerHeight();

if (cur_pos >= top && cur_pos <= bottom) {
  nav.find('a').removeClass('active');
  sections.removeClass('active');

  $(this).addClass('active');
  nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});

nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');

$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);

return false;
});
</script>
</body>
</html>

score 0 · Answer 3 · answered Oct 07 '14 at 16:51

I think you went to add a jQuery code but stuck while calling it in proper way. You can do the following.

1) Cover your JS code within

$(document).ready(function(){ //your code goes here });

OR

jQuery(document).ready(function($){ //your code goes here });

2) Put your JavaScript/jQuery code in a .js file.

3) Call that file after the jQuery library file into your HTML code.

e.g.

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">           
</script>

<script src="pathto/yourfile.js">           
</script>

You can also put your code inside <script></script> tags in the HTML file itself rather than creating a separate JS. However, in either case, the main thing is that the jQuery library should be loaded first, so that your jQuery code can run.

NOTE: I have not checked your JS code logic, I have just given instruction over how you should use this JS code to work.

How do I link my javascript to this html to work

3 Answers3