I've got an Unordered List setup, I would like to apply the simple elastic property used in jQuery. When running the script, I keep getting an JavaScript Error :
Error: D.easing[this.options.easing || (D.easing.swing ? "swing" : "linear")] is not a function
Source File: jquery-pack.js?1296815924
The Java is working but it is not creating the desired effect. My jQuery Code is :
<script type="text/javascript">
$(document).ready(function(){
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: "easeOutElastic"})
});
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: "easeInBounce"})
});
});
</script>
I had taken this script from a tutorial, so would have expected it to work. It seems that the easing is not being passed from page to the script?
Any help appreciated.
The easeOutElastic and easeInBounce easing functions are defined by the jQuery UI plugin, not by the core jQuery framework.
You'll have to include that plugin in your page.
You have to include an easing library like this one: http://gsgd.co.uk/sandbox/jquery/easing/
#Frédéric Hamidi No need for the whole jQuery UI there...
Related
I have the following functional (in html) jsfiddle:
http://jsfiddle.net/pmpvLjuq/1/
I've found that in order to be functional in Wordpress too, should be used in jQuery's noConflict mode. In wp codex I've found this section:
At this point, I'm not so sure if I understand the global term in these circumstances. Should I replace all the $ signs with jQuery ?
What I've done without error in the console (but I'm concerned) also working in wp pages it's here: http://jsfiddle.net/8r9rcft2/2/
In other words, in these particular cases should I still replace the $ mark(?)
line 15
$links = $(".pagedMenu li"), will be jQuerylinks = jQuery(".pagedMenu li"),(?)
line 16
count = $links.length, will be count = jQuerylinks.length, (?)
line
The same for lines 25,26,26, ect.
Can I have your prepared for wordpress jsfiddle in jQuery's noConflict mode in order to have the whole picture of this process please?
Can you please confirm, as a rule of thumb, if I dont receive any error in the browser console that means everything is fine in the code? Thanks
I always used jQuery like this in wordpress and it's working for me I hop this is working for you.
(function($){
$(document).ready(function(){
// write code here
});
// or also you can write jquery code like this
jQuery(document).ready(function(){
// write code here
});
})(jQuery);
I always prefer below method because it always separate jquery libraries and never conflict and it is one of recommended method of jquery.
Its just a example. I mostly used it for smooth scrooling.
$scroll= jQuery.noConflict();
$scroll('a').click(function(){
$scroll('html, body').animate({
scrollTop: $scroll( $scroll(this).attr('href') ).offset().top
}, 1000);
return false;
});
I had implemented this jQuery Cycle with Rotate and Tabs in a previous application and it ran without any problem because the rotate method was included within jQuery UI. My previous app used jQuery 1.6
Now I am trying to implement this in a .NET application that is Bootstrap enabled, I'm using jQuery 1.11.2 and Bootstrap 3.
There is an issue because rotate method has been removed from jQuery UI Tabs.
So I added jquery-ui-tabs-rotate.js
Chrome Console shows 2 errors:
1. Cannot read property 'tabs' of undefined from rotate
2. Another issue is: $(...).tabs is not a function
$("#featured > ul").tabs({ fx: { opacity: "toggle" } }).tabs("rotate", 5000, true);
Here is the Test Page
I also tried to add the latest Cycle CDN which didn't fix the problem:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
I was wondering if anyone knows why this jQuery Cycle Tabs isn't firing?
I simplified the Code, removing the other JavaScript made no difference:
$(document).ready(function () {
$("#featured > ul").tabs({ fx: { opacity: "toggle" } }).tabs("rotate", 5000, true);
});
It looks like the rotate method has been removed from jQuery UI Tabs, as you can see by this error message appearing in the console of your page:
Uncaught Error: no such method 'rotate' for tabs widget instance
Doing a search reveals that this method was removed from jQuery UI Core. It looks like you can implement a third-party extension to fix this.
I'm quite new at this, so please be thorough with the explanation.
I'm using the Lightbox 2 jQuery file, along with another jQuery file to execute a menu slide animation and a fade animation on my images.
I'm assuming that there is conflict between the two jQuery files, but I'm not sure how to resolve it.
Any advice? I read something about jQuery.noConflict(), but I'm not sure how to implement it, or it if will work.
<script src="../Scripts/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#ScrollBox img').animate({
opacity:.5
});
$('div#ScrollBox img').hover(function(){
$(this).stop().animate({opacity:1}, 'fast');
}, function(){
$(this).stop().animate({opacity:.5}, 'slow');
});
});
</script>
<!--LIGHTBOX-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
It looks like you are loading two different jQuery versions (1.10.2 and 2.0.2), which is, I believe, causing the problem. I would recommend removing the 1.10.2 jQuery script, and one of the following (in order of effort, in case you want to try all 3):
-see if your lightbox plugin still works
-find a newer version of the same lightbox
-use a different lightbox, for example fancybox
In any case, make sure that your end result only has one version of jQuery being loaded.
Is there a reason you need both? They should have pretty much the same code so you only need to include one. I would use whichever is the latest.
It would help if you included in your post the lines of code where you explicitly add them so we can see what you are doing.
I have added the JQuery plugin Isotopte to my site.
It works but only after the browser resizes. The images just seem to stack up on each other before hand.
My code to is:
$(function(){
$('#isotopecontainer').isotope({
itemSelector: '.frontitem',
masonry: {
}
});
});
I've tried adding columnWidth as the site suggests but this makes no difference.
Im really not sure what is going on. Can anyone help me out at all?
I don't know exactly where your issue is but I got a working solution.
Working solution (JSFiddle)
$(document).ready(function(){
$('#isotopecontainer').isotope({
// options
itemSelector : '.frontitem',
masonry : {}
});
}
);
It has all of your options but I can't seem to find exactly where your code is wrong. I did use the document ready callback that jquery supplies however I don't think that was the issue.
Also make sure you include jquery before isotope.
On one of my content pages, I'm using the jCarousel and Fancybox JQuery plugins.
The problem is that only one of them works at a time, so I think there must be a conflict.
This is the code used:
<script src="js/jquery.jcarousel.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.showcase').jcarousel({
start: 1
});
});
</script>
<script>
$(document).ready(function() {
$('.fancybox-form').attr("href", "contact.php").fancybox({
"width" : 400,
"height" : "90%",
"autoScale" : false,
"transitionIn" : "elastic",
"transitionOut" : "elastic",
"type" : "iframe"
});
});
</script>
Is there a conflict between the "jQuery(document).ready(function()" of the jcarousel script and the "$(document).ready(function()" of the fancybox script?
Any help on how to overcome the conflict (if this is the problem) would be appreciated.
Thanks, Mark.
It appears your problem is in the fact that jCarousel moves images in and out of view - causing a problem with fancybox. So the answer is that you cannot easily use both together (without re-writing the fancybox plug-in).
I would look at using a different carousel that already has the expand pop-up feature built-in.
On a side note, I would place all of the code in either
jQuery(document).ready(function()
or
$(document).ready(function()
for cleanliness.