Module: Sinatra::IE6NoMore::Helpers

Defined in:

lib/sinatra/ie6nomore.rb

Instance Method Summary

• #ie6_no_more(options = {}) ⇒ Object

  Outputs the “IE6 No More” banner.

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 = /images/ie6nomore/). NB! The 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”)

  • :debug => Whether to encapsulate the code with the IE Comments or not. (Default = false)

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

To see how it looks like when developing on a NON-IE 6 browsers.

ie6_no_more(:debug => true)  => removes the encapsulating IE comments.

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

def ie6_no_more(options = {}) 
  o = {
    :locale => :en, 
    # :img_host => "http://www.ie6nomore.com/files/theme/", 
    :img_host => "/images/ie6nomore/", # NB! trailing slash 
    :border => "1px solid #F7941D", 
    :background => "#FEEFDA", 
    :text_color => "black", 
    :debug => false 
  }.merge(options)
  
  localizations = load_i18n
  # set the localisation 
  i18n = localizations[o[:locale].to_s]
  
  start_tag = o[:debug] ? "<!-- DEBUG [if lt IE 7] -->" :  "<!--[if lt IE 7]>"
  close_tag = o[:debug] ? "<!-- DEBUG [endif] -->" : "<![endif]-->"
  
  (<<-CODE).gsub(/^ {4}/, '')

  #{start_tag}
  <div id="ie6nomore" style="border: #{o[:border]}; background: #{o[:background]}; 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="#{o[:img_host]}ie6nomore-cornerx.jpg" style="border: none;" alt="#{i18n['close']}"/></a></div>
    <div style="width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: #{o[:text_color]};">
     <div style="width: 75px; float: left;"><img src="#{o[:img_host]}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;">#{i18n['header']}</div>
     <div style="font-size: 12px; margin-top: 6px; line-height: 12px;">#{i18n['sub']}</div>
    </div>
    <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>
    <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>
    <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>
    <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>
   </div>
  </div>
  #{close_tag}
  CODE
end