jQuery Not Working, "Zentabs" conflict? - javascript

I'm using a jQuery plugin(?)/library called "Zentabs" and for some reason it's preventing any other jQuery code I write from working...this isn't the first time I've had trouble with jQuery library's breaking other pieces of code but usually I can rearange where the code appears and that'll usually fix whatever the problem is but this time nothing's working -_-
This is what I've got in the header;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("WTF!!!!!");
});
</script>
<script src="<?php baseURL();?>/zentabs.js" type="text/javascript"></script>
<script src="<?php baseURL();?>/date_time.js" type="text/javascript"></script>
<script src="jquery.lazyload.js?v=4" type="text/javascript" charset="utf-8"></script>
When I remove
<script src="<?php baseURL();?>/zentabs.js" type="text/javascript"></script>
Then
$(document).ready(function() {
alert("WTF!!!!!");
});
</script>
Work just fine, but when I include zentabs.js, nothing works =/
And here's the zentabs.js file > http://zenverse.net/wp-content/uploads/2009/09/zentabs.js
Can anybody tell me what I'm doing wrong?
P.S. I'm so freakin' frustrated right now I'm about ready to jump off
a building -_-

You need noConflict there. Try this, then from then forward just use jQuery instead of $()
$.noConflict();
jQuery(document).ready(function() {
alert("WTF!!!!!");
});
You could also set jQuery to a variable if you want, so its a bit shorter to type on all your calls later.
var jq = jQuery;
jq(document).ready(function() {
alert("WTF!!!!!");
jq('input').val( '...' );
});
Read more about noConflict on http://api.jquery.com/jQuery.noConflict/

try this if this solves:
$(document).ready(function() {
$.noConflict();
alert("WTF!!!!!");
});
your can find documentation here: http://api.jquery.com/jQuery.noConflict/

Related

What causes this: Uncaught TypeError: $ is not a function?

I know that this question has already been asked a lot, but none of the solutions suggested worked for me.
I think the problem lies within the jQuery references, but I lack the knowledge to know what is wrong.
Here's the references:
<script src="/tools/scripts/apps/cpc.js"></script>
<script src="/tools/Scripts/tools/jquery/v2_1_4/jquery-2.1.4.min.js"></script>
<script src="/tools/scripts/tools/jqueryui/jquery-ui.min.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/i18n/grid.locale-de.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/jquery.jqGrid_5_3_0.min.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/jszip.min.js"></script>
<script src="/tools/Scripts/tools/date.js"></script>
<script src="/tools/scripts/apps/3rdParties/startPage3rdParties.js"></script>
<script src="/tools/Scripts/tools/jquerymap/dist/jquery.vmap.min.js"></script>
<script src="/tools/Scripts/tools/jquerymap/dist/maps/jquery.vmap.world.js"></script>
This is the codepart where it says jQuery is not a function:
jQuery(document).ready(function($){
// $("#sideNavBox").hide();
//$("#contentBox").css("margin-left:20px!important;");
writeAction();
writeTabs();
$("#DeltaPlaceHolderPageTitleInTitleArea").html("Counterparties");
$(".ms-webpartPage-root").css("border-spacing", "0px");
$(".ms-breadcrumb-top").hide();
$(".ms-mpSearchBox").hide();
//$("#titleAreaRow").hide();
$("#Ribbon.ListForm.Display.Manage.EditItem-Large").hide();
$("#fullscreenmode").click().trigger("click");
// startAutoLaunch();
});
I tried replacing jQuery with $, but it didn't change anything.
I also tried to define
var jQ = jQuery.noConflict(true);
and using jQ(document).ready(function($){
but that didn't work either.
Can someone help me with this issue?
The order in which your scripts are loaded matters. Try to put jquery library first and all its dependencies:
<script src="/tools/Scripts/tools/jquery/v2_1_4/jquery-2.1.4.min.js"></script>
<script src="/tools/scripts/tools/jqueryui/jquery-ui.min.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/i18n/grid.locale-de.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/jquery.jqGrid_5_3_0.min.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/jszip.min.js"></script>
<script src="/tools/Scripts/tools/date.js"></script>
<script src="/tools/scripts/apps/3rdParties/startPage3rdParties.js"></script>
<script src="/tools/Scripts/tools/jquerymap/dist/jquery.vmap.min.js"></script>
<script src="/tools/Scripts/tools/jquerymap/dist/maps/jquery.vmap.world.js"></script>
<!-- your script should be last -->
<script src="/tools/scripts/apps/cpc.js"></script>
Also from the docs:
// Shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
});

Jquery slider doesn't work with own jQuery variable

I am creating a widget that will eventually sit on a clients site, and I need to create my own jQuery variable, so that the jquery versions don't conflict. Currently I have the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script> // My jQuery.
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
Everything else works just fine, but jQuery slider stopped working when I changed to my own jquery:
TypeError: $sf_jquery(...).slider is not a function
Is the problem with the jQuery slider, or am I missing something else here?
Good plain javascript slider -tips are welcome as well!
Edit: Everything the widget needs, is inside function call like this:
$sf_jquery(function(){ // all of the code here });
Edit: The jQuery Ui is imported aswell. Just forgot to add it here. The importing looks like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
Edit, Solution!
Dummy me didn't think that the slider isn't part of the native jQuery. The noConflict must be after the jQueryUI, like this:
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
You aren't including jQueryUI code (at least in your example).
Slider is part of jQueryUI and is not native to jQuery alone. (https://jqueryui.com/slider/)
Your "noconflict" function must be called before the second jQuery call.

Jquery template is breaking script

I found a script which I want to use to my website. The problem is that this script is using jquery.tmpl which is messing some stuff on my site.
<script type="text/javascript" src="cameras/jquery.tmpl.js"></script>
I think it may be any conflict there with jQuery which I am using for some menus.
<script src="js/jquery-1.10.2.min.js"></script>
Is there anything I can do to fix that ?
Regards,
use noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

Scrollsnap JQuery Plugin

Hello I'm looking for someone proficient in Javascript. The site I'm using uses a javascript file to initialize the plugins and load settings and what not. So after reading some of
http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/
I decided to use it to snap to my divs(all with the class "slide")...
However placing this
$(window).scrollsnap({
snaps: '.slide',
proximity: 100
});
in my js.js file accomplished nothing
Any help is appreciated!
The code I used with that was this and it worked, give it a try:
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.slide',
proximity: 100
});
});
Not sure about $(window), where did you get that from?
Also, are you linking to the appropriate javascript files and to the jquery library? Make sure to put it at the end of your html like this:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.scrollstop.js"></script>
<script src="js/jquery.scrollsnap.js"></script>
<script src="js/jquery.fitvids.js"></script>
</body>
</html>

jquery no.conflict not working

I want to use both jquery 1.4 and 2.0 i am using noconflict function but this code does not work.
document head is something like this
<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>
<script>var jq142 = jQuery.noConflict(true);</script>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
and the jquery2.0 code is like this
<script>
jq142(document).ready(function(){
jq142('input').parent().next().hide();
jq142('input').on('focus', function () {
jq142(this).parent().next().show();
});
jq142('input').on('blur', function () {
jq142(this).parent().next().hide();
});
});
</script>
is something wrong in this approach because i am unable to make it work.
You need to put the noConflict statement after the second script has loaded. See the last example:
http://api.jquery.com/jQuery.noConflict/

Categories

Resources