Conflict Preventing Background Video from Showing - javascript

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>

Related

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.

Javascript Lightbox 2 Issue

I'm quite new at this, so please be thorough with the explanation.
I'm using the Lightbox 2 jQuery file, along with another jQuery file to execute a menu slide animation and a fade animation on my images.
I'm assuming that there is conflict between the two jQuery files, but I'm not sure how to resolve it.
Any advice? I read something about jQuery.noConflict(), but I'm not sure how to implement it, or it if will work.
<script src="../Scripts/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#ScrollBox img').animate({
opacity:.5
});
$('div#ScrollBox img').hover(function(){
$(this).stop().animate({opacity:1}, 'fast');
}, function(){
$(this).stop().animate({opacity:.5}, 'slow');
});
});
</script>
<!--LIGHTBOX-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
It looks like you are loading two different jQuery versions (1.10.2 and 2.0.2), which is, I believe, causing the problem. I would recommend removing the 1.10.2 jQuery script, and one of the following (in order of effort, in case you want to try all 3):
-see if your lightbox plugin still works
-find a newer version of the same lightbox
-use a different lightbox, for example fancybox
In any case, make sure that your end result only has one version of jQuery being loaded.
Is there a reason you need both? They should have pretty much the same code so you only need to include one. I would use whichever is the latest.
It would help if you included in your post the lines of code where you explicitly add them so we can see what you are doing.

Conflicting Javascript codes. Menu and Slider

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...

Uncaught TypeError: Object [object Object] has no method 'overlay'

Why do I get this error from my overlay jquery code?
This is the code:
jQuery(document).ready(function($) {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
This code is the overlay like this: http://flowplayer.org/tools/demos/overlay/external.html
Halp?
ps. Sorry for my bad english.
"Could not find Overlay: nofollow" is caused by using a non-specific css selector to find the links you want to attach your overlay to.
Including the javascript properly was the correct answer to the initial question... I came to this page based on the Overlay: nofollow issue in a comment.... since this is the first thing I found and didn't find an answer I wanted to comment here since I found it is caused by the css selector finding other uses of .. and there isn't a nofollow overlay...
assuming 'overlay' is the id of your div as in the following:
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
< !-- the external content is loaded inside this tag -- >
<div class="contentWrap"></div>
</div>
you should be doing something like:
$("a[rel=#overlay]").overlay(
instead of:
$("a[rel]").overlay(
You need to load the overlay plugin before jQuery will see it as part of the object; see below.
Note: the plugin must come after the jQuery script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
Got the same problem and found a really strange solution.
I just included jquery.tools before jquery.ui in this way:
<script src='js/jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='js/jquery.tools.min.js' type='text/javascript'></script>
<script src='js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'></script>
That's all. No idea why it works now but it does the job.
Did you include the overlay script src in your page?

$ is not a function

<script type="text/javascript" src="framework/resources/jquery-1.5.1.js"></script>
<script type="text/javascript">
var blink = function() {
$('#blink').toggle();
};
</script>
Throws an error saying
$ is not a function
When using an external JavaScript file which gets referred after jQuery I can only seem to use jQuery within the ready function. Is there something I should know about using jQuery in this manner?
That error means jquery isn't loaded
jQuery may be conflicting with another definition, the fact that you can use it in the ready function seems to indicate that it is at least loaded. Have you tried using:
<script type="text/javascript" src="framework/resources/jquery-1.5.1.js"></script>
<script type="text/javascript">
var blink = function() {
jQuery('#blink').toggle();
};
</script>
Sometimes it is cleaner to go direct to the object. If you find that resolves your problem you may wish to switch to noConflict mode which is described in more detail in the docs here:
http://api.jquery.com/jQuery.noConflict/
Hope that helps.
Have you referenced jQuery as the first script in your page? Does the path exist? Try using Google's, just to test:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
It seems that jQuery is conflicting with any existing javascript library.
I hope this link might help.

Categories