Why won't my jQuery work at all? - javascript

I can't get jQuery to work on my page. so I used jsfiddle.net to test if my jQuery code works, and it does. However, when I copy and paste the same code unto my document, it doesn't work. So I'm assuming that there's an error with linking the jQuery external file on my html document. I'm using TextWrangler as my text editor.
html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
css
#left {
float:left;
margin-left:200px;
}
jQuery
$(document).ready(function () {
$("#left").mouseenter(function () {
$("#left").fadeTo("fast", 0.25); });
});
Thanks for the time in answering and reading this. I'm currently stuck, I've reached a dead end, and I can't wait to overcome this problem!

I agree with other people that it's most likely a typo in the name of your jQuery file. I created a web page using your exact code except that I spelled the jquery file correctly. It worked fine.
And even though using the BODY element is proper and important, it didn't affect the outcome of my testing your code.

Please, use the "Inspect Element" (tools of chrome ) or Firebug (tool of Firefox and Chrome) for find the error.
Now for me the possible errors are:
Name not declared correctly for example <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
you can change the script with external files (libraries of google) <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
Now I create the DEMO on JSFIDDLE with your code and seems that it works

You have a typo in your HTML referencing the jQuery document:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<!---Typo was here--->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
</body>

Related

How can I fix HTML elements not showing up because of a js script?

Loading this causes nothing to show up except for the pink background! When I remove the <script src="https://apis.google.com/js/client.js"> line, everything works again! I need that script for the API to work, so how can I fix the body elements disappearing?
<head>
<title>My Drive - Google Drive</title>
<link rel="icon" href="https://ssl.gstatic.com/docs/doclist/images/infinite_arrow_favicon_5.ico">
<link rel="stylesheet" href="stylin.css">
<meta charset="utf-8">
<script src="https://apis.google.com/js/client.js">
<script src="app.js">
</head>
<body>
<h1>MVTennis vids! :D</h1>
<button onclick="newVideo()">New Video</button>
<hr>
<p> yeet yeet </p>
</body>
Sorry if I'm missing something obvious. Thank you all for any help! :)
You'll want to close the script tags on each one, like so:
<script src="https://apis.google.com/js/client.js"></script>
<script src="app.js"></script>
Try that and see if it resolves it.

How do I use external libraries and plug ins like owl.carousel.js in HTML and CSS?

I am trying to add a simple carousel to my site. After doing a little research I found owl.carousel.js, I like the layout they use and it seems to be what I'm looking for.
Keep in mind I am new at all this. :)
My question is after I have downloaded the file and add the links to my html how do I make it work? Also I am not sure if I have to add the JS in the html or separate like I have it. On the owl site it just says call the function.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a link href="main.css" rel="stylsheet" type="text/css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<title></title>
</head>
<body>
<div class="owl-carousel">
<div> <img src="images/images-1.jpeg"> </div>
<div> <img src="images/images-2.jpeg"> </div>
<div> <img src="images/images-3.jpeg"> </div>
<div> <img src="images/images.jpeg"> </div>
<div> <img src="images/shutterstock_204805573.jpg"> </div>
<div> <img src="images/shutterstock_221107753.jpg"> </div>
<div> <img src="images/smug%20mug%20portrait%20copy.jpg"> </div>
</div>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
Looking at your html, it should work. Just add the snippet (that you mentioned first) right after you include owl carousel js file. So, the final should look like:
...
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</body>
</html>
First of all just for starters, Your CSS link is set wrong, remove the hyperlink tag as link is its own tag... I think I see it, from what I see its the only option... PS You did lack a little on showing us your file locations and code...
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Running it from the Javascript console that inspecting Chrome exposes is the best way to test IMO. Running that script is basically what you're doing when you load it via JQuery, here you're just doing it manually. If the site has a CDN, I say try it with that first, then if it's working you can download it and get it working locally.

My js does not work on html of dreamweaver

