Hello everyone! I am learning PHP and doing assignment. I need a small JavaScript code require to include in my assignment. That is not require from the college but i want to make it a small beautiful. Actually i want a animated box which should be onclick. When i click on "Add to Cart" button after adding the item into cart a box should be show with fading animation just for few seconds and then disappear with fading animation. I have attached an gif animated image what the exact i want. Can anybody help me pleeeeeeease ?
<script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $('#buttonid').click(function(){ $('#myDivID').fadein(300).delay(800).fadeout(400); }); </script> PHP: should be easily understood by the coding.
Hi Dangy, thank you so much for your great help. Can you please favor me ? i have attached a file can you please look at the file and help me to complete the page ? Thanks in advance
<!DOCTYPE html> <html> <head> <style> div#showcart { width:430px; height:50px; background:#ffd2d3; border: solid 3px #df8f90; color:#c7242e; font-size:16px; font-weight:bold; text-align:center;line-height:50px;display:none; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <input type="submit" class="click" value="addtocart"> <div id="showcart">Product #128339 Was Just Added To Your Cart </div> <script> $('.click').click(function () { $("#showcart").fadeIn("slow").delay('800').fadeOut("slow"); }); </script> </body> </html> PHP:
Sir sorry for inconvenience, actually i have a little problem. You did your work perfectly as i requested but my mistake. After inserting your code in my assignment file , when i click on the "Add to Cart" button it shows instantly, i have a form action to addtocart.php in that file i am using redirect code header("Location: ".$_SERVER['HTTP_REFERER']); i want when page redirect back to the products page then the popup should show. I am sure you understand. Sorry if i am disturbing you. Thank you !
I am sorry it's not working, can you please let me know am i doing something wrong ? Thanks <!DOCTYPE html> <html> <head> <style> div#showcart { width:430px; height:50px; background:#ffd2d3; border: solid 3px #df8f90; color:#c7242e; font-size:16px; font-weight:bold; text-align:center;line-height:50px;display:none; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <form action="#" > <input type="submit" class="click" value="addtocart"> <div id="showcart">Product #128339 Was Just Added To Your Cart </div> <script> document.ready(function () { $("#showcart").fadeIn("slow").delay('800').fadeOut("slow"); }); </script> </form> </body> </html> Code (markup):