Something wrong when I use jquery .click function in wordpress - javascript

I am trying to change they way my cart shows. Today it is using css3 to show on hover.
I need it to display onclick I've tried a lot of different suggestions here on Stackoverflow but it still doesn't work. I am a amateur and hope that someone can help me understand why it is not working!
When I add display: table; to .box-dropdown it shows it the way i want it but I can't get it to do that! :(
It works perfectly on JSFiddle when i remove other elements around it. JSFiddle: http://jsfiddle.net/ggoe8v6k/
The website is http://swemed.se
I tried :
$(".top_cart_a").click(function () {
$('.box-dropdown.cart').css("display", "table");
});
And :
$(".top_cart_a").live('click',function() {
$('.box-dropdown.cart').css("display", "table");
});

Try wrapping javascript in a self invoking function. jQuery as an argument and $ as a variable:
(function($) {
$(document).ready(function(){
$(".top_cart_a").click(function () {
$('.box-dropdown.cart').css("display", "table");
});
});
}(jQuery));

In your JSFiddle, you forgot to include JQuery library, resulting in a Uncaught ReferenceError: $ is not defined error.

Related

Have simple wordpress jquery script not working

Ok so i have a simple jquery script im trying to load into wordpress i have other scripts already working but for some reason this one is not working. I have it working just on a simple html page but right when i put in wordpress.
Could someone help me and let me know why i keep getting unknown syntax error
jQuery(document).ready(function ($) {
jQuery(".comb-7").hover(function () {
$(this).find('.background-hover').toggle();
}
});
thanks for any help
This cant Work, you're missing the cloosing the bracket for the hover method
You don't close the hover method. Should be:
jQuery(document).ready(function($) {
$(".comb-7").hover(
function () { $(this).find('.background-hover').toggle(); });
});

Jquery add class to existing item on page

This is my code: http://jsfiddle.net/47apf/12/
Very simply, I'm trying to hide the button for those users who have javascript enabled. I am using this code:
$(function() {
$('.trigger').addClass.attr('hidden');
$('#candidate_filter').change(function() {
this.submit();
});
});
I am new to jquery, is there any reason why this isn't working? It says in the log "undefined is not a function".
Use,
$('.trigger').addClass('hidden');
You are not utilizing the syntax properly. Read here to know more about .addClass()
DEMO

insertBefore - swap two divs

If you look at my website link to website, you will find an ID for the content (#content) and one for the sidebar (#sidebar).
(It's located in "#wrapper > #main > .avada-row > #content/#sidebar")
I have tried to switch order/place so #sidebar comes before #content. I tried with this code:
<script type="text/javascript">//<![CDATA[
$(function(){
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});//]]>
</script>
Here is a JSFiddle example (it works in JSFiddle but not on my website):
JSFiddle
I really hope someone can help me!
NOTE!:
This line of javascript works too in JSFiddle but not on my website:
$('#sidebar').insertBefore($('#content'));
I guess there is no need to use each function?
And sorry - I forgot to say that I know nothing about javascript programming. I just try my best with no luck I guess :/
Best Regards
I can't comment my own question, so I will do it here:
Karl-André - Yeah, I am aware of the error "Uncaught TypeError: undefined is not a function" but i don't know how to fix it.
Arjun - I tried that too but $ is being overriding and therefore is does not work :/
Zessx - Can you help me find out what is overriding $ ?
The code:
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Did not work when I insert it in head.
Thank you so much! I really appreciate it !!!!!!!!!!!!
Something is overriding the jQuery $ :
> $
undefined
> jQuery
function (a,b){return new n.fn.init(a,b)}
If you change your script by this one, you'll see it works :
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Now, we need to define what is overriding $.
As a workaround, you still can use this code in your <head>, as mentioned in jQuery doc (search for "Aliasing the jQuery namespace") :
jQuery(function($) {
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});
if you just want to add the content above the selected div just use
$('#sidebar').insertBefore('#content');
-Thanks.

jQuery On Not working for simple script

There must be some mental block that I'm just not getting...My entire site is working fine, but dynamically created links with an ID are not. Something is wrong in my code...it's as simple as this but it's not working, please show me my dumb mistake (I know it's something simple).
so for example this would be a generated link:
Hi
and then I have this script:
$(document).ready(function() {
$(document).on('click','#himan',function(){
alert('hi');
});
});
but nothing happens, and I get no errors...I'm lost, maybe my coffee is not working today. Can someone help me?
Here is demo
It is working perfect:
$(document).ready(function () {
$(document).on('click', '#himan', function () {
alert('hi');
});
});
reason might be duplicate of id, there must only one element with specific id because id is a unique on a page, if you adding multiple element use class instead of id.
Handle the click event on #himan itself...
function initializeDynamicLinks() {
$('#himan').on('click',function(){
alert('hi');
});
}
$(document).ready(function() {
initializeDynamicLinks()
});
Here you see it working: http://jsfiddle.net/digitalextremist/emUWL/
Rerun initializeDynamicLinks() whenever you add links dynamically.
And... as has been pointed out several times in comments, you need to make sure #himan only occurs once in your source to be completely sure everything will function properly.

Javascript Not Working On Page?

I am trying to hide Division B on this page. Due to the nature of the Wordpress template, it's kind of difficult to do. I am trying to use javascript in the footer:
$('div#division-2 div.teampage').prev('h2').css("display","none");
This works perfectly on JSFiddle, so I'm not sure what I'm doing wrong. I also created a javascript file with the code. Can someone please give me some guidance?
In the header, you have this code:
var $jquery = jQuery.noConflict();
This disables the $ shortcut. Replace $ with jQuery or $jquery in your code. For example:
jQuery(document).ready(function() {
jQuery('div#division-2 div.teampage').prev('h2').css("display", "none");
});
The reason the code in hide-division.js isn't working is that while it is using $jquery (for $jquery(document).ready, at least; it still needs to use that in the body of the handler), hide-division.js is running before the code calling noConflict.
In your hide-division.js file, code is like:
$jquery(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Here $jquery is not defined so the next code is not executing. Please remove jquery and use the following code:
$(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Hope this helps you.
just try giving $('div#division-2 h2').css("display","none");
$jquery must not given... its invalid... either $ or jQuery must be given...
This tutorial may help u...

Categories

Resources