Have simple wordpress jquery script not working - javascript

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

Related

Something wrong when I use jquery .click function in wordpress

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.

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.

Hide div when URL contains

I want to hide the slider (and a bit more) if someone uses the search module on my Joomla site and tried several solutions mentioned here on stackoverflow like: https://stackoverflow.com/a/1760605/1641903
Currently my code looks like this:
<script>
if (/\/search\//.test(window.location)) {
$('#hideonsearch').hide();
}
</script>
I wrapped the slider in <div id="hideonsearch> and tried mentioned jquery in both the body and head (just to be sure), but it doesn't seem to work as you guys can see here.
Any idea on how to get in working?
I saw in your web site that the jquery is not loaded when your code is being executed.
You must put your code in the "onload" function, or make sure the jquery is loaded before doing this.
window.onload = function () {
if (/\/search\//.test(window.location)) {
jQuery('#hideonsearch').hide();
}
};
Or you can use the pure javascript code that is better.
window.onload = function () {
if (/\/search\//.test(window.location)) {
document.getElementById("hideonsearch").style.display = "none";
}
};
I saw another error in your web site now, related to this code:
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
error:
undefined is not a function
And it is related to the same problem, jQuery is not loaded, so you can use "window.onload".

Jquery conflict in Wordpress after move into another hosting

i was looking for some solution it but i didnt find anything.
I think its jquery conflict. I have installed smart-slider, and after move my Wordpress into another hosting its just stopped working. My browser shows me: "undefined its not a function", and my code (generated by plugin ofc):
<script>
njQuery(document).ready(function () {
njQuery('#nextend-smart-slider-1').smartslider({parameters});
});
</script>
I was trying to change it into $.('#next.. or jQuery('#next, but it still broke.
Any ideas?
You can change the code to be a simple jQuery. And not the njQuery.
<script>
jQuery(document).ready(function () {
jQuery('#nextend-smart-slider-1').smartslider({parameters});
});
</script>
Otherwise it won't work. Or else, just make sure that the server has a variable or a script file to handle the njQuery too.

Execute jQuery Popup When Page Loads?

I'm using the Reveal modal plugin by Zurb.
http://www.zurb.com/playground/reveal-modal-plugin
Does anybody know how I can get the modal to execute (as in open the popup box) when my page has finished loading as opposed to when the handler is clicked?
I'd like to use it to display a simple message each time somebody opens my homepage.
I've dug through the code and tried a few things, but I'm a self confessed jQuery noob.
I was going to post the entire contents of the jQuery plugin itself, but it might just be easier to download it and take a look for yourself.
Thanks!
:)
$(function() {
$('#myModal').reveal();
});
OR
$(document).ready(function() {
$('#myModal').reveal();
});
Couldn't you just do the following after you instantiate your modal:
$(document).ready(function() {
// instantiate modal first
$('#myModal').reveal();
});
Something like this should work:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').reveal();
});
</script>
Hey had trouble getting this to work on a page using other .js libraries where JQuery NoConflict was being used -- in that case try this:
jQuery(document).ready(function($) {
$('#myModal').reveal();
});

Categories

Resources