I'm trying to use a basic on click to expand so when the user clicks on the title it shows more details but for some reason it isn't working.
Here is the page in question:
http://eftposnz.wpengine.com/integrated-eftpos/pos-vendors/
I'm not sure if the issue is with the code itself or if I'm not using it correctly.
Here is the code I'm using:
$(document).ready(function () {
$(".content").hide();
$(".show_hide").on("click", function () {
var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';
$(".show_hide").text(txt);
$(this).next('.content').slideToggle(50);
show_hide.preventDefault();
});
});
Any help would be greatly appreciated and please let me know if you need any further information.
I'm not familiar with WordPress, but it seems like the jQuery version it's using (or that you chose to use) won't let you use $ from the get-go.
As you can see on the jQuery version included on your page, jQuery.noConflict() is called at the end, making $ unavailable.
Here's what you can do, as an easy/safe workaround:
(function($) {
// your code using $ here
})(jQuery);
The site is currently using wordpress, so there is not "$" defined in the window context, instead of this, is only avalible via "jQuery".
A solution can be:
(function($){
$(function(){
/* Here your code */
});
})(jQuery);
Your jQuery is known in the window's scope as jQuery instead of $, which is a result of jQuery.noConflict().
Now you could create $ yourself by writing this above your code:
var $ = jQuery; // yuck!
But that would pollute your global scope!!
It would be cleaner to wrap your code into an anonymous function like this:
(function ($) {
// your code
}(jQuery));
Related
I have a simple jQuery script in a WordPress plugin that is using a jQuery wrapper like this:
$(document).ready(function(){
// jQuery code is in here
});
I am calling this script from within the WordPress Dashboard and am loading it AFTER the jQuery framework has loaded.
When I check the page in Firebug I constantly keep receiving the error message:
TypeError: $ is not a function
$(document).ready(function(){
Should I maybe wrap the script in this function:
(function($){
// jQuery code is in here
})(jQuery);
I have had this error quite a few times and am not sure how to handle it.
Any help would be greatly appreciated.
By default when you enqueue jQuery in Wordpress you must use jQuery, and $ is not used (this is for compatibility with other libraries).
Your solution of wrapping it in function will work fine, or you can load jQuery some other way (but that's probably not a good idea in Wordpress).
If you must use document.ready, you can actually pass $ into the function call:
jQuery(function ($) { ...
This should fix it:
jQuery(document).ready(function($){
//you can now use $ as your jQuery object.
var body = $( 'body' );
});
Put simply, WordPress runs their own scripting before you can and they release the $ var so it won't collide with other libraries. This makes total sense, as WordPress is used for all kinds of web sites, apps, and of course, blogs.
From their documentation:
The jQuery library included with WordPress is set to the noConflict()
mode (see wp-includes/js/jquery/jquery.js). This is to prevent
compatibility problems with other JavaScript libraries that WordPress
can link.
In the noConflict() mode, the global $ shortcut for jQuery is not
available...
This solution worked for me
;(function($){
// your code
})(jQuery);
Move your code inside the closure and use $ instead of jQuery
I found the above solution in https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma
...after searching too much
var $=jQuery.noConflict();
$(document).ready(function(){
// jQuery code is in here
});
Credit to Ashwani Panwar and Cyssoo answer: https://stackoverflow.com/a/29341144/3010027
Reasons why in WordPress jQuery and not $ is used: https://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/
You can avoid confliction like this
var jq=jQuery.noConflict();
jq(document).ready(function(){
alert("Hi this will not conflict now");
jq('selector').show();
});
Try this:
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
</script>
Also, I find the good solution for use jQuery noConflict mode.
(function($){
$(document).ready(function(){
// write code here
});
// or also you can write jquery code like this
jQuery(document).ready(function(){
// write code here
});
})(jQuery);
I found this solution from here TryVary.com.
You have to pass $ in function()
<script>
jQuery(document).ready(function($){
// jQuery code is in here
});
</script>
replace $ sign with jQuery
like this:
jQuery(function(){
//your code here
});
Double check your jQuery references. It is possible that you are either referencing it more than once or you are calling your function too early (before jQuery is defined). You can try as mentioned in my comments and put any jQuery reference at the top of your file (in the head) and see if that helps.
If you use the encapsulation of jQuery it shouldn't help in this case. Please try it because I think it is prettier and more obvious, but if jQuery is not defined you will get the same errors.
In the end... jQuery is not currently defined.
Use
jQuery(document).
instead of
$(document).
or
Within the function, $ points to jQuery as you would expect
(function ($) {
$(document).
}(jQuery));
(function( $ ) {
"use strict";
$(function() {
//Your code here
});
}(jQuery));
What worked for me. The first library to import is the query library and right then call the jQuery.noConflict() method.
<head>
<script type="text/javascript" src="jquery.min.js"/>
<script>
var jq = jQuery.noConflict();
jq(document).ready(function(){
//.... your code here
});
</script>
<script>
var jq=jQuery.noConflict();
(function ($)
{
function nameoffunction()
{
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
now use jq in place of jQuery
You come across this issue when your function name and one of the id names in the file are same. just make sure all your id names in the file are unique.
You can use
jQuery(document).ready(function(){ ...... });
or
(function ($) { ...... }(jQuery));
wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
If you are using jquery for frontend, you can achieve it by passing $deps as jquery
I am trying to get this codepen http://codepen.io/eternalminerals/pen/qdGvMo working on my wordpress page at http://eternalminerals.com/test/
I know that since Wordpress is in no-conflict mode, I have to change the $ to jQuery, but I did that and made sure the script was in the header as well (using this JS adder plugin css-javascript-toolbox) but it still isn't working like the codepen. I tested the codepen without the javascript and it behaves like the wordpress page, so I know the issue must be in the javascript.
<script type='text/javascript'>
StarWars = (function() {
/*
* Constructor
*/
function StarWars(args) {
// Context wrapper
this.el = jQuery(args.el);
// Audio to play the opening crawl
this.audio = this.el.find('audio').get(0);
// Start the animation
this.start = this.el.find('.start');
// The animation wrapper
this.animation = this.el.find('.animation');
// Remove animation and shows the start screen
this.reset();
// Start the animation on click
this.start.bind('click', jQuery.proxy(function() {
this.start.hide();
this.audio.play();
this.el.append(this.animation);
}, this));
// Reset the animation and shows the start screen
jQuery(this.audio).bind('ended', jQuery.proxy(function() {
this.audio.currentTime = 0;
this.reset();
}, this));
}
/*
* Resets the animation and shows the start screen.
*/
StarWars.prototype.reset = function() {
this.start.show();
this.cloned = this.animation.clone(true);
this.animation.remove();
this.animation = this.cloned;
};
return StarWars;
})();
new StarWars({
el : '.starwars'
});
</script>
There are no javascript console errors on my website page but it behaves as if there is no javascript controlling the html like in the codepen. Any help would be greatly appreciated. Thank you!
If you want to quickly update your jQuery call and pass in jQuery to it's own function then you can do so as shown below:
jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});
Additionally, and I've executed this methodology myself below, you can pass jQuery in as the dollar sign. NOTE: All jQuery code that uses "$.apis()" instead of "jQuery.apis()" must be within this code snippet which you may also load from an external script if necessary.
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
You can find the link to examples with more detail here: (https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/)
This solution is designed for wordpress, but I was using in a CMS-serving engine that rendered all the JS files on the backend and only sent out a view. In that scenario I could never use the dollar sign declaration in a typical document.ready function as you are trying so our issue is identical, just with a different engine behind it. This should help, cheers and happy coding!
Ok, thanks to Wordpress embedded javascript on page doesn't work it seems like all I had to do was surround the script with a jQuery ready function:
jQuery(function() {
/* your code here */
)};
http://eternalminerals.com/test/ works now woohoo!
There is some sort of jquery conflict that I can't get my head around. I have a script that's working by itself here:
http://www.pitestiretailpark.ro/working.html
When the same script is inserted into a Joomla page (along with html/css code), the dropdown menus don't work.
http://www.pitestiretailpark.ro/test/
I am not a programmer, I know my HTML but have little knowledge of jquery. The standalone script has been copied from another page, stripped bare (but working!) and when I try to insert into Joomla, it stops working.
there is another lib using the $ sign as a function.Use the jQuery.noConflict() method like this;
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
// your code
});
replace $ in your scripts with jQuery, also call it on document ready :
jQuery(document).ready(function() {
jQuery('.div_btn_menu').hover(
function() {
jQuery(this).children('.div_sous-menu').css('top',$(this).children('.btn_menu').height()+'px')
jQuery(this).css('z-index',10000000)
jQuery(this).children('.div_sous-menu').stop(true,true).fadeIn(200)
},
function() {
jQuery(this).css('z-index',1)
jQuery(this).children('.div_sous-menu').stop(true,true).fadeOut(200)
}
);
})
This is pretty basic, still doesn't work... I'm trying to change the class of my button, which has the id "nav_list". I wrote the script:
var specialSection = document.getElementById("nav_list");
specialSection.onclick = function() {
alert("what");
$('#nav_list').toggleClass('active');
};
I get the "what" alert, but the class isn't toggled. What am I missing? Thanks in advance!
toggleClass is a jQuery method, for use it you must include jQuery in your page.
Like:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
At the moment if you check the console you must see an error like (demo: http://jsfiddle.net/IrvinDominin/GyaBY/):
ReferenceError: Can't find variable: $
Avoid mixing jQuery and javascript event binding so your code will look like:
$('#nav_list').click(function() {
alert("what");
$(this).toggleClass('active');
});
Demo: http://jsfiddle.net/IrvinDominin/GyaBY/2/
I'm a beginner at javascript and i have used jsfiddle to create a navigation bar which appears when the user has scrolled down.
When i copy the code to dreamweaver it no longer works?
I have researched and it said something about adding the jquery framework or something?
Or is there a way to do this without the framework?
Link to jsfiddle for full code: http://jsfiddle.net/fNn7K/270/
javascript :
$(window).on('scroll', function () {
console.log($(this).scrollTop());
if ($(this).scrollTop() > 50) {
$('.nav').addClass('visible');
}else if ($(this).scrollTop() <= 50 && $('.nav').hasClass('visible')) {
$('.nav').removeClass('visible');
}
});
Without jQuery you can do :
window.onscroll = function() {
var display = document.body.scrollTop > 150 ? 'inline' : 'none',
elems = document.getElementsByTagName('nav');
for (var i=0; i<elems.length; i++) {
elems[i].style.display = display;
}
}
FIDDLE
When i copy the code to dreamweaver it no longer works?
JS Fiddle assembles a page based on several pieces of user entered data. One of those pieces of data is the selection of a library.
You have to copy the code to the right places in the document and include the same libraries.
Even then, the preview modes of Dreamweaver might not show it up, because they are (or at least were) entirely awful. Do you testing in a real browser.
I have researched and it said something about adding the jquery framework or something?
You need the jQuery library to use jQuery methods, yes.
Or is there a way to do this without the framework?
jQuery is just some JavaScript written by other people. You can reproduce anything it does. A line by line rewrite of your code to not use jQuery would be out of scope for a stackoverflow answer though.
you need to add jquery.js file in your code (dreamweaver)..
add this in between <head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
in the fiddle you provided, the jquery is already loaded..so you didn't get that error.
and don't forget to wrap your code inside document.ready function (which is again, already added in fiddle)..
$(function(){
$(window).on('scroll', function () {
.....
});
});