Advanced Search

IE notification

/ Published in: jQuery
Save to your folder(s)
IE notification to upgrade your browser

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**
  2.  * HTML part
  3.  */
  4. <!--[if IE 7]>
  5.       <div id="ie-notification" class="hidden">
  6.         <div class="container">
  7.           <p><b>Your browser seems to be a bit out of date.</b> To view this website properly, please upgrade your browser.</p>
  8.           <a href="http://browsehappy.com/" class="button btn-primary" target="_blank">Upgrade</a> <a href="#" id="dismiss-ie-note">Don't show this again</a>
  9.         </div>
  10.       </div>
  11.     <![endif]-->
  12.  
  13. /**
  14.  * SCSS part
  15.  */
  16.  
  17. $ie-notification-height: 63px;
  18. $ie-notification-bg-color: #f8f3d0;
  19.  
  20. .ie7.oldie body {
  21.         padding-top: $header-height + $ie-notification-height;
  22.     }
  23. #ie-notification {
  24.     background: $ie-notification-bg-color;
  25.     color: $base-color;
  26.  
  27.     .container {
  28.         height: $ie-notification-height;
  29.         line-height: $ie-notification-height;
  30.  
  31.         p,
  32.         a {
  33.             margin-right: 20px;
  34.             @include inline-block;
  35.         }
  36.         #dismiss-ie-note {
  37.             background: sprite($sprite-notification, cancel, 0px, 23px) no-repeat;
  38.             padding: 0 0 0 25px;
  39.             font-weight: 700;
  40.             margin: 0;
  41.         }
  42.     }
  43. }
  44.  
  45.  
  46.  
  47. /**
  48.  * jQuery part -- on DOM ready event...
  49.  */
  50. $(function() {
  51.  
  52.     //DISMISS IE NOTIFICATION and SET COOKIE
  53.     if ( $.cookie('ie7note') != 1) {
  54.         $("#ie-notification").removeClass('hidden');
  55.     }
  56.     $("#dismiss-ie-note").click(function() {
  57.         $("#ie-notification").slideUp("slow"); //create effect
  58.         $("body").addClass("regular");
  59.         $.cookie('ie7note', 1);
  60.     });
  61. });

URL: https://twitter.com/#!/Razonline

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.