HCProfessionals Posted April 1, 2012 Share Posted April 1, 2012 I need a highlighter effect using onclick. Basically when someone clicks "add to cart" I want the cart quantity "<span class="cart-quantity"></span>" to highlight for a second or two and then fade. Quote Link to comment Share on other sites More sharing options...
HCProfessionals Posted April 1, 2012 Author Share Posted April 1, 2012 I have this so far, but it isn'tworking... <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#product-image-buy-link").click(function(){ $("#top-bar-content-items").effect( "highlight", {color:"#FFF"}, 3000 ); }); }); </script> <span id="top-bar-content-items">You have <span class="cart-quantity">0</span> products in your cart</span> <span id="product-image-buy-link" class="purchase">add to cart</span> Quote Link to comment Share on other sites More sharing options...
sunfighter Posted April 1, 2012 Share Posted April 1, 2012 HCProfessionals when you want the user to click on something you MUST make that apparent to him/her. I removed your span and made it a button. I don't know where ".effect()" came from, it's not part of the base jquery and if you got it from an extension module you should have mentioned that. This does not have a fadeOut but it does work. Oh, highlighting a number is hard to see maybe you want to change that or use drop shadows? What it does is show how to delay a command. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>New document</title> <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script> // My location, yours may be different <script type="text/javascript" language="javascript"> $(document).ready(function() { $("input#CkHere").click(function(){ var origColor = $('.cart_quantity').css("color"); $('span.cart_quantity').css({'color': 'red'}); setTimeout(function() { $('span.cart_quantity').css({'color': 'black'}); }, 300); }); }); </script> <style type="text/css"> </style></head><body> <span class="top_bar_content_items">You have <span class="cart_quantity">0</span> products in your cart</span> <input type="button" value="add to cart" id="CkHere" /> </body></html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.