jQuery in WordPress - Font Awesome Invert on mouseenter and mouseleave events - javascript

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

Related

Can't get jquery function to work on wordpress site

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.)

Wordpress & jQuery Responsive Navigation

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

jQuery .attr() not working with WordPress theme

I have a WordPress site located at http://test.bcminiwarehouses.com
I am trying to add 2 attributes to the Make a Payment link in the menu so that it functions like clicking on the + on the top right.
When I inspect the element in Chrome and manually add the attributes, the link works as desired. However the jquery command appears not to be functioning to automatically add these attributes.
The code that can be viewed in the source code is:
$(".menu-item-6654").attr('data-target', '.x-widgetbar');
$(".menu-item-6654").attr('data-toggle', 'collapse');
Maybe there's a conflict between jQuery and Wordpress,try to do:
jQuery(document).ready(function($) {
$(".menu-item-6654").attr('data-target', '.x-widgetbar');
$(".menu-item-6654").attr('data-toggle', 'collapse');
});
put your code in
$(function() {
});

Going to a page anchor after load adding transition

I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()

Adjust menu bar buttons' highlighter when scrollling the webpage

Take a look at https://www.simple.com website. See the way menu (& submenu) works when you scroll the webpage.
Does anyone know what it's called or know how it works? I'm trying to find a example or plug that can do this.
Thanks...
It is called fixed navigation bar and here is a great tutorial
http://www.fuelyourcreativity.com/how-to-create-a-fixed-navigation-bar-for-your-website/
It is very simple using jquery scroll() event handler.
You can bind it using following code
$(window).scroll(function () {
//your code goes here
}
read more at http://api.jquery.com/scroll/
It's just a simple anchor tag they've used along with some jQuery. A quick example here for you.
Create your links as normal Blog. This creates an anchor to move to your blog section.
Add a class to your element so it's now like: Blog
Next, add the jQuery code below to your page.
Don't forget to include the jQuery library..
$(document).ready(function() {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
I have decided to delete the question as there's no answer to what I'm looking for and there's no need to leave behind an unanswered post 2 years from now.

Categories

Resources