First visit this page and hover your mouse over the menu:
http://milabalami.com/saved/2/index.php
Then visit this Wordpress page where I have implemented the exact same code:
http://milabalami.com
When you hover your mouse over the Wordpress menu, you will see that the slider does not show up. Why? I can see that the page gives an error stating:
$ is not a function
http://miladalami.com/wp-content/themes/sandbox/js/custom.js
Why is that? Its the exact same code that worked perfectly on the other page. I dont understand why it is giving that error on the Wordpress page, and not on the other one where the slider works. Anyone that could assist me in solving this puzzle?
Puzzle solved by Yi Jiang.
It looks like somewhere along the way, the $ got overridden. You can still use your code, however, by using jQuery instead of $ -
jQuery(document).ready(function($) {
$("#featured").easySlider({
speed: 400
});
$("#menu ul li a[class!='current']")
.css( {backgroundPosition: "200px 2px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 2px)"}, {duration:400})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(200px 2px)"}, {duration:400})
})
});
It's a stopgap measure, however. You should combine all your code into a single file, instead of separating them out like they are right now, and reduce your dependency on plugins.
Related
My jquery function works fine on local, but once I add it to my WP footer and upload, nothing.
There are a lot of scripts on this page, the but the script I'm trying to make work is this:
jQuery(document).ready(function($){
$("li.accordion").on('click',function() {
$('.mega-sub-menu', this).slideToggle("fast", function() {});
});
});
Jquery is loaded and working, but this script won't function.
Any ideas?
EDIT: Thanks, but it wasn't the stray '
I seemed to be having a cache issue on the site, which has been updated now. Still having the problem.
EDIT2: Removed a link
Your site has a syntax error on it. There is a quote at the end of your JavaScript which may well be causing it to not execute.
jQuery(document).ready(function(){
jquery("li.accordion").click(function() {
jquery('.mega-sub-menu', this).slideToggle("fast", function() {});
});
});' <--- quote here
Ok, you've fixed that now, and all the JavaScript is working, but I can see the next issue that prevents the menu from showing is a CSS rule with !important. (It's overriding the style="display:block" attribute on the mega-sub-menu that is added via JQuery).
So after doing a little more googling, I came up with this answer:
jQuery(function($){
$('li.accordion').click(function() {
$('.mega-sub-menu', this).slideToggle('fast', function() {});
}).click();
});
Here we simulate the click so that the accordion starts out closed and I don't need to add any more CSS to anything.
I added important to the CSS earlier to overcome the inline style — like an idiot, not realizing that the jquery was adding the inline style (I think that's what I did anyway, it was inappropriately late.)
My attempt: https://codepen.io/alexyap/pen/gRLeVY?editors=1010
$(document).ready(function(){
$(document).scroll(function(e){
e.preventDefault();
$("#mainContainer").css("transform", "translateX(-100vw)");
})
})
This is driving me nuts. I'm trying to make my site scroll a full page horizontally. I figured the first part out but alas it stops working after the second scroll.
PS: from my pen you can see I have the body set to overflow hidden but have it commented out (my code only works if I don't have it set so).
Someone please help me figure this out.
In your CodePen, I only added e between the parenthesis in
$(document).on('mousewheel', function(e){
That is the event object passed to your function.
It is needed to compare the wheel delta.
You had it in the $(document).ready(function(e){ where it was useless.
So here is your CodePen updated just like this.
Just for fun... I customized it a little more by foreseeing what someone would like to change using this "div translation" effect.
The first thing is certainly the div amount.
And the translation "fraction" would be another thing...
And a minimum delay between each translation.
So here is a CodePen taking this in account.
I have a problem with the wordpress and with Jquery.
I have this code to show and hide a responsive navigation on the left :
$('.menu').on('click', function(){ if ($('.responsive__menu').hasClass('is-open')) {
$('.responsive__menu').removeClass('is-open');
$('.menu').removeClass('is-active');} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');}});
It works with my website without Wordpress, but once in Wordpress, it seems that half of the code works : the creation of the cross to close the menu except that the menu does not appear.
Can you enlighten me on some points?
The script is loaded, are there a faster and easier way to transform the code with jquery and toogle () ?
It can only be a trouble about code but why it does not work anymore once on Wordpress ?
Thanks a lot for your help, before asking the question I tried many things. ^^
If it works with any of your websites means the code is good, just you might have conflicts in your css, so include your css which is menu related last, and if it doesn't work either, post your css code, so we could see better what's going on, and there is not need for so much code. Initialize your menu without class .open , in your html and use JQUERY:
$('.menu').on('click', function(){
$(".responsive_menu).toggleClass('open');
});
jQuery comes with wordpress in non-conflict mode , to make sure everything works you should use jQuery variable instead of the $ variable.
you can alternatively do the following
jQuery(document).ready(function($) {
// $ variable can be used here
$('.menu').on('click', function() {
if ($('.responsive__menu').hasClass('is-open')) {
$('.respons__menu').removeClass('is-open');
$('.menu').removeClass('is-active');
} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');
}
});
});
I'm trying to add a very basic little jQuery script to a WordPress site which adds the fa-invert Font Awesome class to an icon on event mouseenter and then removes the class on mouseleave.
Here is my little script:
//Jquery Script to invert colour of icons on hover
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-invert");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-invert");
});
};
I've added this script to my function.php file as follows and it appears to be running fine when I load the page:
//include IconHover.js script
wp_enqueue_script('IconHover', get_bloginfo('template_url').'/js/IconHover.js', array('jquery'));
Now I've added the id of IconHover to my fa-twitter-square icon in the footer of the page but it doesn't seem to be inverting the colours on mouseenter.
Does anyone have any thought on why this may be? I've been looking at as many resources and examples of people doing similar things and I think that I am implementing the little bit of jQuery correctly within WordPress.
The site can be viewed here: http://dariusdevas.com/wp/?page_id=2
Any thoughts are greatly appreciated! :-D
its fa-inverse
that is it, following is working code
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-inverse");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-inverse");
});
});
There are two errors in your code one is due to deprecation, the other is a typo.
This is what it looks like:
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-invert");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-invert");
});
};
This is what it should look like:
jQuery(document).ready(function($) {
$("#IconHover").mouseenter(function(){
$(this).addClass("fa-invert");
});
$("#IconHover").mouseleave(function(){
$(this).removeClass("fa-invert");
});
});
Also other than your bit of supplied code in your jquery there is a line of code that is deprecated this is:
event.returnValue
This needs to be changed to:
event.preventDefault
Ok, I've looked through all the questions regarding this and I've tried several of the suggestions to no avail, so I'm hoping someone can shed more light on my problem.
OUTLINE OF THE ISSUE:
I'm running two Nivo sliders in a tabbed box. The code I have works in all the normal browsers, but some reason IE7 doesn't like the code I have and won't register the .click(function(e) when the tab is selected.
HERE IS THE CODE:
Part 1 - this loads the slider gallery on page load on the first tab:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Part 2 - this is one IE7 has an issue with. This is for the other tabs so the gallery won't load until the tab is clicked. For some reason IE7 doesn't like this:
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
$('#gallery1').nivoSlider();
return false;
});
});
</script>
THIS IS WHAT I'VE TRIED SO FAR:
I've tried using the $("#ClickMe").live('click', function() which didn't work as well as the $("body").delegate("p", "click", function() which were the two main solutions I saw people using to get this to work in IE7. When I was debugging I also set an alert to make sure IE was registering the click function:
$('#target').click(function() {
alert('Handler for .click() called.');
});
This had no effect. When you clicked on the tab, it didn't alert which confirmed the click function wasn't working. I've spent quite a while digging around for a solution to this and am plum out of resources. I thought it might something with the code, or some other work around - most of the sites I referenced were from circa 2006 or 2007. Not that JS has changed that much, but I was hoping maybe someone found a simplier solution in the last 4 years.
any help would greatly be appreciated.
D
Without seeing what you're actually working with, possibly you could try preventDefault() instead of return false;
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
e.preventDefault();
$('#gallery1').nivoSlider();
});
});
</script>
I am guessing it is an error before that, that is causing the issue. Are there any errors on the page? Have you tried putting a simple alert('test') where the click function is set? If so, does it work?
EDIT:
From the other things you reference which I see when I did a search is the person was using IETester and it worked fine in regular IE7 and IE8. Are you using a real version of IE7?
The best solution I found was to simply load all the galleries on page load using the:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
It does add some time to the page load time - just about a 1/2 second more, but it solves the problem in IE7.
Thanks for everybody's help in this.
D
I just ran into this same bug, none of the other answers here were satisfactory. I solved this myself by using
$('body').click(function() { ... });