I have two javascript scripts I want to use, a clickable dropdown menu and slick.js for an image slideshow. The clickable dropdown menu only works if placed in the header, and slick only works if placed in footer....and they both end up conflicting each other, one overriding the other depending on where the javascript library is called. For example, the following code would only show the slideshow:
HEADER:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
// Clickable Dropdown
$('.menu-main-menu-container > ul').toggleClass('no-js js');
$('..menu-main-menu-container .js ul').hide();
$('.menu-main-menu-container .js').click(function(e) {
$('.menu-main-menu-container .js ul').slideToggle(200);
$('.clicker').toggleClass('active');
e.stopPropagation();
});
$(document).click(function() {
if ($('.menu-main-menu-container .js ul').is(':visible')) {
$('.menu-main-menu-container .js ul', this).slideUp();
$('.menu-main-menu-container').removeClass('active');
}
});
});
</script>
FOOTER:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url')?>/slick/slick.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url')?>/js/slick.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slideshow-images').slick({
});
});
</script>
And as soon as I remove "jquery-1.11.0.min.js" from the footer the dropdown menu starts working again. How can I get both to work simultaneously?
You only need to load jQuery once.
The reason it stops working is because when you load it a second time, the original jQuery object is overwritten and no longer valid. However, the code that's already been executed in your header is tied to the original object, which means that it doesn't work when the click event is triggered.
Solution: only load jQuery once.
Related
I have the following links declared inside the head tag:
<script type="text/javascript" src="javascript/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>
And the following code inside the scripts file:
$("#person").hover(function() {
// trigger the mouseover event
$("#person-text span").addClass("important-info");
}, function() {
// trigger the mouseout event
$("#person-text span").removeClass("important-info");
});
$(document).ready(function(){
console.log( "ready!" );
});
I have also tried adding the jQuery library through Google and Microsoft CDNs, but it didn't work as well.
Here is a screenshot from the console errors:
I had a similar problem few days back. I moved the custom script tag at the end of the HTML page and the code worked. It generally happens for the $(document).ready() function.
<script type="text/javascript" src="javascript/scripts.js"></script>
Move the above line to the end of your Html page and that should work.
try using $(document).ready(function(){/*your code*/}) and try to change if your browser console showing 404 error for jQuery file
<script type="text/javascript" src="javascript/jquery-3.1.0.min.js"></script>
to
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js
"></script>
I am using materializecss to do my design together with Angular. At a certain part, I will need to use (Angular-ui-sortable) for me to be able to be able to sort my list which included jquery-ui. JQuery-UI needs to be included below JQuery and Angular-ui-sortable and it need's JQuery to be before AngularJS. By doing so, the sortable area works while materializecss' initialization of Tab after angular's content is loaded is not working. For the Tab to work, Jquery materialize css needs to be after angular's include. In this case the sortable wise will not work.
Tab works here with error (ui.sortable: jQuery should be included before AngularJS!):
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="libs/angular-resource/angular-resource.min.js"></script>
<script src="libs/angular-ui-sortable/sortable.min.js"></script>
<script src="libs/jquery/dist/jquery.min.js"></script> <---------------------
<script src="libs/jquery-ui/jquery-ui.min.js"></script>
<script src="libs/materialize/dist/js/materialize.min.js"></script>
Sort works here with error (TypeError: Cannot read property 'hash' of undefined):
<script src="libs/jquery/dist/jquery.min.js"></script> <---------------------
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="libs/angular-resource/angular-resource.min.js"></script>
<script src="libs/angular-ui-sortable/sortable.min.js"></script>
<script src="libs/jquery-ui/jquery-ui.min.js"></script>
<script src="libs/materialize/dist/js/materialize.min.js"></script>
Controller for Tab:
function HomeController() {
$(document).ready(function () {
$('ul.tabs').tabs();
});
}
What have I done wrong here?
I am trying to make wall script like google+ but i have one problem. Users can share pictures and videos I've created a base. However, the tab does not work currently. Reason ... <script type="text/javascript"> </ script> I think it is relevant. .... tags into the tags I add the script call. But by far misunderstood. but I could not. I'm giving you my code below.
Head
<head>
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery.min2.js"></script>
<script src="jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
</head>
Call javascript function This function for post cancel or submit
<script type="text/javascript">
$(function(){
$(".content").focus(function(){
$(this).animate({"height": "55px",}, "fast" );
$("#button_hide").slideDown("fast");
return false;
});
$("#cancel").click(function(){
$(".content").animate({"height": "30px",}, "fast" );
$("#button_hide").slideUp("fast");
return false;
});
});
</script>
and this javascript function is for Photo and video click open box also this function is not working now.
<script type="text/javascript">
$(document).ready(function(){
$(".oculto").hide();
$(".MO").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculto").hide();
$(nodo).fadeToggle( "slow" );
return false;
}
});
});
</script>
This link is my tutotiral link. If you check this page you can understand me. If you click photo photo share panel will not open also video share panel not working.
http://goo.gl/i98FNX
What is there in this file js/jquery.min2.js? If it is the jquery library, please remove it because you have a google cdn code in the same file. In addition, you are using a old version of jquery. Since 1.4 many things have changed in jQuery so, please use the latest version of jquery http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
I think that leads up the tab portions. Just like facebook. I understand that you have used bubble box. If you want three different areas. For example: status, video, link to share, create the base area. This will provide you more convenience.
You can write your php code easier.
Because sharing is currently part of three different courses you want to use a single form. But you can spend more time for it. However, creating three forms that will be easier if you make sharing.
Share your theme really nice congratulations. However troubling.
I've studied your own scripts. Bonding between the lines of the script too much. This is not true. Create a new js file and then type into the function you are using. Gators later use the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/yourscript.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
In this way, your problems will disappear.
For the love of God I need help! I'm trying to get Caroufredsel and fancybox to work together like they do here:
http://caroufredsel.frebsite.nl/examples/carousel-lightbox-tooltip.php
...bu I can only get them working independently. I don't really know javascript so I'm failing hard :(
Here is where I've tried implementing it:
http://www.meanbeangames.com/
Only Caroufredsel is working at this point. Fancybox works if I remove all Caroufredsel code.
You are referencing jQuery library twice at line 15 and 189 (view source), this caused all reference to fancybox plugin added earlier to be lost (as jQuery variable is re-defined the second time you include jQuery). Remove the
<script type="text/javascript" src="js/jquery.js"></script>
at line 189 and you should be set.
First of all:
You are loading jQuery (the Javascript library) twice. Once in your <head> section (<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>) and once in before your closing </body> tag (<script type="text/javascript" src="js/jquery.js"></script>). Remove the last and update the first one to the most recent version of jQuery, like so:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Second:
It might be better to give better structure to your script: or you load all of them in your head, or all of them before the closing </body> tag. This way, you won't look over scripts that are somewhere you wouldn't expect them to be. Best practice is often said to include all scripts before the closing </body> tag. Don't forget to load jQuery before all the rest of your scripts! In your case it would look like this:
<footer>...</footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#foo2").carouFredSel({
circular: true,
infinite: false,
auto: false,
prev: {
button: "#foo2_prev",
key: "left"
},
next: {
button: "#foo2_next",
key: "right"
},
pagination: "#foo2_pag"
});
$('.fancybox').fancybox();
});
</script>
To get lightbox functionality in my page,i have added js files in master page.
after some time,i needed to use jquery in child page.so i have added jquery reference in child page.
When i added jquery reference in child page,lightbox stops working.
How to resolve this problem?
when i remove jquery reference from child page,lightbox works fine.
Is this Jquery conflict problem??
FYI i have shown my js files here
Master Page Javascript files :
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
Child page Javascript files :
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"> </script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict(true);
function showClose(obj) {
obj.style.display = 'none';
$j("#spnFullInfo").slideDown(1500);
return false;
}
</script>
try first only lightbox functionality. Keep only jquery.js and lightbox.js remove other .js files. you might have conflict with prototype or scriptaculuos.
Just put your jquery reference in master page instead of child.
Hope this helps..