Conflicting Javascript codes. Menu and Slider - javascript

I am having some trouble with what looks to be conflicting JavaScript. I'm not the most savvy with it so I was hoping someone here could help me out.
The slider and menu both work on their own in a separate HTML page, but once I place it into the same HTML page it seems that they conflict and neither then work.
I have removed the menu JavaScript code in the head and the slider works so I am pretty sure this is the problem. You can see it live here.

You console show error
Uncaught ReferenceError: jQuery is not defined jquery.themepunch.plugins.min.js:140
Uncaught ReferenceError: jQuery is not defined jquery.themepunch.kenburn.min.js:8
Uncaught TypeError: Property '$' of object [object Object] is not a function commercial.html:32
Embed a suitable jQuery library file at the top of all the scripts
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

First of all, you have to include JQuery before you start to use the plugins, so move the line:
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
Before all your JavaScript includes.
Also, you use jQuery.noConflict() and we know that it "frees" the $ from being associated with jQuery so change this code:
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.bannercontainer').kenburn(
//Etc...
And use the $ sing everywhere.
$(document).ready(function() {
if ($.fn.cssOriginal!=undefined)
$.fn.css = $.fn.cssOriginal;
$('.bannercontainer').kenburn(
//Etc...

Related

Conflict Preventing Background Video from Showing

On my site http://tsawebmaster1.hhstsa.com/drones/index.html, I have a background video that is supposed to show using the bigvideo.js plugin. For some reason it is not showing. How can this be solved?
I believe this has something to do with multiple jquery files overriding each other. Is this possible and the issue?
Open up your console. You can see the following error:
document.getElementByTagName is not a function
You are missing an 's'
the correct method is:
var elements = document.getElementsByTagName(name);
Pic
Yes, you can use Jquery No Conflict as follow:
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

"TypeError: $ is not a function" after loading some scripts into wordpress

We start to provide a HTML-Snippet like Google or Facebook does for its advertising things or the integration for the Facebook like button. It contains a business application.
Our HTML-Snippet loads a script and contains a few more informations:
<div id="ncc" data-hash="" ng-jq>
<div id="wiz" ng-controller="WizardCtrl"></div>
<script src="{{URLTOSCRIPT}}/load.js"></script>
</div>
The script checks if a jQuery is installed and loads all related things into the DOM and at the ends inits an angular-Application.
All this works fine on pages that havn't enabled jQuery.noConflicts-Mode.
After the latest Wordpress-Updates we got an ERROR
"TypeError: $ is not a function"
We tried to get rid of it using some workaroungs like
jQuery(document).ready(function($){
$(function () {
//code to execute
});
OR
jQuery(document).ready(function(){
var j = jQuery.noConflicts();
j(function () {
//code to execute
});
and changed also all references in the angular-part. But nothing working really well.
Any suggestions?
We are using AngularJs v1.4.7, jQuery v1.11.3 (started to migrate to 2.1.4), the
Sometimes when more versions of jQuery are loaded or if it conflicts with another library you can get that error:
have you tried to replace in all of your code the $ symbol with the word "jQuery"?
So your example would become:
jQuery(document).ready(function(){
jQuery(function () {
//code to execute
});
Note: I don't think that in this case passing "$" as a parameter is needed anymore ;)
EDIT: there is also another possibility:
you say that you're using the $ sign (i guess to avoid the usual conflicts in wordpress) in this way:
jQuery(document).ready(function($){
$(function () {
//code to execute
});
But this will make the $ symbol available only inside the ready() function.
Did you check if you have somewhere code using the $ where you actually aren't allowed to (or in other words if you have any piece of your js code where $ isn't mapped as "jQuery")?
EDIT 2: The only working solution in the end was:
(function($,undefined){
$(document).ready(function(){
//code to execute
});
})(jQuery);"
Make sure jQuery is loaded before any other script that uses certain jQuery functions.
Normally those errors arise, when the jQuery library wasn't loaded yet. Make sure that a $()-call is called after jquery was loaded, which normally happens at the end of your file to speed up loading times.
Therefore putting
<script src="{{URLTOSCRIPT}}/load.js"></script>
to the end of the body-tag should help.
Usually when you get this error: "TypeError: $ is not a function"
it means, you a missing a JQuery library or they are not placed in the correct order. Ordering JQuery libraries is important.
$ is not a function. It means that there is a function named $, but it does not have a plugin/widget named selectable. So, something has stolen your $ or there is another library added after it, or it was never loaded.
Your script file is not loading properly or script file is not available.
open browser inspect element and put this code
jQuery().jquery.
it's display which jquery version is use.
this is for testing
jQuery(document).ready(function()
{
alert("test");
});

Anonymous Function Error: $ is not defined

Google Developer Tools is displaying the following error when my PHP page uses the content from a javascript file (my_scripts.js):
"Uncaught ReferenceError: $ is not defined scripts.js:1 (anonymous function)"
Content of my_scripts.js
$('a.button').click(function(){
window.location.href = "another_page.php";
});
The page and the script work as required. Clicking the element links to the requested page, but the error is there.
1) What causes the error?
2) Can it or should it be ignored?
1) It looks like your problem is that jQuery haven't been loaded.
Make sure you load jQuery before scripts.js.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
2) Errors should never be ignored.
You need to load jquery libary BEFORE! Please download the jquery.min.js at http://www.jquery.com/download/
also, write like this:
$(doucment).ready(function(){
$('a.button').on('click',function(){
window.location.href = "another_page.php";
});
});
If you have already included jQuery on your file, and still its not working you should try,
jQuery(doucment).ready(function(){
jQuery('a.button').on('click',function(){
window.location.href = "another_page.php";
});
});
This is causing as there might be some conflicting js files.

javascript error while loading the document

Im trying to run the below script to understand the Javascript object and inheritance but don't see anything being displayed.
<html>
<head>
<script>
$(document).ready(
function Person(){
alert('New Person Created');
}
Person.prototype.sayHello = new function(){
alert('Hello');
};
var x = new Person();
x.sayHello();
var newfunction = x.sayHello;
newfunction.call(Person);
);
</script>
</head>
<body>
</body>
</html>
$ is defined in jQuery, you need to include jQuery library before using the $
you can include jquery library using cdn like this,
<script src ="//code.jquery.com/jquery-1.10.2.min.js"></script>
The first line of your script is jQuery. If you want to use jQuery you should include it first (based on what you have written I strongly suspect you don't need or want it just yet).
Alternatively, just drop the $(document).ready part and its {}s and that should get you going.
Also, take a look at your developer tools menu and get your JavaScript console open. It will have told you about this error.
When you use a construct like $(document), you are calling a function $, which is defined as jQuery. You need a <script> tag in your document to load the correct version of jQuery. Also, check your browser console. You will see an error there about $
The only thing I can see wrong is that you are trying to use the jQuery library, but you've never actually included it.

Trouble getting bootstrap tooltips to work on Joomla 3.0 with Gantry 4 Framework

I am trying to enable the bootstrap tooltips in Gantry 4.
The bootstrap javascript is loaded, as bootstrap.min.js as is jquery.
I added the following to the index.php file just before the closing body tag
<script type="text/javascript">
$(document).ready(function () {
$("[rel=tooltip]").tooltip();
});
</script>
I seem to have a conflict as I get the following error:
TypeError: 'undefined' is not a function (evaluating '$(document).ready(function () {
$("[rel=tooltip]").tooltip();
})')
The text that is supposed to trigger the tooltip is:
le cas d’un mariage de longue durée
Can someone please point out what I need to do to resolve this? Thanks.
Sorry, I forgot to add the link to the site and page where the tooltip is not functioning.
http://gobet.ergonomiq.net/divorce-séparation/divorce/26-requérir-seul-le-divorce-après-deux-ans-de-séparation#
You have MooTools active on the website, so the $ selector doesn't work like it would if jQuery were the primary $ selector agent. You'll need to convert the uses of $ where jQuery is expected to use jQuery instead.
Example:
$(selector here)
should be:
jQuery(selector here)
And everything else will work fine.
Ensure that you have only 1 jQuery library being loaded and that it is at the top of the list. If not, then your bootstrap.min.js file won't work.
If this is done and it's still not working, try adding the code like so:
$document = JFactory::getDocument(); //remove is this line is already being used
$js = "$(document).ready(function(){
$('[rel=tooltip]').tooltip();
});";
$document->addScriptDeclaration($js);
Hope this helps.
Add the bootstrap framework to the component.php of your template:
JHtml::_('bootstrap.framework');
This should solve the ".tooltip is not a function" error
In your Joomla Project, open templates/<your-template-name>/index.php.
find JHtml::_('behavior.framework', true); and comment it out.
OR You can just replace the word behavior with bootstrap.

Categories