I am using jquery 1.10.2 to include a slider on my website, but for some reason it is not showing up. Please help!
Here is my code:
<head>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script src="js/jquery-1.10.2.js"></script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
<script>
$(document).ready(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
Why is it not showing up? Code seems to be correct.
The JQUERY UI library also requires the standard JQUERY Library.
Related
I hope this is not a stupid question/issue. I am trying to use fullcalendar for the first time. I am running this from flask on a local server. Here is the code I am attempting to use, based on examples I have found from some googling:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script>
$(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
So when I run that, it just gives me nothing.Am I missing a resource?
You never load the fullcalendar into the div. Do it like this:
<!DOCTYPE html>
<html>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
This way you load it as soon as the document is ready.
Can you check your css link? I think It should end with fullcalendar.min.css not fullcalednar.min.css.
I am new to JQuery stuff ,but this is ridiculous ,i cant do drag and drop work
.php file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Test</title>
</head>
<body>
<span id="drag">Drag me</span>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</body>
</html>
my drag js file
$(document).ready(function() {
$('#drag').draggable();
});
By the way, do i need to have JQuery UI to make drag and drop stuff?
Thank you
You should include the libraries in the correct order:
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
Your custom code (drag.js) should be last, after jquery and jquery-ui have been loaded.
The draggable() function requires jQueryUI to work. After including jQueryUI your code works fine.
$('#drag').draggable();
http://codepen.io/tejzpr/pen/raXqKz
I would use cdn to save on speed and resources, and also be sure that you have a working copy. The order was probably your issue, however, as people mentioned above.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
You should first load UI script and use it after.
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
Important: don't forget jQuery 2.* browser compatibility:
https://jquery.com/download/#jquery-2-x
It doesn't support IE 8 or earlier!
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>
Following the link:
http://www.asp.net/ajaxlibrary/jquery_introduction.ashx
& then:
http://jquery.com/download/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DDownloading_jQuery%26redirect%3Dno
I have included the script files at the top of my page:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Then I have included the code for the datepicker:
<input type="text" id="simple-date" />
<script type="text/javascript" language="javascript">
// the jQuery ready shortcut
$(function () {
// set up our datepicker
$("#simple-date").datepicker();
});
</script>
but nothing happens when I click the text field....shouldnt a datepicker load?
Please advise.....thanks
I think you missed the jquery ui inclusion.
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
You forgot to add the jquery-ui plugin on your document
<script src="http//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
And have a look on themes too on the official site,I linked
Demo Fiddle
You should add both the CSS:
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
and the JS for jQuery UI
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
I am trying to use jScrollPane on my website.
After 4 hours of searching the bug I gave up.
I really hope someone of you got a clue of this.
This is my not working page: www.robert-richter.com
My code:
<link href="../css/jquery.jscrollpane.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.item').jScrollPane();
});
</script>
<article class="item"></article>
Any thought on the same will be appreciated.
Initialize your jQuery script
jquery(document).ready(function(){ your code here...});