html css and js not working

Question

This is my code:

<!doctype html>
<html lang="en-US">
<head>
    <title>Welcome - Home</title>
    <link type="text/css" rel="stylesheet" href="Home.css">
    <link rel="icon" href="KLOGO.png" type="image/png"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="Home.js"></script>
</head>
<body class="menu">
    <header>
        <a href="#" class="menu-toggle">Toggle</a>
        <nav class="menu-side">
            This is a side menu
        </nav>
    </header>
    <p> sioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisuhsefiuh oaisuf aieufh aosih asioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisu</p>
    <p>oierua yugafapiwugText and more tejiaslirfuh aiufh oaiuefhioaushf aisbhfailsubfaufha dgrkljbgril unfvuabervluiyboyubn serlibglisuh oaiusg foiygasdefoiawg pghuioyf gaiwuebfyaweoilru gfa s7ierfygasrgoooa8iweygfra iiiastygf a8we8</p>
</body>
</html>

The css:

    .menu-side{
    background: #333;
    border-right: 1px solid #000;
    color: #fff;
    position: fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;
}
.menu{
    overflow-x:hidden;
    position: relative;
    left: 0px;
}
.menu-open {
    left: 231px;
}

And the jquery:

(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
    body.toggleClass('menu-open');
    return false;
});
})();

I'm using the Brackets program to write my code, but when I go to the live view after I saved everything and i press "toggle" the page wont move and I looked over everything and Im 98% sure its correct.

Uncaught ReferenceError: $ is not defined(anonymous function) @ Home.js:2(anonymous function) @ Home.js:7 Home.html:9 The value "divice-width" for key "width" is invalid, and has been ignored. 127.0.0.1:49873/Home/KLOGO.png Failed to load resource: the server responded with a status of 404 (Not Found) — Keegan O'Reilly
– Keegan O'Reilly, Commented Aug 9, 2015 at 18:23
Did you forget to close the viewport meta tag only here or in your code too? — baao
– baao, Commented Aug 9, 2015 at 18:23

simon · Accepted Answer · 2015-08-09 19:49:18Z

1

Put <script src="Home.js"></script> before the </body> tag.

I made another class

.menu-side-open{
    left:0px;
}

and JQuery

(function () {
var body = $('body');   
$('.menu-toggle').bind('click', function () {
    body.toggleClass('menu-open');
    $('.menu-side').toggleClass('menu-side-open');
    return false;
});
})();

Also added

.menu, .menu-side{
    transition: 300ms;
}

for a nice slide :)

JSFiddle demo

edited Aug 9, 2015 at 19:49

answered Aug 9, 2015 at 19:34

simon

461 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

baao · Accepted Answer · 2015-08-09 18:24:03Z

1

You need to include jQuery if you want to use it.

Add this line

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

In your html's head or before you use jQuery!

e.g.

<head>
    <title>Welcome - Home</title>
    <link type="text/css" rel="stylesheet" href="Home.css">
    <link rel="icon" href="KLOGO.png" type="image/png"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="Home.js"></script>

answered Aug 9, 2015 at 18:24

baao

73.5k18 gold badges152 silver badges208 bronze badges

Comments

Ahs N · Accepted Answer · 2015-08-09 18:46:10Z

0

Change this:

body.toggleClass('menu-open');

to this:

$('.menu-side').toggleClass('menu-open');

And change the .menu-open css class to this:

.menu-open {
    top:10%;
    left: 0px;
}

Here is the JSFiddle demo

Its the .menu-side that is hidden on the left. Therefore you should be applying the menu-open class to .menu-side and not the body tag.

Your CSS was setting the left of .menu-side to 231px, setting it back to 0px is enough to make the menu appear back into view. And when the menu appeared, it covered the 'Toggle' link, therefore I also added top:10% to the .menu-open class CSS.

edited Aug 9, 2015 at 18:46

answered Aug 9, 2015 at 18:40

Ahs N

8,3961 gold badge30 silver badges34 bronze badges

2 Comments

Keegan O'Reilly Over a year ago

3 JSLint Problems × 2 Missing 'use strict' statement. var body = $('body'); 2 '$' was used before it was defined. var body = $('body'); 7 Move the invocation into the parens that contain the function. })()

Ahs N Over a year ago

yeah, that just checking a valid format of the code. I tried to keep it close to your original code, but here is an updated version of the code. You will have to declare jQuery as a global variable for JSLint validation

jasie · Accepted Answer · 2020-11-19 13:14:00Z

0

I think it is related to a missing file from the computer. I have the same issue with my computer and it does not really matter wether you put the CSS and JS into the HTML page. The result will be the same. When you open the page in the browser, you won`t see any changes, and if I press F12 it says: Failed to load resource: net::ERR_FILE_NOT_FOUND or dll file not found or something like that

edited Nov 19, 2020 at 13:14

jasie

2,47212 gold badges46 silver badges59 bronze badges

answered Nov 19, 2020 at 7:29

edi

1

Collectives™ on Stack Overflow

html css and js not working

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related