We Keep Coding

JQuery $(function).animate is not a function

I'm setting a button to scroll my page to a specific ID. However, the console always shows this error:
$(.…).animate is not a function
Instead of scrolling, it jumps to the registered ID.
I've seen many posts about this problem, but all of them are providing me with a piece of information to change my jQuery version into full one instead of slim. But right now, I'm using the full version of jQuery 3.4.1.
<script type="text/javascript" src="{{ asset('/js/app.js') }}"></script>
$(document).ready(function() {
$("#intro-scroller").click(function() {
$(document).animate({
scrollTop: $("#intro")
}, 2000);
});
$("#about-scroller").click(function() {
$(document).animate({
scrollTop: $("#aboutme")
}, 2000);
});
$("#education-scroller").click(function() {
$(document).animate({
scrollTop: $("#education")
}, 2000);
});
$("#skill-scroller").click(function() {
$(document).animate({
scrollTop: $("#skill")
}, 2000);
});
$("#project-scroller").click(function() {
$(document).animate({
scrollTop: $("#project")
}, 2000);
});
$("#contact-scroller").click(function() {
$(document).animate({
scrollTop: $("#contact")
}, 2000);
});
})
require('./bootstrap');
// Jquery & JS
require('./jquery-3.4.1');
require('./jQuery-Progress-Bar-Plugin-LineProgressbar/jquery.lineProgressbar');
require('./ResponsiveSlides/responsiveslides');
require('./smoothscroll');
I expect that my jQuery animate() functions correctly, but the actual result is that my animate() function is treated as a non-function code. It always returns $(.…).animate is not a function in the console.

You have to add jquery link before app.js.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Jquery 2 scripts aren't cooperating

I have 2 jquery scripts, but they aren't cooperating, and i dont know why.
My first script "scrolltop.js:
$(function() {
$("a").click(function(){
alert("test");
var target = $(this).attr('href');
var strip = target.slice(1);
if(this.hash && strip=="wall_menu"){
$("html, body").animate({
scrollTop: $("#wall_menu").offset().top
}, 1200);
return false;
}
}); });
It works fine... but stops while i add this script "changecolor.js":
$(document).ready(function() {
var $changeBtn1 = $("#content_0 div.button1");
var strNewString = $('body').html().replace(/\is/g,'<spon>is</spon>');
$('body').html(strNewString);
$(".button1").click(function(){
$('spon').css("color", "red");
setTimeout(function(){
$('spon').css("color", "");
},3000);
}); });
When i add both scripts, works only "changecolor.js", even alert "test" from first script doesnt work :(
This is my head from .html file:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src="scripts/scrolltop.js"></script>
<script type='text/javascript' src="scripts/changecolor.js"></script>
My web browser console, does not say where the problem is.

This is probably because you're replacing the whole body ($('body').html(strNewString);) in changecolor.js, and therefore the events registered (click()) will no longer be bound to a DOM element.

ReferenceError: jQuery is not defined (Metis Theme Template)

I'm new using jQuery and I'd like to get a little bit of help with this.
I'm trying to test a theme template and the following jQuery code is trouble me (this code is for default):
<!--jQuery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('.list-inline li > a').click(function() {
var activeForm = $(this).attr('href') + ' > form';
//console.log(activeForm);
$(activeForm).addClass('animated fadeIn');
//set timer to 1 seconds, after that, unload the animate animation
setTimeout(function() {
$(activeForm).removeClass('animated fadeIn');
}, 1000);
});
});
})(jQuery);
and I'm always getting the same error:
ReferenceError: jQuery is not defined
})(jQuery);
Do you have any idea? This code is from a theme template (Metis Bootstrap Admin Template).

The CDN url of jQuery library is not working.
Use:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
// ^^^^^^

If you are using it from local, specify the protocol:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

WordPress Blink Codes Doesn't Work

I use codes with blink;
Jquery;
<script type="text/javascript">
var blink = function(){
$('#blinker').toggle();
};
$(document).ready(function() {
setInterval(blink, 100);
});
</script>
Page;
[full_column align="center"][su_button url="#basvuru" class="fancybox" background="#b21f30" size="6"] <div id="blinker">ÜCRETSİZ PROGRAMA BAŞVUR</div>[/su_button][/full_column]
Website: www.varsiteam.com

Try with :
<script type="text/javascript">
$(document).ready(function() {
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 100);
});
</script>
If you look at console you will see this error:
Uncaught TypeError: undefined is not a function
To fix that you have to put your function inside of $(document).ready event. When you call $('#blinker').toggle(); it tries to use jQuery object which is undefined if you not put it in $(document).ready event. That is how jQuery works.

When you're working in WordPress, jQuery is loaded in a no-conflict mode.
So, you'll need to use jQuery and not $.
Your code should be:
var blink = function(){
jQuery('#blinker').toggle();
};
Or if you want to wrap everything in your document ready event:
jQuery(document).ready(function($) {
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 100);
});

using yep/nope with document.ready

I am using yepnope.js but having a slight issue with on load loading a function
in the head i include yep nope and make a call to the relevant js file
<script type="text/javascript" src="/code/trunk/javascript/external/modernizr/modernizr-development.js"></script>
<script type="text/javascript" src="/code/trunk/javascript/external/yepnope.1.5.3-min.js"></script>
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/plugin.mobile.js'],
nope:['/templates/client/jquery/qff/plugin.website.js']
});
</script>
and then at the bottom of the page
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
});
</script>
so i am looking at this on a main screen. so it's suppoed to call in plugin.mobile.js
in the plugin.mobile.js file
(function( $ ){
$.fn.setupQantas = function( options ) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
startSlide: 1,
googleAnalytics:0, // 1 sends to google
googleCode: ""
}, options);
var methods = {};
return this.each(function() {
if (settings.startSlide === 1) {
alert("slide = 1");
} else {
alert("slide > 1");
}
});
};
})( jQuery );// JavaScript Document
instead of giving the alert slide 1 it has the error
jQuery("#mainContent").setupQantas is not a function
if i dont use yepnope and just have it in a script tag it works. There seems to be a delay on when the yepnope loads in the js file and doesnt seem to do before doc.ready
is there a way around this?
thanks

Yes there is a delay. That's all the point behind an asynchronous script loader.
You should use a callback after the script is loaded by yepnope. Check the complete and callback options.

here is the code
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/mobile.js'],
nope:['/templates/client/jquery/qff/website.js'],
complete: function () {
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
}
});
</script>