Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 13:58
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mreidsma/9981942 to your computer and use it in GitHub Desktop.
Add a preview banner to Summon 1.0 to let folks try Summon 2.0.

Summon 2.0 Preview Banner

I wanted a way to add a banner to our Summon 1.0 site to give folks a heads-up that we will be switching to the 2.0 interface soon. But mostly I want folks to have a chance to play with the new search. I wrote a simple banner that is injected with JavaScript on page load that includes a close button. If a patron clicks the close button, the script will set a cookie called "noPreview" that will prevent the preview banner from showing up for 7 days.

What the script does

This is probably the last script I'll write for Summon 1.0. That makes me kind of sad.

The cookie functions are verbetim from the master, ppk:

function createCookie(name,value,days) {
if (days) {
var date = new Date();
var expires = "; expires="+date.toGMTString();
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
return null;
if(readCookie('noPreview') !== 'prevent') {
var newBanner = '<style> .gvsu-button, .gvsu-button-grey { padding: .333em .75em; font-size: 1.1em; line-height: 1.3125em; -webkit-border-radius: .25em; -moz-border-radius: .25em; border-radius: .25em; display: inline-block; font-weight: bold; text-decoration: none; cursor: pointer; margin-top: .825em; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } .gvsu-button { color: #fff; background: #20559a; border: 1px solid #4081af; border-bottom-color: #20559a; } a.gvsu-button:hover { color: #fff !important; } .gvsu-button-grey { color: #444; background: #eee; border: 1px solid #aaa; border-top: 1px solid #ccc; border-left: 1px solid #ccc;} a.gvsu-button-grey:hover { color: #333 !important; } #new-results { display: block; line-height: 1.5em; margin: 0; padding: .5em 1.6em; background: #7fc1ff; border: 1px solid #6694cc; text-align: left; color: #444; position: relative; } #new-results p { font-size: 1.4em; font-weight: bold; width: 55%; float: left; } #new-results ul { list-style-type: none; } #new-results ul li { width: 12em; float: left; margin-left: 2em; } .gvsu-close { cursor: pointer; position: absolute; top: .25em; right: .25em; text-indent: -9999px; background: transparent url(// top left no-repeat; height: 20px; width: 20px; } </style> <div id="new-results"> <p>We&#8217;re working to make library research even easier.</p> <ul> <li><a href="" class="gvsu-button">Try the new search</a></li> <li><a href="" class="gvsu-button-grey FeedbackLink">Give Feedback</a></li> </ul> <div style="clear: both;"></div> <div class="gvsu-close" id="gvsu-close-button" onclick="createCookie(\'noPreview\',\'prevent\',7)">[x] Close</div> </div>';
Copy link

mreidsma commented Apr 4, 2014

If you are in the civilized world, you'll need to have some sort of How We Use Cookies notice if you use this script.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment