Scalable code and much refined to aletrs custom messages based on the errors returned from the server or even static way....JSON


/ Published in: JavaScript
Save to your folder(s)

It doesn't work directly make the url virtual and run it on any of the major links.....remove the images


Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Json</title>
  6. <style>
  7. html, body
  8. {
  9. margin: 0;
  10. padding: 0px;
  11. font-family: Arial, Helvetica, sans-serif;
  12. height: 100%;
  13. width: 100%;
  14. background: #99C8E8;
  15. }
  16.  
  17. h1
  18. {
  19. font-size: 24px;
  20. padding: 0;
  21. margin: 0 0 8px 0;
  22. }
  23.  
  24. #logo
  25. {
  26. width: 550px;
  27. margin: 50px auto 20px auto;
  28. text-align: center;
  29. padding-left: 112px;
  30. }
  31.  
  32. #ErrorMessage
  33. {
  34. width: 100%;
  35. min-width: 650px;
  36. height: 100%;
  37. }
  38.  
  39. #ErrorMessageContent
  40. {
  41.  
  42. width: 550px;
  43. margin: 0 auto;
  44. font-size: 22px;
  45. border: #FFF 1px solid;
  46. color: #FFF;
  47. padding: 30px 50px 30px 50px;
  48. }
  49.  
  50. #ErrorMessage h1
  51. {
  52. text-align: center;
  53. }
  54. .spanner
  55. {
  56. border:1px;
  57. display:block;
  58. background:#9CCBEF;
  59. padding:10px;
  60. }
  61. .hmessage
  62. {
  63. color:#424542;
  64. font-size:18px;
  65. font-weight:bold;
  66. text-align:left;
  67. padding-right:300px;
  68. }
  69. .message_box
  70. {
  71. border:1px solid;
  72. padding:8px;
  73. }
  74. .pmessage
  75. {
  76. text-align:left;
  77. color:#717171;
  78. font-size:16px;
  79. }
  80. #ErrorMessage p
  81. {
  82. padding: 0;
  83. margin: 0;
  84. line-height: 18px;
  85. font-size:12px;
  86. text-align: left;
  87. padding-top:5px;
  88. }
  89.  
  90. #ErrorMessage p a, #ErrorMessage p a:link
  91. {
  92. display: block;
  93. color: #c5dae8;
  94. text-decoration: none;
  95. }
  96.  
  97. #ErrorMessage p a:hover
  98. {
  99. color: #99C8E8;
  100. }
  101. </style>
  102. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
  103. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  104.  
  105.  
  106. </head>
  107. <body>
  108. <div id="logo">
  109. <img src="images/yourimg.png" border="0" />
  110. </div>
  111. <div id="ErrorMessage">
  112. <div id="ErrorMessageContent">
  113. <div class="message_box">
  114. <div class="spanner">
  115. <font class="hmessage">Welcome to the site</font>
  116.  
  117. <p class="pmessage">
  118. We are currently performing planned maintenance.</p>
  119. <p>
  120. &nbsp;</p>
  121. </div>
  122. </div>
  123.  
  124. </div>
  125. </div>
  126. </body>
  127. </html>
  128. <script type="text/javascript">
  129.  
  130.  
  131. var errorSettings = {
  132.  
  133. getURLParameter: function (name) {
  134.  
  135. var str = decodeURIComponent((RegExp('[?|&]' + name + '=' + '(.+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
  136. return str;
  137. },
  138.  
  139. errorcode: function () { return errorSettings.getURLParameter("errorReason") },
  140.  
  141. language: function () { return errorSettings.getURLParameter("lang") },
  142.  
  143. hmessageDivId: {
  144. "0": "Access Denied",
  145. "1": "Access Denied",
  146. "2": "Access Denied",
  147. "3": "Access Denied",
  148. "4": "Access Denied",
  149. "5": "Access Denied",
  150. "6": "Access Denied",
  151. "7": "Access Denied",
  152. "8": "Access Denied",
  153. "9": "Access Denied"
  154. },
  155.  
  156. messages: {
  157. "0": "Your user permissions do not authorize you to access this page.",
  158. "1": "The user name and password combination you entered does not correspond to a registered user.",
  159. "2": "The password you have entered is invalid.",
  160. "3": "Your account has been locked. Please contact your System Administrator.",
  161. "4": "Your account has been deleted. For further details, please contact your System Administrator.",
  162. "5": "Your account has expired. Please contact your System Administrator.",
  163. "6": "Invalid assertion.",
  164. "7": "Please provide a user name and a password.",
  165. "8": "You cannot access this product since you belong to no group. Please contact your System Administrator.",
  166. "9": "Invalid answer to secret question.",
  167. "10": "Your account has been deactivated. Please contact your System Administrator to reactivate it.",
  168. "11": "Your password is expired"
  169. },
  170.  
  171. errorDivId: ".pmessage",
  172.  
  173. hmessid: ".hmessage"
  174. };
  175.  
  176.  
  177. $(document).ready(function (e) {
  178.  
  179. if (errorSettings.errorcode() != null) {
  180. // alert(errorSettings.messages[errorSettings.errorcode] + " :: " + errorSettings.language);
  181. $(errorSettings.hmessid).html( errorSettings.hmessageDivId[errorSettings.errorcode()] )
  182. $(errorSettings.errorDivId).html('<p><font class="sublabel">' + errorSettings.messages[errorSettings.errorcode()] + '</font></p>')
  183.  
  184. }
  185.  
  186. });
  187.  
  188. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.