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
Related
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>
In my default.jspx which contains the basic layout for the page I am trying to import some jquery libraries as follows
<head>
...
<spring:url value="/resources/js/lib/jquery-1.9.1.min.js" var="jquery_url" />
<spring:url value="/resources/js/lib/jquery.tokeninput.js" var="jquery_tokeninput_url" />
<script src="${jquery_url}" type="text/javascript"></script>
<script src="${jquery_tokeninput_url}" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
</script>
<util:load-scripts />
...
</head>
but when the page is rendered in the browser the first script tag swallows the two others
<head>
...
<script type="text/javascript" src="/roo-inari/resources/js/lib/jquery-1.9.1.min.js">
//These lines are inside the first script tag
<script type="text/javascript" src="/roo-inari/resources/js/lib/jquery.tokeninput.js"/>
<script type="text/javascript">
$.noConflict();
//The tag is closed here
</script>
<link href="/roo-inari/resources/dijit/themes/tundra/tundra.css" type="text/css" rel="stylesheet">
...
Any idea what might be causing this? The project is based on a spring roo generated web mvc scaffold.
I am using Chrome v.25.
The simple solution was to write a comment inside the tag so that it is not closed automatically. Silly me
<script src="${jquery_url}" type="text/javascript"><!-- required for some browsers --></script>
I want to integrate Fancybox in my gallery with the following Code:
Include the scripts :
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="tl_files/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="tl_files/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="tl_files/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" href="tl_files/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="tl_files/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
my Link to an picture looks like that :
< a class="fancybox" data-fancybox-group="gallery" title="hello world" href="tl_files/photomania/images/51.jpg"><img src="tl_files/photo/images/51.jpg"></img></a>
And in the end i call the fancy box with following code:
<script type="text/javascript">
(function($) {
$('.fancybox').fancybox();
})(jQuery);
</script>
But nothing happens.. please help me
What kind of error du you get?
Have you checked the javascript console, or firebug (if you use firefox/iceweasel)?
Paste the error messages and it will be easier to help you out.
try this:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
Since you load jquery at the first row I don't think you need to do it like that.
It should work.
I have a script for dynamic javascript date picker, taken from here. Please scroll down to Toggle by Element which i want to implement but it is not working
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<SCRIPT type="text/javascript" src="js/jquery.min.js"></SCRIPT>
edit: i added the following mootools script
<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools/1.3.2/mootools-yui-
compressed.js'
type='text/javascript'></script>
<SCRIPT type="text/javascript" src="datepicker.js"></SCRIPT>
<SCRIPT type="text/css" src="datepicker.css"></SCRIPT>
<SCRIPT type="text/css" src="datepicker_vista.css"></SCRIPT>
</head>
<body>
<script language="JavaScript">
window.addEvent('load', function() {
new DatePicker('.demo_allow_empty', {
pickerClass: 'datepicker_dashboard',
allowEmpty: true
});
});
</script>
<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date demo_allow_empty' />
</body>
</html>
what i am missing?
It seems it require mootools, i cant see any mootools script tag in your source.
it has nothing to do with jQuery.
edit : here is an exemple :
<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'
type='text/javascript'></script>
put it before the date picker 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.