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. Link to comment https://forums.phpfreaks.com/topic/260136-highlighter-and-onclick/ 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> Link to comment https://forums.phpfreaks.com/topic/260136-highlighter-and-onclick/#findComment-1333291 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> Link to comment https://forums.phpfreaks.com/topic/260136-highlighter-and-onclick/#findComment-1333328 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.