bring the pixel support forum

1. 

   wearemystro
   Member

   Hi there,

   I have created 4 columns for my pricing table. I want to fade all other columns to 0.5 opacity when hovering over one of the columns. I need to add some jquery to make this work but I'm not sure where I would place the jquery?

   Thanks

   Posted 1 year ago #
2. 

   admin_btp
   Key Master

   Hi,

   1) create a new .js file, let's say "flare-child-theme/custom.js"
   2) open "flare-child-theme/functions.php"
   3)
   add this code

   
function btp_flarechild_enqueue_scripts(){
wp_register_script('custom', get_stylesheet_directory_uri() . '/custom.js', array('jquery', 'main'),'1.0');
wp_enqueue_script('custom');
}
add_action( 'wp_enqueue_scripts', 'btp_flarechild_enqueue_scripts' );


   voila :)

   this way all your JS will be placed inside the flare child theme, leaving parent theme untouched

   regards,
   Michael

   Posted 1 year ago #
3. 

   wearemystro
   Member

   Great, thank you! Do I need to add something first in the javascript file or do I just go and paste the code in there?

   When I just paste this, I get an error:

   $(document).ready( function () {
   $('.li_class').hoverIntent(function(){
   $(this).removeClass('fade').siblings().animate({ opacity: 0.5 }, 500);
   },function(){
   $(this).siblings().andSelf().animate({ opacity: 1 }, 100);
   });
   });

   Posted 1 year ago #
4. 

   wearemystro
   Member

   Don't worry, I've fixed it but the code doesn't seem to be working.

   Perhaps you can help? I have 4 columns in my pricing table. When I hover over one of the columns, I want the other columns to fade out.

   How can I achieve this effect? Thank you :)

   Posted 1 year ago #
5. 

   admin_btp
   Key Master

   Are you sure custom.js is loaded?
   You can check it in the firebug, or directly in the source code

   regards,
   Michael

   Posted 1 year ago #
6. 

   wearemystro
   Member

   Yeah it's loaded, but the code I'm using doesn't seem to achieve the effect I want:

   $(document).ready( function () {
   $('.column-normal').hoverIntent(function(){
   $(this).removeClass('column-fade').siblings().animate({ opacity: 0.5 }, 500);
   },function(){
   $(this).siblings().andSelf().animate({ opacity: 1 }, 100);
   });
   });

   Posted 1 year ago #
7. 

   admin_btp
   Key Master

   Maybe try without hoverIntent, just regular hover event

   regards,
   Michael

   Posted 1 year ago #
8. 

   wearemystro
   Member

   I'm not sure what you mean by this? Could you explain a bit more please? Thanks

   Posted 1 year ago #
9. 

   wearemystro
   Member

   This website's pricing table is an example of the effect I want - http://www.shopify.com/pricing.

   Are they achieving the fade in/out with jquery or just css?

   Posted 1 year ago #
10. 

    admin_btp
    Key Master

    hoverIntent is not a regular JS event - in fact it's a plugin which fakes a "delayed hover ".

    So in your code, you should try to use hover event instead

    regards,
    Michael

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.