So I've got the following HTML and jQuery code, and whenever I try to load the page, Firebug gives me the 'ReferenceError: $ is undefined' error; as such, the jQuery code doesn't work. I'm using Coda 2.0.9 on Mavericks. I've loaded the jQuery library (using Google CDN) before the jQuery UI library, and both of those before the script I've written. In the Net section of Firebug, the only request that it shows is the font from Google Fonts. This is just a splash page so the code is minimal. For the life of me I can't figure this out so any help would be much appreciated.
<meta name="description" content="Description here" >
<title>This site is being updated</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jquery.js"></script>
<h1 class="maintitle"> This site is getting cleared up! </h1>
<img class="construction" src="images/construction_800.png">
<div id='wrapper' style='text-align:center;width:auto; margin: 0px 90px'>
<div style='float:left;width:50%'>
<strong>Office 1</strong> <br>
p. xxx.xxx.xxxx <br>
f. xxx.xxx.xxxx
</div>
<div style='float:right;width:50%'>
<strong>Office 2</strong> <br>
p. xxx.xxx.xxxx <br>
f. xxx.xxx.xxxx
</div>
</div>
<p class="comeback"><strong>Please check back soon for the updated site</strong></p>
</body>
jQuery:
$(document).ready(function() {
$(".maintitle", ".construction", "div", ".comeback").fadeIn("slow");
});
You're loading in Jquery Twice in the header.
Remove the last line
<script type="text/javascript" src="jquery.js"></script>
The actual issue is that there is a conflict somewhere with the $ handler that jQuery uses.
If so, changing $ to jQuery like #Choineck should work.
jQuery(document).ready(function($) {
$(".maintitle", ".construction", "div", ".comeback").fadeIn("slow");
});
I think the problem is that you have a slight delay getting the jQuery from ajax.google
But you could also try something like
<script language="javascript" type="text/javascript">
$j = jQuery.noConflict();
</script>
Then
$j("...")
Related
For some reason the progress bar is not working.
Here is the HTML, CSS, and JS:
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<script src="js/app.js" type="text/javascript"></script>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="bar-one bar-con">
<div class="bar" data-percent="20"></div>
</div>
<div class="bar-two bar-con">
<div class="bar" data-percent="50"></div>
</div>
<div class="bar-three bar-con">
<div class="bar" data-percent="70"></div>
</div>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
The rest of the code is in the link, I am still learning to use the page (thousand apologies):
https://jsfiddle.net/b4kqt1cz/
Your problem seems to be that jQuery is not being loaded, and as such the call to $.fn.progress() - where the progress bars are actually updated - is not working. This can be verified in your browser's console (usually found by pressing F12), where you can find the following error:
Uncaught ReferenceError: jQuery is not defined
at window.onload
If possible, you should update your reference to jQuery in your <head> by either using one of the jQuery CDN links, or downloading a copy of jQuery, placing it in your js folder and referencing it from there.
An updated JS Fiddle, which changes the reference to JQuery to the CDN link for version 1.12.4, works as expected.
I am trying to implement a jQuery accordion into my webpage. It currently won't work. Any help would be appreciated hugely. Please bear in mind that I am a total novice and so it is likely I have made some very amateur mistakes. However, I am trying to learn and I hope that with your knowledge I will be able to continue to do so. Here is my code:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//code.jQuery.com/jQuery-1.10.2.js"></script>
<script src="//code.jQuery.com/ui/1.11.4/jQuery-ui.js"></script>
<script src="//code.jQuery.com/jQuery-1.10.2.js"></script>
<script src="//code.jQuery.com/ui/1.11.4/jQuery-ui.js"></script>
</head>
<body>
<div id="accordion">
<h3>Ice Cream Pancakes</h3>
<div>
<p>mmmmmmmmmmm</p>
</div>
<h3>Fruit Pancakes</h3>
<div>
<p>Not quite as nice, but acceptable</p>
</div>
<h3>Savoury Pancakes</h3>
<div>
<p>I had one once with chicken on, it was just odd!</p>
<ol>
<li>fried chicken</li>
<li>pulled pork</li>
</ol>
</div>
<h3>Non-Pancakes</h3>
<div>
<p>This is stuff that isn’t pancakes… like… cars and light bulbs…</p>
</div>
</div>
</body>
</html>
I am also getting these errors:
Failed to load resource:
the server responded with a status of 404 (Not Found) (19:39:37:163 | error, network)
at http://code.jquery.com/ui/1.11.4/jQuery-ui.js
Failed to load resource:
the server responded with a status of 404 (Not Found) (19:39:37:199 | error, network)
at http://code.jquery.com/jQuery-1.10.2.js
Failed to load resource:
net::ERR_EMPTY_RESPONSE (19:39:37:217 | error, network)
at http://localhost:8383/favicon.ico
use https://code.jQuery.com instead of //code.jQuery.com
<script src="https://code.jQuery.com/jQuery-1.10.2.js"></script>
<script src="https://code.jQuery.com/ui/1.11.4/jQuery-ui.js"></script>
Instead of 4 lines, remove extra 2 lines and use them as above
i don't see the accordion initialization
<script type="text/javascript">
jQuery(document).ready(function() {
$( "#accordion" ).accordion();
});
</script>
I'm going to restate the obvious, everyone above is sort of right, you need to combine their answers.. here is a working example: http://codepen.io/anon/pen/pgJxEW
You do not want to load the script twice
Make sure you get the script URL's right.. you should be able to visit the link and see the code
Init the function
You also will want to include one of the jquery ui css themes here: https://code.jquery.com/ui/ (I chose black tie as an example)
So, putting it all together
<head>
// all of your other head tag code - only load this once
<script src="//code.jQuery.com/jquery-1.10.2.js"></script>
<script src="//code.jQuery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
// all of your html in the the body tag
// right before closing body tag
<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
</body>
All of your scripts are failing to load because of the capital Q in the script name. Try these
<script src="//code.jQuery.com/jquery-1.10.2.js"></script>
<script src="//code.jQuery.com/ui/1.11.4/jquery-ui.js"></script>
Still a bit new with jQuery so I may be making a basic error.
I just completed the jQuery introductory course and now am trying to do some of my own basic work, but have hit a slight road block.
Essentially it seems the jQuery file script.js isn't getting called properly.
When I ran it inserting it into stackoverflow it seems to work fine. However,
when I pull the html file in the browser it only displays the html elements in the file and not any of the jQuery code.
Any help would be appreciated!
$(document).ready(function() {
$("body").append("<p>I\'m a paragraph!</p>");
/* write 'Hello World! to the first div' */
$("#first").append('<h1> Hello World!</h1>');
//a clickable 'Hello World!' example
$("#link").click(function() {
$('#greeting').append("<h1>Hello Again!</h1>");
});
});
<!DOCTYPE html>
<html>
<head>
<title>Hello World - jQuery Style</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<div id="first"></div>
<div id="second">
Click Me! <br /> <span id="greeting"></span>
</div>
</body>
</html>
You should declare your current javascript file after you get the jquery.min.js
If you look in your console ( right click and inspect ) You will notice that it cannot understand $ jquery sign.
Solution should be just swap these two lines in your html :
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Try switching the order of the tags for script.js and jquery.min.js so that jquery is initialised first
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>
I have:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/temp/css/menu.css" />
<link rel="stylesheet" type="text/css" href="/temp/css/bottomchatdiv.css" />
<link rel="stylesheet" type="text/css" href="/temp/css/centercontent.css" />
<link rel="stylesheet" type="text/css" href="/temp/css/basics.css" />
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript" src="jquery.ba-bbq.js"></script>
<script type="text/javascript" src="jquery.ba-bbq-addtl.js"> </script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function getusto(anchorid) {
$(anchorid).scrollTo();
}
</script>
<script type="text/javascript" src="hide&show.js">
</script>
</head>
<body >
<div class="bbq">
<div class="bbq-nav bbq-nav-top menu">
<a class="mainitem menu_links" href="">Welcome</a> <br>
<a class="menu_links" href="#" onclick="getusto('welcome'); return false;">Welcome</a><br>
<a class="menu_links" href="#" onclick="getusto('guidelines'); return false; ">Guidelines</a>
<br>
<hr style="width:48%"/>
<br>
<a class="mainitem menu_links" href="#Regular-Visitors-&-Ops.html">Regulars & Ops</a> <br>
</div>
<br>
<div class="bbq-content centercontent">
<!-- This will be shown while loading AJAX content. You'll want to get an image that suits your design at http://ajaxload.info/ -->
<div class="bbq-loading" style="display:none;">
<img src="/shell/images/ajaxload-15-white.gif" alt="Loading"/> Loading content...
</div>
<!-- This content will be shown if no path is specified in the URL fragment. -->
<div class="bbq-default bbq-item">
default welcome text here.
</div>
</div>
</div>
</body>
</html>
Now, the problem is Regular-Visitors-&-Ops.html page wouldn't load, but it was loading! So I tinkered with my undos until I found that not including prototype.js let that link work via jquery bbq's way.
What gives? How do I get both prototype.js & jquery bbq coexisting? I need both for different things..
to get this up & running you need an additional Regular-Visitors-&-Ops.html file in the same directory, say:
<!DOCTYPE html>
<head>
</head>
</body>
this is the additional file.
</body>
</html>
As well as jquery, jquery bbq's two scripts (I named one myself), & prototype.js.
now if you do set this up - takeaway prototype & the Regular-Visitors(...) link works. problem is, i am using prototype.js. so either how do i get these two to work, or more easily, how i do implement a scrollTo function (can't use anchors, due to jquery bbq hogging the anchors/hashes (e.g. "#welcome" in "index.html#welcome") WITHOUT USING PROTOTYPE.JS? there should be one right?
By including prototype.js after jQuery, Prototype will override the value of the global $ variable. You just need to use:
var $j = jQuery.noConflict();
You can then use $j in place of $ in jQuery contexts and $ for prototype contexts. Here's the documentation: http://api.jquery.com/jQuery.noConflict/.
jQuery and Prototype both use the $ character so they will conflict.
If you wish to use them both together you will need to make use of jQuery's noConflict() method to release the $ alias back to Protoype
There is also a scrollTo jQuery plugin