Adding jQuery code to wordpress - javascript

I am trying to add the following code to Wordpress but it doesn't seem to work. The same code in a fiddle works.
Please help.
$(".box").hover(
function (e) {
$('.box').not(this).addClass('grey')
}, // over
function (e) {
$('.box').removeClass('grey')
} // out
);


You have to wrap it in the noConflict mode. Like:
jQuery(function($){
// Your jQuery code here, using the $
});
See: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
So, that would boil down to
jQuery(function($){
$(".box").hover( function (e) {
$('.box').not(this).addClass('grey');
}, // over
function (e) {
$('.box').removeClass('grey');
} // out
);
});

Related

jQuery error in visibility despite functioning function

I have the problem that with my jQuery code, despite the working code, the error message:
script.js: 28 Uncaught TypeError: $ (...). Css (...) is not a function
occurs. It was supposed to work anyway, but since I don't want any unnecessary error codes in my code, I ask if anyone has a solution to this error?
Here is my code:
$(document).ready(function () {
$("#bgh-tooltipin1").hover(function () {
$("#bgh-tooltipout1").css('visibility', 'visible');
}, function () {
$("#bgh-tooltipout1").css('visibility','hidden')()
});
});

You are adding unnecessary parenthesis at the end:
$("#bgh-tooltipout1").css('visibility','hidden')**()**
The last parenthesis would be fine if .css('visibility','hidden') returned a function, but instead, it returns a jQuery object representing the "#bgh-tooltipout1" element
This is the correct version:
$(document).ready(function () {
$("#bgh-tooltipin1").hover(function () {
$("#bgh-tooltipout1").css('visibility', 'visible');
}, function () {
$("#bgh-tooltipout1").css('visibility', 'hidden');
});
});

jQuery : Object has no method for $.fn

i have this function in my js file
(function($) {
$.fn.foobar = function() {
// some code
};
})(jQuery);
and when i call the following
jQuery(function() {
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
$.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js");
jQuery('object').foobar();
});
it gives me the following
Uncaught TypeError: Object [object Object] has no method 'foobar'
i'm trying this on Rails file (*.js.erb)

I guess you are overwriting your jQuery array with that second one, try doing this:
(function($) {
$.fn.foobar = function() {
console.log(true);
};
})(jQuery);
(function($) {
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", function() {
$('body').foobar();
});
})(jQuery);
working fiddle

Only run these codes in the fiddle, it runs fine. So, i guess that your code may be have some error at other place.I suggest you show more code for the question.

try something like this
<script src="jquery.js">
<script>
(function($) {
$.fn.foobar = function() {
// some code
};
})(jQuery);
$(function(){
jQuery('object').foobar();
})
</script>

JavaScript call function not working - simple example

I am trying to call a JavaScript function (plain old JS.. not jQuery or any other library) but i am having some issues. Seems simple but maybe i am doing something silly. I have a HTML element with an ID of testbutton. Here is my JavaScript..
document.getElementById("testbutton").onClick = function() { makeRequest('test.html'); };
function makeRequest(url) {
alert('clicked');
}

It's onclick, not onClick
document.getElementById("testbutton").onclick = function() { makeRequest('test.html'); };
function makeRequest(url) {
alert('clicked');
}

Very simple jquery custom function throws error

I have the following code:
$(document).ready(function() {
$.fn.addRemoveButton = function() {
alert(1);
};
$.addRemoveButton();
});
And I get the following error message from firebug:
TypeError: $.addRemoveButton is not a function
$.addRemoveButton();
Why and how can I fix this?

You need to define a selector, try this:
$(document).ready(function() {
$.fn.addRemoveButton = function() {
alert(1);
};
$(document).addRemoveButton();
});
Here is working jsFiddle.

You need to apply that to any DOM.
Example
jQuery Code
$(function()
{
$.fn.addRemoveButton = function() {
alert(1);
};
$('#letit').addRemoveButton();
});
HTML Code
<div id="letit"></div>

or, you can create it as a jQuery global function:
$(document).ready(function() {
$.addRemoveButton = function() { // removed the .fn
alert(1);
};
$.addRemoveButton();
});
This binds the function to the jQuery object, where you can then use it like in your original example.
See this post for the difference between jQuery.fn.method and jQuery.method

How do i create a method/function in Jquery

How do i create a method in Jquery
For example
function dosomething()
{
// do something
}
dosomething();// i can call the function this way
How can i define function like dosomething() and call them in jquery?
Thanks

In exactly the same way. jQuery is JavaScript.
function doSomething() {
// do something
}
$(function () {
doSomething(); // call doSomething on document ready.
});

You can create a basic jQuery function:
(function($)
{
$.fn.myFunc = function()
{
return this.each(function()
{
alert("do something for each element return by JQuery object");
});
};
})(jQuery);
Doing the above allows me to $("#myElement").myFunc();
Don't forget that jQuery is javascript. Javascript is not jQuery.

You can read up on jQuery plugin authoring here

Categories