main slider not working due to diapo slider - javascript

On my website(http://cpshostworks.com/xpertisegulf.com/test12/index.html), the main slider is not working after I put the DIAPO slider. It is caused due to a conflict between 2 jquery files.
Could anyone please help in fixing this issue. I am unable to understand what needs to be done here. I want both the sliders to work (main slider & our partners slider)
I am stuck with this situation for the past one week.
Regards,
Josh

If conflicts occurred between 2 or more jQuery libraries, what I usually do is wrapping $(document).ready function like this:
(function ($) {
$(document).ready(function(){
//here you can call your plugin function
});
})(jQuery);
It prevents libraries conflict.
For more information, visit this link http://api.jquery.com/jquery.noconflict/
EDIT: Please note that you should do it for every jQuery plugin separately. So if you want to call another plugins function, you should wrap it again in different scope.
SECOND EDIT After inspecting your code in console I founded errors. Instead of
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
try with
(function ($) {
$(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
})(jQuery);
and do it for all following functions calls.

Related

$.alert is not a function in Jquery in console error

I'm executing an alert with Jquery as like $.alert(param); The console is providing as $.alert is not a function.
How to overcome it ?
function AlertModelPoupMast(param) {
$.alert(param); //It's custom alert. dont suggest normal alert() here please.
return false;
}
If I place $.noConflicts() it is working for first time , but after that again not working.
function AlertModelPoupMast(param) {
$.noConflict(); //working for 1 time. not working from 2nd time.
$.alert(param);
return false;
}
Replace
$.alert();
to
alert();
This can happen when you not included jquery file or $ is conflicted with some other plugin, changing $ with Jquery may solve that problem,
I think you are using craftpip custom alert like here
here you look with the issue
https://github.com/craftpip/jquery-confirm/issues/32
me also faced similar issue. And the issue was jquery.min.js loaded twice which caused conflict. Make sure jquery and all other js files loaded once. It may fix the problem. Also put jquery.min.js at the top of other js files if possible, because jquery plugin may be needed by other plugins.
Hope it'll help someone.
Use
alert("Your message");
Please ask for clarification if needed.

jQuery Datepicker okay on first load of a page but fails thereafter

This is the second time I have asked this question. Neither the responses I received initially nor any of the myriad of other answers to similar questions have helped me to solve the problem.
The problem is that once a datepicker object is initialized, a second initialization causes it to fail. I have tried all sorts of blurring and destroying but nothing has worked for me.
Please take a look at this simple page which demonstrates the problem
Here is the javascript for the page that contains the datepicker input elements...
$(document).ready (function(){
sp = " ";
lf = '\n'
$(function (){
$("input#datepicker").datepicker();
$("input#datepicker2").datepicker();
})
})// document ready
I would truly appreciate any help to get this working. I've already spent about eight hours with no success.
Thanks,
-dmd-
Your code is obsolete. you got a document ready function inside of an document ready function ( $(function(){}) is a shorthand of $(document).ready(function(){}). But this isn't the Problem. Use the following code in your divtest.html and remove the calls in datepicker.html:
$(function(){
$(document).on('DOMNodeInserted','input#datepicker,input#datepicker2', function(){
$(this).datepicker();
});
}
Finally, I have a solution and it is simple.
On the datepicker page, before initializing datepicker, add this line
$('#ui-datepicker-div').remove();
then
$("input#datepicker").datepicker();
$("input#datepicker2").datepicker();
This works for me and I truly hope it works for everyone else who has been bogged down with the issue.

"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");
});

How to make this grid work

I purchased a html5 theme that I am customizing for my church website. It has two cool features:
A tab script that allows for multiple items to displayed on one page.
a grid that will allow me to display sermons in a series in a neat and orderly way.
Both of these work well when used alone, but when I try to use the grid inside the tabs, no dice.
I am a design guy and know very little about Javascript functions and need help. Here is what the developer, who has not got back with me said to do:
"The grid function is built to run on page load and when you put it inside a tab it doesn’t initialize on page load so don’t work when you change tabs. A custom function needs to be built for this which will run the isotope grid on tabs change. Like:"
$(".nav-tabs li")click(function(e){
ADORE.IsoTope();
e.preventDefault();
}
I do not know where to add this or even if something else needs to be added. I have also attached a link where you can download my code (html/php and .js file) so you can see what is going on. Any help would be appreciated. Remember, I know very little about Javascript.
https://www.dropbox.com/s/jypfjz3a89soxh7/example.zip?dl=0
Add:
$(".nav-tabs li a").click(function(e){
$('a[href="' + $(this).attr('href') + '"]').tab('show');
var IsoTopeCont = $(".isotope-grid");
IsoTopeCont.isotope({
itemSelector: ".grid-item",
layoutMode: 'sloppyMasonry'
});
});
at Line 469 of your init.js and it should work for you. Thanks
You can try the following: inside your init.js add the following:
$(".nav-tabs li").click(function(e){
e.preventDefault();
ADORE.IsoTope();
});
e.g. in the first line after var ADORE = window.ADORE || {};
As you mentioned that you don't know much about javascript: the first line starts with
jQuery(function($){ ...
This takes care about that everything inside the { will get executed when jQuery is loaded.
I'm not sure if the e.preventDefault(); is necessary - this is used e.g. to prevent links from getting executed and attach a different function to the click() event, so it could be possible that Isotope is working when a tab is clicked, but the tab is not working anymore.
If this won't work, you can check with web dev tools if there are any script errors. In case you're unfamiliar with web dev tools, find some details for Firefox here: https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console

button in jquery and jscript

I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.

Categories