Here's my code;
<head>
<title>page title</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
</head>
<body>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<div id="accordion">
<h3>-shift title-</h3>
<div><p>-shift content here-</p></div>
<h3>-shift title-</h3>
<div><p>-shift content here-</p></div>
</div>
I'm sure i've missed something but my thinking is i've used a CDN and put the function in, the divs are not collapsing?
Problem was not including <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
I think you are using jQuery UI so you'll need to include that library below jQuery
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
I'm not totally sure, but I think you may be missing some css files.
Use this as scripts, let's see if it's working:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<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
I am trying the jquery alert example on this webpage: http://www.tutorialscollection.com/jquery-demo/jquery-demo.php?ex=8.0_1. I'm new to using jquery and I can't figure out how to get the dependencies listed in the head section:
<head>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
Here is the full file, but probably not needed:
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Example script -->
<script type="text/javascript">
$(document).ready( function() {
$("#basic_button").click( function() {
jAlert('Example of a basic alert box in jquery', 'jquery basic alert box');
});
});
</script>
</head>
<body>
<p>
<input id="basic_button" type="button" value="Show Basic Alert" />
</p>
</body>
</html>
Google hosts a CDN. To make sure JQuery's libary is loaded add this into the <head> tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
If you are trying this on a local machine then you can download jquery here and set it up in the <head> as this:
<script src="path_to_jquery" ></script>
I found the dependencies here:
http://www.tutorialscollection.com/jquery-demo.
This serves my purposes much better than the tutorial in this question: How to generate a simple popup using jQuery
I have trouble including Jquery in my HTML page. I'm trying to display a calendar clicking on a button, but the calendar is not showing up. The following error showed up : $(..)Datapicker is not a function. I've looked up on internet, and people said it was because of multiple including. But I'm pretty sure that I've only included Jquery once, because when I remove the Jquery include, it says that I do not include it. Here is the header:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<script src="https://use.fontawesome.com/6cd7c64e2b.js"></script>
<link rel="stylesheet" type="text/css" href="/static/app/css/control/style.css" />
<link rel="stylesheet" type="text/css" href="/static/app/css/control/ir-button.css" />
<link rel="stylesheet" type="text/css" href="/static/app/css/recorder/style.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="/static/app/js/recorder/timer.js"></script>
Note that the js script is in the header because I wanted to test it as it was not working in an external file!
Thanks in advance!
You need to include jQuery (core) too. Actually you only added jQuery UI, witch is an extension for jQuery itself.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
And are you sure using such an old version of jQuery UI? Current version of jQuery UI is 1.12.0, working with all jQuery versions since 1.7.
Try to fix it by following order and version of jquery files. Check below code snippet.
$( function() {
$( "#datepicker" ).datepicker();
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<input type=text id="datepicker"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="./jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/files/jQueryRotate.2.1.js"></script>
I want to use the image resize and drag function of Jquery UI in a Jquery Mobile-based page, but after adding Jquery UI lib in the page, all Jquery Mobile CSS lost effect.
Anyone got any hints? Thanks in advance.
Consider the following html head javacsript and css referecnes:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
The above datepicker does not work, but this does:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
So if I place the referencve 'fadeslideshow.js' above the the reference to the main jquery library and ui file. Similarliy if I comment out the fadeslideshow.js reference the datepicker will work.
Why would this be the case, it took me over an hour to figure out why the datepciekr was not working?
Thanks,
Alan.
Because browsers evaluate Javascript files as soon as they are loaded. fadeslideshow.js depends on either jQuery or jQuery UI. it will try to reference a non-existant object, which, depending of the functionality of the script, may set a variable to a state not compatible to jQuery UI's datepicker.
Fixed by adding a reference to an old version of jquery which fadeslideshow.js must obviously depend on:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
I'm just posting my entire page to prevent confusion. I've stared at each link and checked the folder for the files. it all seems to be there. what's not working? very frustrated, could use a fresh pair of eyes. all my page displays is the content of the pre, but without any formatting. again, thanks for the help
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--SYNTAX HIGHLIGHTER-->
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="shBrushPhp.js"></script>
<!--JQUERY and PROCESSING SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="text/javascript">
SyntaxHighlighter.HighlightAll();
</script>
</body>
</html>
Four things:
SYNTAX HIGHLIGHTER - put the .js files AFTER the jquery, jQueryUI, etc. scripts. The order is important!
use $(document).ready to make sure that all the js files are loaded before the body content tries to use it.
Are you using firebug or some such tool to check for script errors in the browser?
Are you getting any errors at all or just not seeing the highlighting effect?
By replacing:
SyntaxHighlighter.HighlightAll();
with
SyntaxHighlighter.all();
your sample code works for me.