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>
Related
I have custom WordPress theme with my code on footer.php:
<script async src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(window).scroll(function(){
if(jQuery(document).scrollTop() > 500){
jQuery("a.toTop").addClass("active");
}else{
jQuery("a.toTop").removeClass("active");
}
});
jQuery(document).ready(function() {
jQuery("a.toTop").click(function() {
return jQuery("html, body").animate({
scrollTop: 0
}, 1e3), !1
});
});
</script>
Web console says:
ReferenceError: jQuery is not defined
Any ideas? Thanks1
Remove "async" from the jQuery call.
Do you really need the "async" attribute in your jQuery script tag ?
If not, try removing it, it solves the issue.
I have code:
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".koncecki-web-design").addClass("konecki-scroll");
$(".top-nav").addClass("show");
$("#work").addClass("work-margin");
} else {
$(".koncecki-web-design").removeClass("konecki-scroll");
$(".top-nav").removeClass("show");
$("#work").removeClass("work-margin");
}
if (scroll >= 200) {
$(".top-text").addClass("top-text-scroll");
} else {
$(".top-text").removeClass("top-text-scroll");
}
});
I have this in my index file but i want to have in control.js
<script type="text/javascript" src="js/control.js"></script>
When i paste this code to control.js script does not work.
What could be wrong?
Thanks!
Silon
Be sure to have jQuery included before control.js. So
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/control.js"></script>
instead of
<script type="text/javascript" src="js/control.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
You need to:
Check if you including control.js before jquery.js then it would not work move your jquery file to top.
DOM is not ready to be worked on so move all your code to $(document).ready()
Or include your control.js just before closing body tag, it will take care of above two points.
I am using javascript and Jquery in same page.
Some thing is preventing JQuery from working properly
I tried using $jq = jQuery.noConflict(); it is not solving.
My code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/dropmenu.js"></script>
<script src="js/beaverslider.js"></script>
<script src="js/beaverslider-effects.js"></script>
<script>
$jq = jQuery.noConflict();
$jq(document).ready(function($){
$("#nav-one").dropmenu();
});
</script>
<script>
$(function(){
var slider = new BeaverSlider({
structure: {
container: {
id: "my-slider",
width: 1000,
height: 200
}
},
content: {
images: [
"images/banner01.png",
"images/banner02.png"
]
},
animation: {
effects: effectSets["fadeSet"],
interval: 4000
}
});
});
</script>
Problem
javascript code was image fade effect and jquery code was menu dropdown effect.
when menudrop down appears, i was not able to click the dropdown menu link and when image fades dropdown menu also fades.
Please help me to find soln.
After calling $jq = jQuery.noConflict(); $ is no longer a reference to jQuery.
In second script use either $jq or jQuery instead of $.
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>
i have a custom jquery for my site aswell as an lightbox query. But it seems i cannot get both to work the the same time. Its always 1 of them working, depending on the order they come in. heres the code
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function () {
$('a[#rel*=lightbox]').lightBox({
maxHeight: screen.height * 0.6,
maxWidth: screen.width * 0.6
});
});
</script>
<script type="text/javascript" src="./Scripts/jquery-1.3.2.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
/* Menu */
$("#menu li:last").css("margin-right", "0");
$("#menu ul.sub li:last").css("margin-right", "0");
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
});
$("#menu").hover(function() { }, function() {
$(".sub").fadeOut(200);
});
});
</script>
You have included the jQuery twice ..
Remove this line of code
<script type="text/javascript" src="./Scripts/jquery-1.3.2.js" ></script>
Your line:
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
});
Uses the single parameter call for hover() http://api.jquery.com/hover/#hover2
This was added in jQuery 1.4, and you are using 1.3.2.
Either:
Update your jQuery.
Or use the two parameter function:
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
}, null);
That way the anonymous function will be called only on mouseenter, change the order of the params if you want it called on mouseleave.
If you want it to fade in/out:
$("#menu li#menues a").hover(
function() {
$(this).siblings(".sub").fadeIn(200);
},
function() {
$(this).siblings(".sub").fadeOut(200);
});
If you need to use the same function for both, while using jQuery 1.3.2 use:
function menuLinkHover(){
$(this).siblings(".sub").fadeIn(200);
}
$("#menu li#menues a").hover(menuLinkHover, menuLinkHover);
Enjoy!
Some scripts extend the jQuery object, it appears Lightbox is one of them.
By including a reference to the jQuery script twice, as the page loads:
the jQuery object will be added to the DOM,
then extended for lightbox,
then a new jQuery object will be added to the DOM without the extensions
so the script that depends on lightbox will not run.
Removing the second jQuery script tag should fix this.