Scrolling list with Javascript

Question

I'm recently learning how to work with html js and css for a college project, and since they won't help us, I hope you can.

I have those codes, do to some type of scrolling list, that scrolls up and down with mouse click.

I created those 3 different files in html, css and js. But the javascript file doesn't seem to link. Can you help me?

HTML (named ola.css):

 <body>
 <head>

<link type="text/css" rel="stylesheet" href="ola.css" />
<script type= "text/javascript" src="java.js"></script>
<div class="box">
        <input type="button" value="Scroll" id="scroll" />
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>

        </ul>
    </div>

</head>
</body>

CSS:

#scroll {
    position: fixed;
    padding: 5px 10px;
}
.box{
height: 200px;
    overflow: auto;
}

JAVASCRIPT (named java.js):

<head> 

<SCRIPT LANGUAGE="JavaScript"></script>


<script type="text/javascript"></script>

$(document).ready(function () {
    $('#scroll').click(function () {
        $('.box').animate({
            scrollTop: '+=100'
        }, 100);
    });
});



</head>

I found this code online, but when I test it, all works except the scrolling part when I click the button.

score 0 · Answer 1 · answered Nov 16 '13 at 12:55

0

You shouldn't write HTML tags inside the js file. You only have to write:

$(document).ready(function () {
    $('#scroll').click(function () {
        $('.box').animate({
            scrollTop: '+=100'
        }, 100);
    });
});

Also, before using jQuery you should at least be confident with JavaScript first. I mean, even the structure of your HTML file is incorrect (as others have pointed out).

answered Nov 16 '13 at 12:55

William

2,695
1
21
33

I know, I'm such a noob at this. But since I have to self-learn, it's kinda complicated to understand it all in short time. But thank you so much anyway, I'll try to correct the mistakes :) – Nanowatt Nov 16 '13 at 13:15

score 0 · Answer 2 · answered Nov 16 '13 at 12:57

0

you must put javascript code inside script tag,not behand it

answered Nov 16 '13 at 12:57

microbingbing

51
4

score 0 · Answer 3 · answered Nov 16 '13 at 12:57

You didn't include jQuery to you head tag. Since you are using jQuery you should add it.

Add this in your head tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Your body tag is misplaced.

This a demo of your code: Demo

score 0 · Answer 4 · edited May 23 '17 at 12:28

I don't see jquery javascript file. Include one of these

http://code.jquery.com/jquery-latest.min.js - Most recent version, jQuery hosted http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js - Version 1.x family, Google hosted http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js - Version 1.9.1 family, Google hosted http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js - Version 1.9.1, Microsoft hosted

taked from HERE

and YES: your head an body tags are messed up:

<head> 
    your css link and javascript
</head>
<body> 
   your condtruction
</body>

Scrolling list with Javascript

4 Answers4