JQuery loads but doesn't work - javascript

was testing some JQuery things (i'm new to this) but i can't make jquery work!
First it worked two or three times and then it stopped working (pretty weird) so i changed a few things and now it doesn't work at all. JQuery and script.js load but doesn't seem to work
index.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sansita+One" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>
<title>Manuel Pepe</title>
</head>
<body>
<div id="nav-bar" class="nav-bar">
<div id="container">
<img id="nav-button" class="nav-button" src="imgs/menu.png" />
<div id="nav-menu" class="nav-menu">
</div>
</div>
</div>
<div class="front-page">
<div class="logo">
<h1>Manuel Pepe</h1>
<h3>Test</h3>
</div>
</div>
</body>
</html>
main.css
html{
position:relative;
height:100%;
background-color: #6E6E6E;
}
#container{}
.nav-button{
position:absolute;
margin-top: -2px;
margin-left: 7px;
width: 32px;
height: auto;
z-index:1;
}
.nav-menu{
background-color:#424242;
position:absolute;
top:0px;
left:0px;
width: 200px;
height:100%;
}
.logo{
position: relative;
top:250px;
left:0;
right:0;
bottom:0;
margin: auto;
width: 225px;
}
.logo h3, h1{
text-align:center;
font-family: Sansita One;
color: #222;
text-shadow: 0px 2px 3px #555;
}
.logo h1{
margin-bottom: 3px;
}
.logo h3{
margin-top: 2px;
}
.hover-rotate:hover {
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
script.js
$(document).ready(function(){
$("#nav-button").mouseover(function(){
$(this).addClass("hover-rotate");
});
$("#nav-button").mouseleave(function(){
$(this).removeClass("hover-rotate")
})
});
Why isn't this working?
Also, is there any way to improve the JQuery code?

You can use the $() constructor instead of $(document).ready(function(){...:
$(function () {
$("#nav-button").mouseover(function(){
$(this).addClass("hover-rotate");
});
$("#nav-button").mouseleave(function(){
$(this).removeClass("hover-rotate")
})
});

Set a timeout inside your javascript with a condition like
if (typeof jQuery != "undefined")

Seems to be working fine when I'm testing it. See this JSFiddle: https://jsfiddle.net/v1t54urc/2/
Are you sure your jQuery is loaded? Also make sure your CSS is loaded correctly. Try to use the following code in the header to be sure:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
One more thing. Don't forget the ; at the end on the code, like this:
$("#nav-button").mouseleave(function(){
$(this).removeClass("hover-rotate");
});

Change the line to ensure that JQuery is loading correctly:
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
by
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
If you do the change and the web works, the old line can't find the "jquery-2.1.4.min.js" in the folder.

Related

Can't do an Animated menu

I saw this reel https://www.instagram.com/p/CcyXukODe9D/
Done it as the video but it does not work with the animation. I think something with the JS is not working because the rest works ok.
Maybe I have to link the JavaScript in another way
let cuadrado = document.querySelector(".cuadrado");
cuadrado.addEventListener("click", () =>
cuadrado.classList.toggle("active"));
.cuadrado {
background-color: coral;
width: 80px;
height: 80px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
align-items: center;
}
.line {
background-color: white;
width: 48px;
height: 6px;
border-radius: 3px;
transition: 0.5s;
}
.active .line:nth-child(1) {
transform: translateY(12px) rotate(135deg);
}
.active .line:nth-child(2) {
transform: scale(0);
}
.active .line:nth-child(3) {
transform: translateY(-16px) rotate(-135deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prueba menu</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="animation.js" type="text/javascript"></script>
</head>
<body>
<div class="cuadrado">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</body>
</html>
Try moving <script src="animation.js" type="text/javascript"></script> right before your closing </body>. Also change it to <script src="animation.js"></script>. While you're at it, double-check the file name. So like this:
...
<div class="line"></div>
</div>
<script src="animation.js"></script>
</body>
</html>
Thanks for everyone that answerd. In fact it was working, i didn't notice the JS function was 'on click' and not on 'mouseover' as i thought.
Sorry for disturbing

Animated/ Slide Side-Menu doesn't slide left-ward?

How can I solve the problem of a Side-Menu that doesn't slide out-and-in from the left (Leftward)? I got it from YouTube Video. Backtrack to the YouTube presenter without feedback.
It consists of HTML, CSS and JavaScript.
Index File
The Index file is the file invokes or synchronize with CSS file and JavaScript files
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="toggleMenu.css" type="text/css" rel="stylesheet">
<script link="toggleMenu.js"></script>
</head>
<body>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS File:
The CSS file defines various class with defined attributes
* {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#sidebar {
position:fixed;
width:200px;
height:100%;
background:#151719;
left:-200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:rgba(230, 230, 230, 0.9);
list-style:none;
padding:15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position:absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span {
display: block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
JavaScript
JavaScript handling the sliding effect when user click on the Toggle Button (toggle-btn)
function toggleSidebar() {
document.getElementByID("sidebar").classlist.toggle("active");
}
You have a couple of typos in your toggle function, it should be:
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
Here's a working version, click on run snippet below:
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
* {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#sidebar {
position:fixed;
width:200px;
height:100%;
background:#151719;
left:-200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:rgba(230, 230, 230, 0.9);
list-style:none;
padding:15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position:absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span {
display: block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
There are 2 points you need to fix
script should be using src attributes instead of link, so it will be
<script src="toggleMenu.js"></script>
And the classList should be written with capital L, so instead of document.getElementById("sidebar").classlist.toggle("active"); it
should be
document.getElementById("sidebar").classList.toggle("active");
https://codepen.io/divided7/pen/PoPrwPe I made you a codepen, with the fixed result.
Also, change link to src in your code for the script tag, and the typo (classlist to classList)

Why won't jQuery work in my project?

I'm working on a small project for a friend. I recently learned jQuery on Codecademy, and this is my first time incorporating it in to a web page. However, it doesn't work and I'm not sure why. Also, if someone could direct me on how to center the text boxes, and so on, to look like the image linked below, please let me know.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>DNA Translator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script> type="text/javascript" src="script.js"</script>
<script></script>
</head>
<body>
<div id="content">
<form>
DNA: <input type="text" name="dna" placeholder="DNA"><br>
mRNA: <input type="text" name="mrna" placeholder="mRNA"><br>
tRNA: <input type="text" name="trna" placeholder="tRNA"<br>
Amino Acids: <input type="text" name="aminoAcids" placeholder="Amino Acids"<br>
</form>
<button id="button" type="button">Tanslate</button>
</div>
</body>
</html>
Here is my stylesheet.css:
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#content {
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
#button{
opacity: 0.7;
display: inline-block;
height:25px;
width:300px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 30px auto;
}
input[type="text"] {
display:/*block;*/ inline-block;
height:20px;
padding:4px 6px;
margin-bottom:10px;
font-size:14px;
line-height:20px;
color:#555;
vertical-align:middle;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
background-color:#fff;
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}
Here is the script.js:
$(document).ready(function() {
$('#button').mouseenter(function() {
$('#button').fadeTo('slow', 1);
});
$('#button').mouseleave(function() {
$('#button').fadeTo('slow', 0.7);
});
});
You need to include jQuery!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
Include the link to the jQuery library:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Make sure to do this before you call any .js files.
You're closing your script tag too early
<script> type="text/javascript" src="script.js"</script>
Should be
<script type="text/javascript" src="script.js"></script>
This center alignment of text boxes you can do through css. If you want to use jQuery then download that and include on your page or add directly <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>. And then you are ready to use jQuery. What you want to do if you let us know then we can suggest something.

javascript in Internet Explorer 10, no respond

Could you tell me why this js is working in Firefox and Chrome, but is not working in Internet Explorer? I am trying to solve that 3 days now, and I have no idea why it is not working. I would like this to be working at least on IE 8,9 and 10. I will be really happy if anyone would now how to fix this.
SCRIPT
$(document).ready(function() {
$('<img class="envtop" src="images/envtop.jpg" alt=" "/>').prependTo('#testimo li');
$('<img class="envbot" src="images/envbot.png" alt=" "/>').appendTo('#testimo li');
$('<img class="envshadow" src="images/shadow.png" alt=" "/>').appendTo('#testimo li');
$('.envelope').mouseover(function() {
$(this).find('.envtop').addClass('envani')
.end().find('.envbot').addClass('envani')
.end().find('.list').addClass('listani');
});
$(".envelope").mouseout(function() {
$(this).find('.envtop').removeClass('envani')
.end().find('.envbot').removeClass('envani')
.end().find('.list').removeClass('listani');
});
$('.envelope').click(function() {
$(this).find('.list')
.toggleClass("listmove");
});
});
HTML
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.33897.js"></script>
<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
<ul id="testimo">
<li class="envelope">
<div class="list">
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote>
</div>
</li>
</ul>
</body>
</html>
CSS
.envelope {
width:300px;
height:150px;
position:relative;
padding: 120px 24px 0;
overflow: hidden;
float: left;
-webkit-transition:1s;
transition:1s;
cursor: pointer;
}
.list {
width:236px;
height:180px;
background:white;
padding: 30px 20px 0;
font-size: 16px;
-webkit-transition:1s;
position:absolute;
top:120px;
left:36px;
z-index:2;
-webkit-transition:0.8s;
transition:0.8s;
font-size: 16px;
background:gray;
}
.envtop {
position:absolute;
top:20px;
left: 24px;
z-index:1;
-webkit-transition:0.5s;
transition:0.5s;
}
.envbot {
position:absolute;
top:20px;
left: 24px;
z-index:3;
-webkit-transition:0.5s;
transition:0.5s;
}
.envani {
-ms-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
left: 35px;
top: 10px;
}
.listani {
top:80px;
left: 45px;
}
.envshadow {
position: absolute;
bottom:0;
z-index: 4;
left: 0;
}
.listmove {
top:0px;
}
Can you check the given below jsfiddle link in IE10
LINK
Note : Where you wrote your js code?. Is it external js?. If it is internal(page itself) js you need to write javascript within <script type="text/javascript" language="javascript"> ... </javascript> tag.

jQuery not working with other files

I'm just starting to learn about jQuery and I believe I have run into a road block. Essentially what I have is a that represents a clickable area with an inside. So I'm trying to use this code:
$(document).ready(function(){
$('#side_menu_icon').click(function(){
$('#side_menu').slideToggle('slow');
});
});
Where #side_menu_icon is the clickable area and #side_menu is just a placeholder with width,height, and color temporarily. By default I've set this <div> to display:none; because the example I was looking at did the same thing, assuming the jQuery function would set it to visible. When I click the area nothing happens, I've tried attaching the #side_menu_icon to both the <img> and the <div>. I think there might be something I don't understand about the and how documents inherit the code from one another so I'll include that as well:
<head>
<link rel="stylesheet" type="text/css" href="style/main.css"></link>
<script type="text/javascript" src="js/jquery-1.10.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title>Test Blog Site</title>
</head>
main.js is the file that calls the jQuery functions above.
Thanks for your time, I hope this is enough information for a solution.
EDIT:
Cut down version of HTML:
<body>
<div id="top_bar">
<h1 style="padding-left:1em;">Title</h1>
</div>
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
<div id="side_menu">
</div>
<div id="post_holder">
<img style="margin-bottom:-5px" src="images/post-collection-top-transparent.gif" />
<div id="post_collection">
<!-- stuff -->
</div>
<img src="images/post-collection-bottom-transparent.gif" />
</div>
</body>
Relavent sections being
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
and
<div id="side_menu">
</div>
CSS:
body {
font-family: "Courier New";
background-image: url("../images/background-1728x1080.jpg");
background-size:100%;
background-attachment:fixed;
margin: 0;
}
img {
max-width: 100%;
width: auto;
height: auto;
outline-offset:0px;
}
h1,h2,h3,h4,h5,h6,div,p{
padding:0;
margin:0;
}
.post{
width:90%;
padding-left: 5%;
}
#top_bar{
width: 100%;
z-index:99;
position: fixed;
font-size:15px;
background-image: url("../images/item-background.jpg");
background-size:6%;
color: white;
}
#side_menu_icon{
border: 4px solid #6e3b10;
margin-top: 50px;
position:fixed;
right:0;
background-image: url("../images/item-background.jpg");
}
#post_holder{
z-index:98;
text-align:center;
margin:0;
position:relative;
}
#post_collection{
background-image: url("../images/post-background.gif");
background-size: 100%;
max-width: 900px;
text-align:left;
margin: auto;
}
#side_menu{
height:500px;
width:100px;
background-color:yellow;
display:none;
}
Relevant parts being #side_menu and #side_menu_icon I guess.
I found the solution to my question, some of the CSS was disrupting jQuery's ability to work properly. I will just have to find some way around that.

Categories