Posted By

raz on 05/25/12


Tagged

css ie jquery SASS


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

BrockSamsom


IE notification


 / Published in: jQuery
 

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

IE notification to upgrade your browser

  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. });

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: raz on May 25, 2012

Required https://github.com/carhartl/jquery-cookie

You need to login to post a comment.