I am a complete newbie when it comes to jQuery, but I'm trying to run a simple accordion() code on my HTML page.
This is the link I've used, I included the compressed production jQuery 2.1.0
<head>
<link rel="stylesheet" type="text/css" href="stylesheetkomik2.css">
<script src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="scriptkomik2.js"></script>
<title>Komiktoneel</title>
</head>
The piece of code I'm trying to accordion() is a series of tags with tags in them, which contain paragraphs, like this:
<div id="content">
<h3>This is the first heading</h3>
<div><p>First paragraph</p></div>
<h3>This is the second heading</h3>
<div><p>Second paragraph</p></div>
</div>
scriptkomik2.js contains nothing other than the following code:
$(document).ready(function(){
$("#content").accordion();
})
Is there something wrong in my code or is the linking wrong?
Thank you
You need to add jQuery UI
Accordion is a widget from jQuery UI and this library works on top of jQuery. So you need to add both js to your project.
<script src="js/jquery.js"></script>
<script src="js/jquery.ui.js"></script>
jQueryUI is missing. You have to add jQueryUI as well for accordian widget.
<head>
<link rel="stylesheet" type="text/css" href="stylesheetkomik2.css">
<script src="jquery-2.1.0.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="scriptkomik2.js"></script>
<title>Komiktoneel</title>
</head>
.accordion isn't a valid jQuery method. I think you're looking for jquery UI: https://jqueryui.com/accordion/
Try implementing that and see what happens.
Add the following script tag. Accordion is part of jQuery UI
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Related
I am trying to use Materialbox in Materialize, but the zooming effect does not seem to work. While the CSS hover works, clicking does not enlarge the image as it should.
I have tried both the jQuery method and the non-jQuery method shown on the site. I have made sure that jQuery is loaded before the script, and tried both including the script in the html in tags as well as putting it in another file.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<!--This is the where the image is-->
<img class="materialboxed" width="300" src="assets/model.jpg">
</div>
</div>
</div>
<script src="js/materialize.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<!--I used the provided code on the Materialize website-->
<script>
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
</body>
</html>
Looking at the console, I get three errors:
Loading failed for the with source “file:///Users/ned/Desktop/website/js/jquery-3.4.1.min.js”.
ReferenceError: $ is not defined
The character encoding of the HTML document was not declared. The document will render with...
My editor throws the ReferenceError as well whenever I try to use the code snippet in a separate file.
Try this:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/materialize.min.js"></script>
instead of this:
<script src="js/materialize.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
Actually, materialize itself uses jQuery in its code, so you must include jQuery first then materialize.min.js.
It works for me.
I'm sure I'm making a silly mistake but it took me hours and I couldn't find any solution for my problem. Everything seems ok but not working. I'm using Foundation 5 reveal. But modal window does not show. Here is my code:
HTML
<a class="openModal" href="#" data-reveal-id="imagemodal"><img src="image.jpg" /></a>
<div id="imagemodal" class="reveal-modal" data-reveal>Modal</div>
I've also included the following js files in body tag:
<script type="text/javascript" src="js/foundation/foundation.js"></script>
<script>
$(document).foundation();
</script>
<script type="text/javascript" src="js/foundation/foundation.reveal.js"></script>
Any help is appreciated in advance.
Put the call to foundation.reveal.js before you call $(document).foundation();.
I'm pretty sure this is because $(document).foundation(); initiates only those modules that have been specified prior to it, something that Foundation doesn't make clear in its notes.
Foundation offers you options to customize plugin initialization. By default, calling $('#scope').foundation(); will initialize all available plugins on the page.
I just wanted to add this piece of simple, near bare-bones modal markup, I spent nearly 4 hours last night getting it right, I don't think there's much out there to deal with these reveal-modal issues
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body>
reveal modal
<div class="reveal-modal" id="myNormal" data-reveal>
Modal
<a class="close-reveal-modal">close</a>
</div>
<script>
$(document).foundation();
</script>
</body>
I hope this is of any help for future visitors.
I am new to javascript and am trying to make a simple dialog open when the page opens, but it simply just displays the text of the dialog as if its a normal paragraph, no dialog. Here's my index.html:
<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<script type='text/javascript' src='js/jquery.js'></script>
<title>Welcome to Jetty-9</title>
<style type="text/css" title="maincss">
#import url(maincss.css);
</style>
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
And my maincss.css simply puts a background image in for the body nothing else, and the js/jquery.js file is the latest version of jquery, and I ensured it is linked right by loading the page, viewing page source, then opening the js file by clicking it
You need to include jQuery UI to take advantage of the dialog.
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
You are missing jQuery UI. Include the below code in head of your page.
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css' rel='stylesheet' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>
Visit here for more CDN links of various versions of jquery ui & its themes.
you have to import the JQuery UI's api's AFTER the JQuery main file
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
This way is should work:
<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<script type='text/javascript' src='js/jquery.js'></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title>Welcome to Jetty-9</title>
<style type="text/css" title="maincss">
#import url(maincss.css);
</style>
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
I'll assume you're trying to use jquery-ui dialog, if this is the case, you need to include jquery-ui files
These are latest versions from CDN
http://code.jquery.com/ui/1.10.3/jquery-ui.js
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
You could pick a different theme if required
Your code looks good and it is working. My guess is you're not properly importing the jQuery or jQuery UI.
Updated with reference to MaVRoSCy comments and take a look at this fiddle, working good.
I've been having trouble implementing jQuery - in particular, replicating this exercise from Code Academy. I understand from this other question on Stack Overflow that the <script> referencing jQuery.js needs to be placed before the <script> referencing the local JavaScript file in order for the $(document).ready(); to be recognized.
As such, here is index.html:
<!DOCTYPE html>
<html>
<head>
<title>Behold!</title>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>
</head>
<body>
<div id="menu">
<h3>jQuery</h3>
<div>
<p>jQuery is a JavaScript library that makes your websites look absolutely stunning.</p>
</div>
<h3>jQuery UI</h3>
<div>
<p>jQuery UI includes even more jQuery goodness!</p>
</div>
<h3>JavaScript</h3>
<div>
<p>JavaScript is a programming language used in web browsers.</p>
</div>
</div>
</body>
</html>
And then here is my index.js:
$(document).ready(function() {
$("#menu").accordion({collapsible: true, active: false});
});
In both Chrome and IE, this displays as a entirely blank page, with no trace of the jQuery accordion or text whatsoever.
Please let me know if I'm overlooking something - I really appreciate the help. Thanks!
This:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.j" type="text/javascript"></script>
Should be this:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
I don't know if this error is just from copy'n'paste but the file extension is incorrect (should be "js" and not "j").
Furthermore you do not include jQuery itself (only jQuery UI).
Use the following head-Area:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>
These work for me.
I am implementing a JQuery autocomplete on a HTML page. Unfortunately, the drop down layout is not a clean box with entries (see http://jqueryui.com/autocomplete/), but rather a ul-like list of links:
I am using:
<script src='http://code.jquery.com/jquery-2.0.0.min.js'
type="text/javascript"></script>
<script src='http://code.jquery.com/ui/1.10.0/jquery-ui.min.js'
type="text/javascript"></script>
What am I doing wrong?
You are missing the jquery ui CSS file that gives the style to your page.
Add the following line to your HTML page tag:
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">