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>
Related
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 want to only change page with jquery mobile/cordova on android phone.
My simple codes:
<div data-role="header" data-position="fixed">
<h1>Event List</h1>
Options
</div>
If I click options button,"Error loading page" looks for few seconds.Logcat:
XMLHttpRequest cannot load
file:///C:/Users/btstajer/Desktop/workspace/Fetcher/assets/www/options.html.
Received an invalid response. Origin 'null' is therefore not allowed
access.
Hey I found problem.Due to the jquery version differences.
Such as:
If jquery-2.1.1.min.js the above does not work.
<script type="text/javascript" charset="utf-8" src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.3.min.js"></script>
does not work.
But If jquery-2.1.1.min.js bottom,work but such is not seen its css file.
<script src="js/jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.1.1.min.js"></script>
What's the matter?? If I use jquery-1.8.3.min.js work fine but I need this version.help me
And I tried on Chrome and Firefox.Chrome gave the same error.But firefox worked succesfully.Any ideas? thanks..
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>
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("...")
I am trying to experiment with jQuery mobile, but can't seem to get started.
I have the following HMTL file hosted on a local server:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
</body>
</html>
Which is causing
Javascript error: undefined SECUIRTY_ERR: DOM Exception 18
when accessed from my iPhone from http://192.168.1.1:8000/mobile.html
Did you link the CSS stylesheet file as well before the jquery script include tags?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Also, in order for the page to show, you must contain content into containers like this:
<body>
<div data-role='page'>
<div data-role='header'>
Header goes here
</div>
<div data-role='content'>
Content goes here
</div>
</div>
</body>