My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
Customization  
Options SevenUp accepts.
Featured
Updated Feb 4, 2010 by howard.j...@gmail.com

Introduction

SevenUp accepts options for customization in its test() function, as well as a callback to your own code after it fires (so you can run arbitrary code when IE6- is detected, on top of showing the overlay). Note that not all plugins support all features. It is up to the plugin designer to include these options when creating the lightboxHTML.

The options are explained below, but here is a full 'options' hash with every variable set to their defaults, to use as a quick reference:

var options = {
  enableClosing: true,
  enableQuitBuggingMe: true,
  overlayColor: "#000000",  
  lightboxColor: "#ffffff",
  borderColor: "#6699ff",
  downloadLink: osSupportsUpgrade ? 
                "http://www.microsoft.com/windows/internet-explorer" :
                "http://getfirefox.com",
  overrideLightbox: false,
  lightboxHTML: null,
  showToAllBrowsers: false
};

var callback = function() {
  // Switch IE-specific content
  // AJAX call to map IP to 'IE6 user' status
  // etc.
}

sevenup.test(options, callback);

Details

enableClosing

By default, SevenUp allows the user to close the overlay window, for the "Support but Discourage" approach. But setting this to false disables that functionality, requiring IE7+.

enableQuitBuggingMe

By default, SevenUp also allows the user to stop it from showing for a week, for your loyal but stubborn users. Setting this to false disables that functionality, making it so users see the upgrade reminder every time they view a page with SevenUp enabled. It uses a cookie set to the domain "/" to remember users, so cookies must be enabled for this to work.

overlayColor

When using the default SevenUp skin, the background overlay is #000000 by default, but can be whatever you like. When customizing, make sure you include the # if you're using hex. Keep in mind it will be shown at 80% opacity.

lightboxColor

When using the default SevenUp skin, the lightbox is #ffffff by default, but can be whatever you like. This is effectively setting the 'background color' of the default skin's lightbox window.

lightboxBorder

When using the default SevenUp skin, the border color is #6699ff by default, but can be whatever you like.

downloadLink

By default, SevenUp checks the user's OS by looking at the browser's user-agent string. If their reported OS supports IE7+, its upgrade link goes to MSIE. If not, it recommends Firefox. If you want to customize which browser you recommend, but don't want to make your own skin, just set this option.

overrideLightbox

Commonly used by plugins, this option works in concert with lightboxHTML to override SevenUp's default lightbox with the HTML provided in lightboxHTML.

lightboxHTML

Commonly used by plugins. If overrideLightbox is set to true, SevenUp shows this HTML in place of its default.

showToAllBrowsers

Great for debugging - if true, SevenUp fires for all browsers. If false (the default) only IE6- gets the notice.

Comment by artr...@gmail.com, Jun 19, 2010

Uunfortunately this script doesn't work :(

<script type="text/javascript" src="Scripts/sevenup.0.3.min.js"></script> <script type="text/javascript" src="Scripts/sevenup_black.0.3.min.js"></script> </head> <body> <body onload="sevenUp.test( options, callback );">

no effect. I tried to paste this script in any place that I can.

Comment by janus.to...@gmail.com, Jul 14, 2010

You should replace "option" with an options object and perhaps supply a callback function, ie.

sevenUp.test({ showToAllBrowsers: true }, false);

Comment by benbras...@gmail.com, Aug 17, 2010

I just created a site that doesn't like IE7 much either. Is there an easy way to prompt IE7 users to upgrade as well?

Comment by nicholas...@gmail.com, Sep 9, 2010

@benbrasher

On line 114 of sevenup.0.3.js (the full file), just change the "lt" to "lte", as in

layerHTML = "<!--lte IE 7?>" + layerHTML + "<!endif?-->";

Comment by deviantf...@gmail.com, Oct 27, 2010

Hi I want this to work on all browsers that don't support @fontface (yes I know madness!) how should I set about this? I'm ok with HTML and CSS but fail badly at Javascript....

Comment by benbras...@gmail.com, Nov 15, 2010

Thank you @nicholas.l.piasecki

Woked like a champ!

Comment by petergal...@gmail.com, Dec 21, 2010

great great just super BUT i would like to show this to ALL IE users....fiddly around with the navigator.userAgent line but cant seem to get it....any advice here please? (by the way im using the excellent drupal module)

Comment by greatmed...@gmail.com, Dec 28, 2010

@peter On line 114 of sevenup.0.3.js (the full file), just change the "lt" to "lte", as in

layerHTML = "<!--if IE ?>" + layerHTML + "<!endif?-->"; should work

Comment by jamps...@gmail.com, Apr 20, 2011

Hello

I would like to add this to my site http://www.web-jam.co.uk/ as it is not IE friendly at all

so i have done as above : <script type="text/javascript" src="/scripts/sevenup.0.3.min.js"></script>

<script type="text/javascript" src="/scripts/sevenup_black.0.3.min.js"></script>

<body onLoad="sevenUp.plugin.black.test(options,callback);">

and i am getting a coding error in debugger

Uncaught ReferenceError?: options is not defined (anonymous function)http://www.web-jam.co.uk/:68 onload

I have checked other scripts and pulled them all out to make sure its not conflicting, however i get the same error

Please Help!!!

Comment by jonatas...@gmail.com, May 25, 2011

Hey there! It's possible to make a translation for brazilian portuguese and send it for you? thanks

Comment by JoshuaPi...@gmail.com, Sep 22, 2011

I'm getting the following error:

overlayCSS is not defined

I tried poking around the source but I'm not quite familiar with this new constructor style.

Is there a dependency perhaps?

Comment by ajkochan...@gmail.com, Feb 7, 2012

@jamps... Options is a variable you can define. So either write "var options = ''" or just remove options completely. You can do the same with callback.

@Joshua, I'm having the same issue.


Sign in to add a comment
Powered by Google Project Hosting