{"id":2117,"date":"2018-07-09T13:18:58","date_gmt":"2018-07-09T18:18:58","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2117"},"modified":"2018-07-09T13:18:58","modified_gmt":"2018-07-09T18:18:58","slug":"jquery-create-animated-alert-box","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/07\/09\/jquery-create-animated-alert-box\/","title":{"rendered":"jQuery: How to create an animated alert box"},"content":{"rendered":"

Let’s say you’ve made a login form and you want to display a placard whenever the login information is incorrect to alert the user. For example, when the user types an incorrect email address or password, they see the placard above the form, with a white background and red text:<\/p>\n

\"\"<\/p>\n

This is easy enough to accomplish with CSS and a little bit of JavaScript. However, let’s say we want to animate the placard so that every time it appears on the screen, it flips to the right, as if laying a card down to the right. This can be accomplished with some jQuery. For example:<\/p>\n

var card = document.querySelector(\"#errorMessage\");\r\nvar container = document.querySelector('.flip-container');\r\nvar isOpen = false;\r\n\r\nfunction showCard() {\r\n  if (!isOpen) {\r\n    container.style.visibility = \"visible\";\r\n    card.classList.add(\"flip\");\r\n    \/\/ document.querySelector(\".flipper\").classList.toggle(\"flip\");\r\n    isOpen = true;\r\n    console.log(\"isOpen1\", isOpen)\r\n  } else  { \r\n    card.classList.toggle(\"flip\");\r\n    isOpen = false;\r\n    console.log(\"isOpen2\", isOpen)\r\n    clickAgain();\r\n  }\r\n}\r\n\r\nfunction clickAgain(){\r\n  setTimeout(function() {\r\n    $(document).ready(function(){\r\n      $(\"#b1\").click()\r\n    });\r\n  }, 350);\r\n}<\/pre>\n
Here is the HTML:<\/p>\n
<h1>Click the button below to see the <br>animated alert.<\/h1>\r\n<div class=\"flip-container\" id=\"errorMessage\" >\r\n  <div class=\"flipper\">\r\n   <!-- text here will rotate --> \r\n      <div class=\"front\">\r\n         <!-- front content --> \r\n         <div class=\"error-box\">\r\n            Email address or password <BR>\r\n            not found. <BR>\r\n            Please Try Again.\r\n         <\/div>      \r\n      <\/div>\r\n      <div class=\"back\">\r\n\t<!-- back content -->\r\n      <\/div>\r\n   <\/div>      \r\n<\/div>\r\n<input type=\"button\" id=\"b1\" value=\"Show card\" onClick=\"showCard();\"><\/pre>\n
And here is the CSS used for styling:<\/p>\n
body {\r\n  background: #575955;\r\n  color: white;\r\n}\r\n.error-box {\r\n  width: 380px;\r\n  height: 110px;\r\n  background: #fff;\r\n  border: solid 1px #B71C1C;\r\n  border-radius: 9px;\r\n  font-family: 'Raleway', sans-serif;\r\n  font-size: 1.6rem;\r\n  color: #B71C1C;\r\n  text-align: center;\r\n  padding: 30px;\r\n}\r\n\r\n\/* Hide the flip container to start *\/\r\n.flip-container {\r\n  perspective: 1000px;\r\n\u00a0\u00a0visibility: hidden;\r\n}\r\n.flip-container.flip .flipper {\r\n  transform: rotateY(90deg);\r\n  transition: 0.35s;\r\n}\r\n\r\n.flip-container, .front, .back {\r\n  width: 320px;\r\n  height: 200px;\r\n}\r\n\r\n\/* flip speed goes here *\/\r\n.flipper {\r\n  transition: 0s;\r\n  transform-style: preserve-3d;\r\n  position: relative;\r\n}\r\n\r\n\/* hide back of pane during swap *\/\r\n.front, .back {\r\n  backface-visibility: hidden;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n}\r\n\r\n\/* front pane, placed above back *\/\r\n.front {\r\n  z-index: 2;\r\n  \/* for firefox 31 *\/\r\n  transform: rotateY(-90deg);\r\n}\r\n\r\n\/* back, initially hidden pane *\/\r\n.back {\r\n  transform: rotateY(90deg);\r\n}<\/pre>\n
 <\/p>\n
The CSS for this technique is even more important than the jQuery. It uitlizes some rare features such as:<\/p>\n