I'm attempting to install prettyPhoto lightbox on my site and I keep getting them same error. The following code in the console generates this error
"undefined is not a function"
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Line 18
I've tried it in the footer and the head, both cause the same problem and the lightbox doesn't load.
Here's the files in my head tag...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
My site is www.jessicadraws.com
Any ideas?
Dave.
Your page loads 3 versions of jQuery. This is likely causing issues with other plugins. Pretty Photo is loading fine - it's just loading onto jQuery 1.9
I can see this by running this in the devtools:
var jquery162 = $.noConflict(true);
> undefined
$.fn.jquery
> "1.9.0"
$.prettyPhoto
> Object {version: "3.1.5"}
To fix this won't be simple unfortunately, you'll need to decide which version of jQuery you are using and stop loading the rest.
For reference in <head> you are loading:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
PrettyPhoto is loaded just after these, in the head.
In your <body>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Related
I have looked around at questions similar to the above and none of them have helped.
Here are my scripts
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="network.json"></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<link type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<body>
<link href="ajs_network1.css" rel="stylesheet" type="text/css" />
<script src="ajs_network1.js" type="text/javascript"></script>
</body>
Here is the function trying to call JQuery
$(function () {
$("#search").autocomplete({
source: optArray
});
});
For some reason its bringing up the error
TypeError: $(...).autocomplete is not a function.
I am guessing ive done something wrong with the scripts ?
by just adding this link reference my issue was resolved
<script async src="//code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
Try adding those links into your code as you are missing those
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
The links were correct i was using. But because i was retrieving links online i didnt put in http at the beginning. So the links would now be :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
Also, there were hidden characters for some reason when i copied the link over so the link wasnt working. When working with this make sure your browser is retrieving the links. FireBug help me with this. Click 'net' and it will tell you what scripts the browser is importing.
Thankyou to all that helped :)
I have checked a lot of forums, but i did't find a solution.
site -> http://dszerszen.pl/domi/
and this code
<script type="text/javascript">
$(document).ready(function(){
$(".info").tytabs({
tabinit:"1",
fadespeed:"fast"
});
});
</script>
icon switcher dosent work
Simply rearrange your scripts in this order:
<script type="text/javascript" src="jquery.min.js"></script>
<script src="modernizr.custom.63321.js"></script>
<script type="text/javascript" src="tytabs.jquery.min.js"></script>
<script src="scrolltop.js" type="text/javascript"></script>
<script async src="analytics.js"></script>
The jQuery core library should be included first followed by the other plugin code.
You have defined scrollTop.js in two places.
One is at the top of css files. And jquery is not loaded before that. That's why you are getting error.
<title>Smykke Galleriet</title>
<link type="text/css" rel="stylesheet" href="stylesheet.1.css" />
<script src="scrolltop.js" type="text/javascript"></script>
Remove that line and it will work properly.
I have added fancybox to my site but every way I try it just won't work. All it does is just open the image in a new window! I am only calling jQuery once. The only thing I can think is it's conflicting with the other JavaScript code in my site.
When I run the page using Firebug I get the error: "type error fancybox is not a function". All code is in end of head tag.
Here is code:
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script src="js/libs/modernizr.min.js"></script>
<script src="js/libs/jquery.easing.1.3.min.js"></script>
<script src="js/libs/jquery.fitvids.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
<a class="fancybox" rel="group" href="images/linked _big.png"><img src="images/linked.png" alt="linked" /></a>
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 have following script:
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
jAlert("message","title");
</script>
in my html head.but the dialog is not showing up when I load the page(it would if I simply use alert).
where did I do wrong? Am I missing the corresponding js files?
edit: I included the jquery.alerts.js file.it is still not working.
edit: I added this line and put the file in the dir
<script type="text/javascript" src="jquery.alerts.js"></script>
Yes I put it inbetween.
I opened the browser console and saw this:
"Uncaught TypeError: Cannot read property 'scrollHeight' of null jquery-1.8.2.js:9405"
jAlert isn't a part of native jQuery.
You can find the project page here, the download link is at the bottom.
Make sure you include it straight after jQuery - your code should look as follows:
<link rel="stylesheet" type="text/css" href="jquery.alerts.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jAlert("message","title")
});
</script>