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 $.
Related
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>
I am trying to avoid the conflict between the jquery 1.2.6 and latest version 1.11.3, boostrap.js:
<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/custom.js'></script>
<script type="text/javascript">
$().ready(function() {
var autocm = jQuery.noConflict();
autocm("#search").autocomplete("php/getvalues.php", {
width: 383,
matchContains: true,
//mustMatch: false,
//minChars: 0,
//multiple: true,
//highlight: true,
//multipleSeparator: ",",
selectFirst: false
});(autocm);
});
</script>
<script type='text/javascript' src="js/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src="js/bootstrap.min.js"></script>
<script type='text/javascript' src="js/carousel.js"></script>
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length-1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
If I enable
<script type='text/javascript' src="js/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src="js/bootstrap.min.js"></script>
<script type='text/javascript' src="js/carousel.js"></script>
The autocomplete won't work.
the autocomplete won't work
My guess — and it has to be a guess, as you haven't told us anything about the autocomplete — is that it uses something from jQuery 1.2.6 that is no longer present, or perhaps just not quite the same, as in jQuery 1.11.3. All that the noConflict call you're doing does is protect your code within that ready callback; any code in the autocompleter that uses either $ or jQuery to access jQuery later, when the user does something, will be using v1.11.3.
The best course of action here is to not try to use two versions of jQuery in the same page. Very, very, very much second-best would be to edit the autocomplete to grab a local reference to the jQuery that's in effect as of when it loads, and continue to use that. (A well-written plugin would do that, but there are a lot of not-very-well-written plugins out there...)
That might be as simple as putting this at the beginning of the js/custom.js file:
(function($) {
var jQuery = $;
...and this at the end of it:
})(jQuery);
But again, that's a very distant second-best solution. The best thing to do is not use jQuery 1.2.6. At all.
Here is what i have done.....
<script type="text/javascript">
var autocm = jQuery.noConflict();
autocm().ready(function() {
autocm("#search").autocomplete("php/getvalues.php", {
width: 383,
matchContains: true,
//mustMatch: false,
//minChars: 0,
//multiple: true,
//highlight: true,
//multipleSeparator: ",",
selectFirst: false
});
});(autocm);
</script>
Working well enough.. just added no conflict method before the .ready(function(){
I am using one java script and one jquery in my html file in head tag,
but my problem both the scripts are not working, i have used one slide show script and one nav menu script, in this both only one is working , is there any specific order to write these scripts ,
please find the below script order i have used , i am getting only slideshow. please help me out .
<script type="text/javascript"> google.load("mootools", "1.2.1");</script>
<script type="text/javascript" src="Js/MenuMatic_0.68.3.js" type="text/javascript"
charset="utf-8"> </script>
<script type="text/javascript">
window.addEvent('domready', function () {
var myMenu = new MenuMatic();
});</script>
<script type="text/javascript" src="Js/jquery.min.js"></script>
<script type="text/javascript" src="Js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="Js/slides.min.jquery.js"></script>
<script type="text/javascript">
$(function () {
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
It looks like you have MooTools and jQuery loading on the same page which will work but you will have to replace the short hand jQuery function. jQuery uses $(function) shorthand for jQuery(function) and that shorthand notation could cause problems.
You will need to use the jQuery.noConflict() function anywhere jquery and it's plugins were using the $.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(function () {
$j('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</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.
$(document).ready will only be executed if I add a breakpoint via firebug and continue from there or an alert before the line var buttons. Otherwise it does nothing.
$(document).ready(function () {
//alert('sdfsdf');
var buttons = $(".modalInput").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
});
});
I work with Mvc2 and use Telerik Components.
Any suggestions?
If it works when you alert and when you set a breakpoint, it sounds like the problem is with your set up of the overlays and not with the ready function at all. Can you post some HTML code for the overlays are working on?
The elements with "modalInput" probably have their own initialization code occurring on window load event, and this code has not yet executed when you have your own code.
Correct solution will be to catch some sort of "Completed" event of those elements, maybe Telerik component expose such thing?
Quick and dirty solution will be to use timer (window.setTimeout) and have your code executed for example one second after the document is ready.
Do you include the jquery-source before this script block?
Wrong would be:
<script type="text/javascript">
$(document).ready(function () {
//alert('sdfsdf');
var buttons = $(".modalInput").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
});
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>
whereas following would be correct
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//alert('sdfsdf');
var buttons = $(".modalInput").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
});
});
</script>
By the way, does your alert work?