Module: Sinatra::IE6NoMore

Defined in:
lib/sinatra/ie6nomore.rb

Overview

Sinatra::IE6NoMore Extension

A simple extension in support of the IE6 No More campaign to rid the world of the nasty bug ridden monstrosity called IE6.

Check the IE6 No More site for more information.

Install

sudo gem install kematzy-sinatra-ie6nomore

Usage

Three steps

Step 1

Require the Sinatra::IE6NoMore gem

require 'sinatra/base'

require 'sinatra/ie6nomore'

Step 2

Include in your app.

class MyApp < Sinatra::Application

  helpers Sinatra::IE6NoMore

  <snip...>

end

Step 3

Add this to your /views/layout.erb file.

<html>
  <body>

    <%= ie6nomore %>

  </body>
</html>

And in your HTML you’ll see an output like this:

<!--[if lt IE 7]>
<div style="border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;">
 <div style="position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;"><a href="#" onclick="javascript:this.parentNode.parentNode.style.display="none"; return false;"><img src="http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg" style="border: none;" alt="Close this notice"/></a></div>
  <div style="width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;">
   <div style="width: 75px; float: left;"><img src="http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg" alt="Warning!"/></div>
   <div style="width: 275px; float: left; font-family: Arial, sans-serif;">
   <div style="font-size: 14px; font-weight: bold; margin-top: 12px;">You are using an outdated browser</div>
   <div style="font-size: 12px; margin-top: 6px; line-height: 12px;">For a better experience using this site, please upgrade to a modern web browser.</div>
  </div>
  <div style="width: 75px; float: left;"><a href="http://getfirefox.com/" target="_blank"><img src="http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg" style="border: none;" alt="Get Firefox 3.5"/></a></div>
  <div style="width: 75px; float: left;"><a href="http://www.browserforthebetter.com/download.html" target="_blank"><img src="http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg" style="border: none;" alt="Get Internet Explorer 8"/></a></div>
  <div style="width: 73px; float: left;"><a href="http://www.apple.com/safari/download/" target="_blank"><img src="http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg" style="border: none;" alt="Get Safari 4"/></a></div>
  <div style="float: left;"><a href="http://www.google.com/chrome" target="_blank"><img src="http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg" style="border: none;" alt="Get Google Chrome"/></a></div>
 </div>
</div>
<![endif]-->

See documentation below for further usage examples.

Constant Summary collapse

VERSION = 
'0.1.0'

Class Method Summary collapse

Instance Method Summary collapse

Class Method Details

.version ⇒ Object 



81
 
# File 'lib/sinatra/ie6nomore.rb', line 81

def self.version; "Sinatra::IE6NoMore v#{VERSION}"; end

Instance Method Details

#ie6_no_more(options = {}) ⇒ Object

Outputs the “IE6 No More” banner.

Params

  • options [Hash] => Optional configurations options

    • :locale => Locale (Default = :en)

    • :img_host => The URL to the ie6nomore images (Default = www.ie6nomore.com/files/theme). NB! No trailing slash

    • :border => The div border color. (Default = “1px solid #F7941D”)

    • :background => The div background color. (Default = “#FEEFDA”)

    • :text_color => The div text color. (Default = “black”)

Examples

ie6_no_more(:locale => :es )   => Spanish version

ie6_no_more(:img_host => "http://www.example.com/images/ie6") => different image host

ie6_no_more(:border => "2px dashed green", :background => 'black', :text_color => 'white' ) 
  => different color scheme for text, border & background colors



105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
# File 'lib/sinatra/ie6nomore.rb', line 105

def ie6_no_more(options = {})
  o = {
    :locale => :en, 
    :img_host => "http://www.ie6nomore.com/files/theme", 
    :border => "1px solid #F7941D", 
    :background => "#FEEFDA", 
    :text_color => "black", 
  }.merge(options)
  
  localizations = load_i18n
  # set the localisation 
  i18n = localizations[o[:locale].to_s]
  
  html = %Q[<!--[if lt IE 7]>\n]
  html << %Q[<div style="border: #{o[:border]}; background: #{o[:background]}; text-align: center; clear: both; height: 75px; position: relative;">\n]
  html << %Q[ <div style="position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;"><a href="#" onclick="javascript:this.parentNode.parentNode.style.display="none"; return false;"><img src="#{o[:img_host]}/ie6nomore-cornerx.jpg" style="border: none;" alt="#{i18n['close']}"/></a></div>\n]
  html << %Q[  <div style="width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: #{o[:text_color]};">\n]
  html << %Q[   <div style="width: 75px; float: left;"><img src="#{o[:img_host]}/ie6nomore-warning.jpg" alt="Warning!"/></div>\n]
  html << %Q[   <div style="width: 275px; float: left; font-family: Arial, sans-serif;">\n]
  html << %Q[   <div style="font-size: 14px; font-weight: bold; margin-top: 12px;">#{i18n['header']}</div>\n]
  html << %Q[   <div style="font-size: 12px; margin-top: 6px; line-height: 12px;">#{i18n['sub']}</div>\n]
  html << %Q[  </div>\n]
  html << %Q[  <div style="width: 75px; float: left;"><a href="#{i18n['ff_url']}" target="_blank"><img src="#{o[:img_host]}/ie6nomore-firefox.jpg" style="border: none;" alt="#{i18n['get']} Firefox 3.5"/></a></div>\n]
  html << %Q[  <div style="width: 75px; float: left;"><a href="#{i18n['ie_url']}" target="_blank"><img src="#{o[:img_host]}/ie6nomore-ie8.jpg" style="border: none;" alt="#{i18n['get']} Internet Explorer 8"/></a></div>\n]
  html << %Q[  <div style="width: 73px; float: left;"><a href="#{i18n['safari_url']}" target="_blank"><img src="#{o[:img_host]}/ie6nomore-safari.jpg" style="border: none;" alt="#{i18n['get']} Safari 4"/></a></div>\n]
  html << %Q[  <div style="float: left;"><a href="#{i18n['chrome_url']}" target="_blank"><img src="#{o[:img_host]}/ie6nomore-chrome.jpg" style="border: none;" alt="#{i18n['get']} Google Chrome"/></a></div>\n]
  html << %Q[ </div>\n]
  html << %Q[</div>\n<![endif]-->\n]
  html
end