In my web page, I am tryin to use both "kwick" and "cycle" jquery plug-ins. When I use one of them (does not matter which one) it is running properly. But when I try to use both, it gives an JS runtime error.
This is how I am using them :
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="kwick/moo1.2.js" type="text/javascript"></script>
<script src="kwick/myKwcik.js" type="text/javascript"></script>
<script src="Scripts/TniyJs.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1500, // speed of the transition (any valid fx speed value)
delay: 500,
});
});
</script>
When I use it like above(in my question) it does not give any error, my 'cycle plug-in' works but 'kwick' does not.
When I move down the "jquery-1.6.4.min.js" to last tag (to the end of the script tags) it throws me the error : Microsoft JScript runtime error: Object doesn't support property or method 'cycle'
when I disable "jquery 1.5" then : Microsoft JScript runtime error: Object doesn't support property or method 'ready'
Please help me If you know the problem or solution.
Thanks.
sounds like a Mootools & jQuery conflict
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j('.slideshow').cycle({
fx: 'fade',
speed: 1500,
delay: 500
});
});
you do not need two versions of jQuery. just reference this latest version on Google's CDN https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
and Mootools:
https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js
Edit: If you only include Mootools for kwicks you might want to consider using Kwicks for jQuery. http://www.jeremymartin.name/projects.php?project=kwicks that saves you the loading of an extra library/resource
Related
I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:
Uncaught TypeError: Object [object Object] has no method 'tokenInput'
Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
And showing that tokeninput has loaded:
Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:
<script src="http://code.jquery.com/jquery.js"></script>
It seems having multiple versions of jQuery loaded is not a good thing to do.
I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.
Then try this
<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();
j(document).ready(function () {
j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/
I'm trying to use two(three if consider that the second uses 2 files) different plugins, jPanelMenu.js(to do a google mobile-like menu) and Superscrollorama.js(wich works together TweenMax.js), unfortunately they are conflicting, both works fine when alone, but when I put them both on the page, it all crashes. I already tried to use $.noConflict(); and jQuery.noConflict(); in a lot of different ways, unsucesfully. The best I managed to do is to make scrollorama/tweenmax work.. But, jPanelMenu still crashes.
Here's my code:
<script type="text/javascript" src="public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="public/js/jquery.jpanelmenu.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function () {
var jPM = $.jPanelMenu({
menu: '#menu',
trigger: '.menu-trigger',
easing: 'ease',
duration: 250
});
jPM.close(true);
jPM.on();
jPM.trigger(onClick);
});
</script>
<script type="text/javascript" src="public/js/TweenMax.min.js"></script>
<script type="text/javascript" src="public/js/jquery.superscrollorama.js"></script>
<script>
jQuery(document).ready(function($) {
var controller = jQuery.superscrollorama({
playoutAnimations: true
});
controller.triggerCheckAnim();
controller.addTween('.scroll-trigger',
(new TimelineLite())
.append([
// Scale Logo
TweenMax.fromTo(jQuery('#logo'), 1,
{css:{width: '100%', padding:'15px 0 0 0'}, ease:Strong.easeInOut, immediateRender:true},
{css:{width: '59%', padding:'5px 0 0 0'}, ease:Strong.easeInOut})
]),0,0);
});
</script>
I'll really really really appreciate if someone here could help me with that..
As per the additionnal details that you gave me. Your problem is not a conflict between jQuery and others, but simply that the onClick function was not defined. The trigger function open or closes the menu depending on it's state and takes a boolean argument that specifies if the action will be animated or not.
If you do not want the menu to open when the page load, simply remove the jPM.trigger(...); call.
I need to create a dialog with jQuery in a pretty big project. In some places, this project uses jquery wich version is different from the one I use recent for my window.
My code looks like this:
on ascx page
<html>
<head>
<link type="text/css" href="css/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="js/myjQueryCode.js"></script>
</head>
<body>
</body>
</html>
in myjQueryCode.js file
$(document).ready(function() {
$("#dialog-form").dialog({
autoOpen: false,
height: 440,
width: 500,
modal: true,
closeOnEscape: false
});
});
At runtime, I get the error:
Microsoft JScript runtime error: Object doesn't support property or
method 'dialog'
Thanks for your answers. The problem was that the library was included multiple times in different files.
The dialog method is from the jQuery UI library. It looks like you are using a custom version of jQuery UI, which may not include dialog.
You can customize which modules to include in jQuery UI here: http://jqueryui.com/download
View the page's HTML to see if there are script references to other versions of jquery in the page. If an older version is loaded after the correct version then invalid methods will throw exceptions.
If all of the above fails, try:
Check your packages installed - I resolved this issue by Installing Nuget Package: JQuery.Draggable - See: http://www.nuget.org/packages/jQuery.UI.Interactions.Draggable/
For the love of God I need help! I'm trying to get Caroufredsel and fancybox to work together like they do here:
http://caroufredsel.frebsite.nl/examples/carousel-lightbox-tooltip.php
...bu I can only get them working independently. I don't really know javascript so I'm failing hard :(
Here is where I've tried implementing it:
http://www.meanbeangames.com/
Only Caroufredsel is working at this point. Fancybox works if I remove all Caroufredsel code.
You are referencing jQuery library twice at line 15 and 189 (view source), this caused all reference to fancybox plugin added earlier to be lost (as jQuery variable is re-defined the second time you include jQuery). Remove the
<script type="text/javascript" src="js/jquery.js"></script>
at line 189 and you should be set.
First of all:
You are loading jQuery (the Javascript library) twice. Once in your <head> section (<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>) and once in before your closing </body> tag (<script type="text/javascript" src="js/jquery.js"></script>). Remove the last and update the first one to the most recent version of jQuery, like so:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Second:
It might be better to give better structure to your script: or you load all of them in your head, or all of them before the closing </body> tag. This way, you won't look over scripts that are somewhere you wouldn't expect them to be. Best practice is often said to include all scripts before the closing </body> tag. Don't forget to load jQuery before all the rest of your scripts! In your case it would look like this:
<footer>...</footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#foo2").carouFredSel({
circular: true,
infinite: false,
auto: false,
prev: {
button: "#foo2_prev",
key: "left"
},
next: {
button: "#foo2_next",
key: "right"
},
pagination: "#foo2_pag"
});
$('.fancybox').fancybox();
});
</script>
I'm trying to combine Drupal with Picasa web integrator.
I have these 3 lines in the section of my page.tpl.php:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/fotos/js/jquery.slimbox2/jquery.slimbox2.js" language="JavaScript"></script>
<script type="text/javascript" src="/fotos/js/jquery.pwi.js" language="JavaScript"></script>
I also added this script to my head section, to test an album (the username and albumname are not important, I tested it offline with my username and album and that worked fine):
<script type="text/javascript">
$(document).ready(function() {
$("#container").pwi({
username: 'My',
maxresults: 5,
mode: 'album',
album: 'MyAlbum'
});
});
</script>
Google Chrome gives me this error when I try it on my Drupal-page:
prototype.js:5733Uncaught TypeError: Object#<Object> has no method 'dispatchEvent'
Drupal also comes with jQuery, and you cannot simply just add the later version in <script> tags. You can try using Drupal's jquery update to get a more recent version, or try noConflict (I suspect you will need it anyhow if you want to use Prototype).
It looks like you are also loading prototype.js on the page (used by lightbox.js, perhaps?, and that perhaps the $ used by both jQuery and Prototype are conflicting. If you really need to use both Prototype and jQuery, look into using jQuery's noConflict mode: http://api.jquery.com/jQuery.noConflict/.