We Keep Coding

jQuery not running locally

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>

jQuery jquery.tools.min and jquery.min cannot work in same page (bootstrap) [duplicate]

This question already has an answer here:
Jquery conflict with jquery tools [closed]
(1 answer)
Closed 7 years ago.
In my Bootstrap page I used jquery.tools.min.js for navigation drop-down and jquery.min.js for a model box which display image by its id.
If I used jquery.min.js, Model box work well but navigation not work.
I used jquery.tools.min.js in navigation.php file, So all of my page got it at first. And I have many many content with jquery.tools.min.js.
Now how put those all file together.
My code:
<button class="light btn btn-info btn-responsive" id="http://myimage1.jpg">Display</button>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.light').click(function(){
var src = $(this).attr('id');
var img = '<img src="' + src + '" class="img-responsive"/>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(img);
});
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
});
</script>

You need to include jquery.js before jquery.tools.js:
If you prefer to load the jQuery library separately the recommended practice is to load jQuery from Google's CDN service. Make sure the jQuery library is always loaded before the jQuery Tools library.
http://jquerytools.github.io/download/
Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Always you need to jquery link first after that you can include rest of link...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Javascript conflict in header vs footer

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.

javascript tab function not working

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.

Rainbow Jquery Plugin does not work

I am trying to implement the rainbow jquery plugin on my blog: https://levalencia-public.sharepoint.com/blog
Rainbow plugin here:
http://craig.is/making/rainbows
I have included the following on the head
<link rel="stylesheet" href="css/rainbow/kimbie-dark.css" />
I have included the following before the body end tag
<!-- you can create a custom build with specific languages this should go before the closing </body> -->
<script src="js/rainbow.min.js"></script>
<script src="js/languages/generic.js"></script>
<script src="js/languages/csharp.js"></script>
<script src="js/languages/css.js"></script>
<script src="js/languages/html.js"></script>
<script src="js/languages/javascript.js"></script>
<script src="js/languages/shell.js"></script>
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
Then I included one post to test it with the code:
<pre><code data-language="javascript">var testing = true;</code></pre>
When I check the source code of my blog, it looks like the html is being changed, because I see this:
If I debug the rainbow.color is being hit.
So I am clueless

First of all, Rainbow initializes itself so you should be able to remove this without any problem:
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
The main issue you are seeing is that your theme file is not being included correctly. If you look at the theme you are including it is not a valid css file. It is returning some sort of html.
See
https://levalencia-public.sharepoint.com/_catalogs/masterpage/css/rainbow/kimbie-dark.css