I am getting started with velocity.js and I included the file like this:
<script src="velocity.js"/> </script>
and in the script part I wrote
window.onload = function(){
$("div").velocity({opacity:1});
}
The rest of the function is only the css for the div, so not very important.
The problem I have is that I always get the error code:
Uncaught ReferenceError: $ is not defined
If I use jQuery with .animate no such problem appears (but in the code above I only use velocity).
If you don't want to use jQuery, you cannot use $.
I've never used it before, but if this tutorial is right, you could do:
window.onload = function(){
var divs = document.getElementsByTagName("div");
divs.forEach(function(el) {
Velocity(el, {opacity:1});
});
}
I think you have an conflict with jQuery. Try .noConflict() to avoid it.
See: https://api.jquery.com/jquery.noconflict/
$j.noConflict();
jQuery( document ).ready(function( $j ) {
// Code that uses jQuery's $j can follow here.
});
Have you tried this?
Velocity(document.getElementById("dummy"), { opacity: 0.5 }, { duration: 1000 });
Related
My jquery file is not working in WordPress.The error is here:
My js code:
(function($) {
$(document).ready(function(){
$('#read_more').click(function() {
$('.display_none').show().animate({'transition': '2s'});
});
});
})( jQuery );
I have an added custom-script.js file in functions.php like this:
function aristo_css_js(){
wp_enqueue_script('myjs', get_template_directory_uri().'/assets/js/custom-script.js');
wp_enqueue_script('myjs');
}
add_action('wp_enqueue_scripts','aristo_css_js');
What is the main problem for this was not working? But if I added custom script code before body tag it's working. ?
I solve my own question by add jquery file before my custom-script
wp_enqueue_script('jquery-main', get_template_directory_uri().'/assets/js/jquery-3.3.1.min.js');
wp_enqueue_script('myjs', get_template_directory_uri().'/assets/js/custom-script.js');
I had this same issue once.
WordPress ships with its own version of the jQuery library.
Try using jQuery instead of just $ sign.
For example:
var svg = $("#svg-container");
should be replaced with
var svg = jQuery("#svg-container");
Try to use this updated javascript code,
jQuery.noConflict();
(function(jQuery) {
jQuery(document).ready(function(){
jQuery('#read_more').click(function() {
jQuery('.display_none').show().animate({'transition': '2s'});
});
});
})( jQuery );
function aristo_css_js(){
wp_enqueue_script('jquery-main', get_template_directory_uri().'/assets/js/jquery-3.3.1.min.js');
wp_enqueue_script('myjs', get_template_directory_uri().'/assets/js/custom-script.js');
}
add_action('wp_enqueue_scripts','aristo_css_js');
Thanks!
I hope this will fix your issue
(function($) {
// Use $() inside of this function like so
$(#selector)
})(jQuery);
I have a simple jQuery script in a WordPress plugin that is using a jQuery wrapper like this:
$(document).ready(function(){
// jQuery code is in here
});
I am calling this script from within the WordPress Dashboard and am loading it AFTER the jQuery framework has loaded.
When I check the page in Firebug I constantly keep receiving the error message:
TypeError: $ is not a function
$(document).ready(function(){
Should I maybe wrap the script in this function:
(function($){
// jQuery code is in here
})(jQuery);
I have had this error quite a few times and am not sure how to handle it.
Any help would be greatly appreciated.
By default when you enqueue jQuery in Wordpress you must use jQuery, and $ is not used (this is for compatibility with other libraries).
Your solution of wrapping it in function will work fine, or you can load jQuery some other way (but that's probably not a good idea in Wordpress).
If you must use document.ready, you can actually pass $ into the function call:
jQuery(function ($) { ...
This should fix it:
jQuery(document).ready(function($){
//you can now use $ as your jQuery object.
var body = $( 'body' );
});
Put simply, WordPress runs their own scripting before you can and they release the $ var so it won't collide with other libraries. This makes total sense, as WordPress is used for all kinds of web sites, apps, and of course, blogs.
From their documentation:
The jQuery library included with WordPress is set to the noConflict()
mode (see wp-includes/js/jquery/jquery.js). This is to prevent
compatibility problems with other JavaScript libraries that WordPress
can link.
In the noConflict() mode, the global $ shortcut for jQuery is not
available...
This solution worked for me
;(function($){
// your code
})(jQuery);
Move your code inside the closure and use $ instead of jQuery
I found the above solution in https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma
...after searching too much
var $=jQuery.noConflict();
$(document).ready(function(){
// jQuery code is in here
});
Credit to Ashwani Panwar and Cyssoo answer: https://stackoverflow.com/a/29341144/3010027
Reasons why in WordPress jQuery and not $ is used: https://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/
You can avoid confliction like this
var jq=jQuery.noConflict();
jq(document).ready(function(){
alert("Hi this will not conflict now");
jq('selector').show();
});
Try this:
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
</script>
Also, I find the good solution for use jQuery noConflict mode.
(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 found this solution from here TryVary.com.
You have to pass $ in function()
<script>
jQuery(document).ready(function($){
// jQuery code is in here
});
</script>
replace $ sign with jQuery
like this:
jQuery(function(){
//your code here
});
Double check your jQuery references. It is possible that you are either referencing it more than once or you are calling your function too early (before jQuery is defined). You can try as mentioned in my comments and put any jQuery reference at the top of your file (in the head) and see if that helps.
If you use the encapsulation of jQuery it shouldn't help in this case. Please try it because I think it is prettier and more obvious, but if jQuery is not defined you will get the same errors.
In the end... jQuery is not currently defined.
Use
jQuery(document).
instead of
$(document).
or
Within the function, $ points to jQuery as you would expect
(function ($) {
$(document).
}(jQuery));
(function( $ ) {
"use strict";
$(function() {
//Your code here
});
}(jQuery));
What worked for me. The first library to import is the query library and right then call the jQuery.noConflict() method.
<head>
<script type="text/javascript" src="jquery.min.js"/>
<script>
var jq = jQuery.noConflict();
jq(document).ready(function(){
//.... your code here
});
</script>
<script>
var jq=jQuery.noConflict();
(function ($)
{
function nameoffunction()
{
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
now use jq in place of jQuery
You come across this issue when your function name and one of the id names in the file are same. just make sure all your id names in the file are unique.
You can use
jQuery(document).ready(function(){ ...... });
or
(function ($) { ...... }(jQuery));
wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
If you are using jquery for frontend, you can achieve it by passing $deps as jquery
I've been trying to add a delay to one of my JavaScript animations and all I get is an error that says
"Object doesn't support property or method 'delay'". I'm testing this on IE 8 compatibility by the way.
Below is the mentioned code that I've tried.
from
$('a',$(this)).stop().animate({'marginTop':'200'},1000);
to
$('a',$(this)).stop().delay(1000).animate({'marginTop':'200'},1000);
Here is the jsfiddle.
Best Regards,
Vernon
There are two main problems on your fiddle:
1) The animation code is set up before jQuery. Thats why you get a TypeError: $ is not defined in console. Include jQuery in the <head> before your code and without any wrapping function:
<head>
....
<script>
/* jQuery here */
</script>
<script>
$(function() {
/* your code here */
});
</script>
....
</head>
2) You are using a very old jQuery version1.3.2 having no delay function. That's why you get an TypeError: undefined is not a function when calling .delay().
Either use a newer version of jQuery (>= 1.4.3) or define the delay-function by yourself:
$(function() {
// original $.fn.delay copied from jQuery v1.4.3 source:
jQuery.fn.delay = function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
type = type || "fx";
return this.queue( type, function() {
var elem = this;
setTimeout(function() {
jQuery.dequeue( elem, type );
}, time );
});
};
/* Your code here now works with .delay() */
});
Updated FIDDLE here with a delay of 1500 inserted.
Something like this?
$(function(){$('a','body').on('click',function(e){
e.preventDefault();
$(this).delay(1000).animate({marginTop:'200px'},1000);
})
});
SEE Fiddle: http://jsfiddle.net/7hxv3kd4/2/
I have made two following changes in the code,
Replaced </br> to <br/>
Added Jquery library to the Frameworks & Extensions section of JSFiddle
I believe it works fine, Please refer: http://jsfiddle.net/7hxv3kd4/3/
I am using a jquery code(given below) but when I am using this code then there are some forms in the site those are not working anymore I have tried by using jQuery.noConflict(); and $.noConflict(); but neither is working.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var topPart = $('#wrapper-29');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$('#wrapper-29').addClass('sticky');
$('#block-30').hide();
} else {
$('#wrapper-29').removeClass('sticky');
$('#block-30').show();
}
});
});
</script>
So can you please help me to solve this problem. Now I have removed the code as it is making problem. Thanks.
I don't know if this would apply to your case, but to avoid conflict between multiple versions of jQuery this is what I would do.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($){
$(document).ready(function(){
var topPart = $('#wrapper-29');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$('#wrapper-29').addClass('sticky');
$('#block-30').hide();
} else {
$('#wrapper-29').removeClass('sticky');
$('#block-30').show();
}
});
});
}(jQuery.noConflict(true)));
// jQuery has been removed and is undefined at this point
// so no chance of conflicting with other version of jQuery
</script>
There are a couple issue - one is the use of jQuery.noConflict() and then referencing $ for jQuery. You can either replace the references of $ with jQuery, or as Felix Kling mentioned, reference the argument passed by jQuery.
Unless you need a specific reason for jQuery.noConflict(), I would recommend removing the call from your jQuery file.
This is what your updated code might look like:
<script>
jQuery(document).ready(function($){
var topPart = $('#wrapper-29');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$('#wrapper-29').addClass('sticky');
$('#block-30').hide();
} else {
$('#wrapper-29').removeClass('sticky');
$('#block-30').show();
}
});
});
</script>
Now, as you mentioned, when this script works, it breaks other pages with forms (ex: http://propertymanagementoh.com/pma/) - When I looked into it, I noticed a JS error being thrown by the sticky script.
My guess is you're using a CMS (looks like WordPress) that's generating IDs - so $('#wrapper-29') may exist on one page, but not on another page. If we revisit the code above and make the following changes:
<script>
jQuery(document).ready(function($){
var $topPart = $('.wrapper-first');
var $block = $('#block-30');
var origOffset = topPart.offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > origOffset) {
$topPart.addClass('sticky');
if ($block.length > 1) {
$block.hide();
}
} else {
$topPart.removeClass('sticky');
if ($block.length > 1) {
$block.show();
}
}
});
});
</script>
That should work on BOTH pages (I actually verified it works on both by using Charles Proxy and injecting that script). The main changes I made were:
1) Use the .wrapper-first class as a selector, since it's common between the pages.
2) Update the variable name to $topPart, a common naming convention to say "HEY! I'M A JQUERY OBJECT!"
3) Reference $('#block-30') as a $variable, but since it's NOT common between the two pages, we check the length property of the object, to see if we need to call show or hide -
This is NOT required (since jQuery will just silently fail...) I'd recommend using a unique class for this as well (especially if it will be on other pages).
Hopefully this helps!
If you want your header part fixed, there is a more simple and elegant way to do it:
$("header").css('position', 'fixed')
The position of the header will remain same regardless of browser's window position
If jQuery is not working simply edit the css file like below:
.header
{
position:fixed;
}
to change the header at scroll use scroll listener like below:
var b = $( "body" );
b.scroll(function(){
if ((b.scrollTop())>0){ // perform what you want to do
}
});
Ok, I use mootools to display flash content through google maps and I work hard to make it work properly, so there is little chance to switch it to jQuery. On the other side, I see jQuery more useful to every other things so I'm trying to make it work together. That's for explanation. Now here is the code.
this jQuery script I use to show/hide animation and it works with mootools perfectly
<script type="text/javascript">
jQuery(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
jQuery('#slickbox').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-toggle').click(function() {
jQuery('#slickbox').toggle(400);
return false;
});
});
recently, I added scrit to animate flowing menu and I can't get it work. I've tried to apply noConflict, but it didn't work. Here is the code:
<script language="text/javascript">
var $j = jQuery.noConflict();
var name = "#floatMenu";
var menuYloc = null;
$j(document).ready(function(){
menuYloc = parseInt($j(name).css("top").substring(0,$j(name).css("top").indexOf("px")))
$j(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$j(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>
Error message is Uncaught TypeError: Object # has no method 'dispose'
Thank you very much.
Format your code this way, and there is no need to use noConflict(). Call jQuery.noConflict(); right after the jQuery and MooTools library have been loaded.
<script type="text/javascript">
(function($){
var name = "#floatMenu",
menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
})(jQuery);
</script>
This will encapsulate your code to a function, which will be passed the jQuery object. Anywhere you use $ inside that function it will reference jQuery.
Also, there is no attribute language with the value "text/javascript", it's the type attribute, which should have that value. Don't use the language attribute anymore.