Sometimes you need to go back to basics and use the .alert() function is jQuery to see what the hell a variable is or check if your JavaScript is actually working at all?! ... Also known as a jQuery command box or system popup window that contains text information displayed to the user.
jqueryCode :
jqueryCode :
<!doctype html> <html lang="en"> <head> <script src='http://code.jquery.com/jquery-latest.min.js'></script> <style> #tip.error { background: #FF4136; color: #fff; } .error a { color: #fff; text-shadow: none; } #tip { z-index: 100; display: none; border-top: 1px solid #ccc; position: absolute; bottom: 0; font-size: 14px; line-height: 22px; background: #fdfece; left: 0; right: 0; padding: 2px 10px 2px 10px; -webkit-animation: tip-flash 100ms linear 4 alternate; -moz-animation: tip-flash 100ms linear 4 alternate; -ms-animation: tip-flash 100ms linear 4 alternate; -o-animation: tip-flash 100ms linear 4 alternate; animation: tip-flash 100ms linear 4 alternate; -webkit-transition: bottom 100ms linear; transition: bottom 100ms linear; } #tip.notification, #tip.error { bottom: auto; top: 34px; line-height: 28px; box-shadow: 0 2px 4px rgba(0,0,0,.2); } #tip p { margin: 5px 25px 5px 0; padding: 0 65px 0 0; line-height: 1.3; } #tip a.dismiss { line-height: 28px; position: absolute; right: 20px; top: 2px; text-decoration: none; text-shadow: none; } </style> </head> <body> <div id="tip"> <p> <label> <input type="checkbox" class="enablealt"> <strong>Turn this off</strong> . Reserve ctrl+[n] for switching browser tabs and use ctrl+<u>alt</u>+[n] to switch JS Bin panels. You can access this any time in <strong>Help→Keyboard</strong> </label> </p> <a class="dismiss" href="#">Dismiss x</a> </div> <input type="submit" value="save" onclick="onSaveError();"/> <input type="submit" value="delete" onclick="onDelete();"/> <script> function onSaveError() { $("#tip").removeClass("error"); $("#tip").addClass('notification'); $("#tip p").html("Sorry this bin is too large for us to save"); $("#tip").css({ display: "block" }); }; $("#tip").on("click", ".dismiss", function() { $("#tip").css({ display: "none" }); }); function onDelete(){ $("#tip p").html("this file is deleted"); $("#tip").removeClass("notification"); $("#tip").addClass('error'); $("#tip").css({ display: "block" }); } </script> </body> </html>