Ok, guys. I am new to js and I have a problem, it seems that my html does not call my js. I dont know if I´ve place it on a wrong line or what causes that, but I´ve all ready checked my code on http://validator.w3.org/nu and it seems right. My html is:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>hola</title>
<script type="text/javascript" src="menuscrollfixed.js"></script>
<link href="scrollfixedmenu.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="texte/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="nav-container">
<div class="nav">
<ul>
<li>NOSOTROS</li>
<li>VISIÓN</li>
<li>MISIÓN</li>
</ul>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Here is my Js:
jQuery("document").ready(function($) {
var nav = $(".nav container");
$(window).scroll(function () {
if ($(this).scrolltop() > 400) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
I know it´s a bit long, but I really hope someone can help me =)
You need to rearrange the order of script references. Refer jquery before your custom js file.
<link href="scrollfixedmenu.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script type="texte/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="menuscrollfixed.js"></script>
Because, you are using jquery functions inside your custom js file. At the time of executing those codes, the jquery file will not be loaded, which will cause the error.
Some of the things i noticed in your page:
Re-arrange the stack order of your scripts. add jQ lib before your script file.
use only one jQ lib instead of two diff versions.
type="texte/javascript" is not a valid type.
Better to use jQuery(document) instead of jQuery("document").
$(".nav container"); there is no element of named container in .nav and i don't think it's a valid html element container.
First thing is you are using multiple versions of Jquery Library files. This we create conflicts while using the features. Use the latest version.
And keep an eye on the wrong spelling for scripts and calling class names.

elements wont .fadeTo in my code. Don't know what's wrong JavaScript, JQuery, HTML

I am trying to get the buttons in my code (the only two buttons) with the class names "play" and "credits" to fade out when they are clicked using JQuery but it is not working. Please tell me what is wrong.
HTML
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="startMen">
<div class="playDiv">
<button class='play'>Play</button>
</div>
<br>
<div class="creditsDiv">
<button class='credits'>Credits</button>
</div>
</div>
</body>
</html>
JavaScript
$(document).ready(function(){
$('.play, .credits').click(function(){
$('.play, .credits').fadeTo('slow',0);
});
});
Add this to the <head> section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
JQuery hasn't been linked to you HTML. Add it to the head somewhere before your link to your script.js so the rest of your Javascript can use the JQuery library as well.
Should be:
<head>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src='script.js'></script>
</head>
You need to include the JQuery library in your script. It's hosted on the Google CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
As a side note, while you can use .fadeTo();
.fadeTo()
requires duration and opacity as arguments. a.e:
.fadeTo("slow", .5);
If you're looking for it to fade into displaying nothing you could use the method .fadeOut(); and pass a duration argument. a.e. :
.fadeOut("slow");
Edit: When I first read the script my eyes skipped over the 0 in the fadeTo method. I assumed that was the issue. After throwing it through jsfiddle, it seems like the problem was the library missing.
You didn't link jQuery. This means the browser has no idea what jQuery is. You have to add the <script> tag.
Use the following in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Fiddle
Your code actually works, just a simple mistake :)
You can also use .fadeOut() instead of .fadeTo(). It's more simple. Take a look at that here
'Cause I'm posting an answer, you can use $(function () { as short for $(document).ready(function(){. I know it's not related but just mentioning ¯\_(ツ)_/¯

Object Undefined Issue

I have asked a question simpler to this before but I have made progress now.
I have a menu bar which uses 2 files of Javascript and then another 2 files of Javascript for another object on the page.
This is my code this is breaking at the moment:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Javascript/MenuBarAdmin/AdminMenuJS.js" type="text/javascript" ></script>
<script src="Javascript/MenuBarAdmin/AdminMenuJSmin.js" type="text/javascript"></script>
<script src="Javascript/bSimplexMenuBarTransit.js" type="text/javascript"></script>
<script src="Javascript/bSimplexMenuBar.js" type="text/javascript"></script>
<link href="Stylesheet/bSimplexMenuBar.css" rel="stylesheet" />
<link href="Stylesheet/bPersonnelTracker.css" rel="stylesheet" />
<link href="Stylesheet/ScheduleStyle/bsimplex.css" rel="stylesheet" />
<script type="text/javascript">
javascript: window.history.forward(1);
</script>
<script type="text/javascript" charset="utf-8">
function select(e) {
e.eventSelect(e);
menu.show(e);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script1" runat="server"></asp:ScriptManager>
<div class="wrapper">
<div class="bsimplex-header-bar">
<ul class="modern-menu theme2">
<li><span>Home</span></li>
<li><span>My Calender</span></li>
<li><span>Manager</span></li>
<li><span style="background-color: #f08100 !important;">Absences</span>
<ul>
<li><span>Sickness</span></li>
<li><span>Medical</span></li>
<li><span>Lateness</span></li>
<li><span>Other</span></li>
</ul>
</li>
<li><span>Reports</span>
<ul>
<li><span>Allocation</span></li>
<li><span>Rota</span><</li>
</ul>
</li>
<li><span>Admin</span></li>
<ul class="mm-group mm-right">
<li class="mm-icon">
<div class="menubaricon">
<img src="../../Images/bSimplex_icon_menubar.png" />
</div>
</li>
</ul>
</ul>
<script type="text/javascript">$(".modern-menu").modernMenu();</script>
</div>
The error comes at the bottom of the code when I am trying to find .modernMenu it just says that the object is undefined.
The first 2 script lines that call javascript files are used for a vertical menu bar, and the second 2 are for the horizontal menu bar that isnt working.
.
I have ran through my code 100's of times to find the issue and when i comment out the first 2 lines for the vertical bar the error will go and will work correctly but the vertical bar wont work and visa versa.
I dont know if im correct but at the bottom where the error is happening do i have to call the script file i want to get the information from? or am i limited to the amount of javascript files?
The script tags you're commenting out must be altering $() for their own purposes. There are actually many libraries that use the $() library, so jQuery has conveniently given a jQuery() function which is exactly the same as $(), but has a different name that's probably not going to be used by other libraries. Because the library you inserted altered $() so that it's not jQuery() anymore, use jQuery() instead:
<script type="text/javascript">jQuery(".modern-menu").modernMenu();</script>
try
$(function(){
$(".modern-menu").modernMenu();
})

Categories