Wednesday, May 13, 2009

Add Alerts to All Sites

I recently had a request from a client that would allow them to automatically display a Notification on all Sites and Pages.  This was easy enough to do because I was already stapling a custom page layout to the publishing infrastructure along with a custom Master Page and CSS.  The Master Page was altered to include a pointer to a hidealert.css file residing in a document library I had created on the root site.  The Page Layout was then altered to include an IFrame that loaded an HTML file called alert.htm sitting in the same document library on the root site.  When the editor renamed the file to something other than hidealert.css (recommended to rename it to showalert.css) the IFrame would appear with the alert.htm contents.  Below are the files, description and code:

Master Page - Load hidealert.css

Description: Custom Master Page that had one additional CSS file being loaded to easily turn the Alert visibility on or off.  This also enabled it to be done by a content editor with no IT involvement.

<link rel="stylesheet" type="text/css" href="/design/hidealert.css">

Page Layout

Description: Code to Load IFrame.  The code was placed above one of the web part zones so they would dynamically slide down if the IFrame loaded.

<iframe src="/design/alert.htm" class="alert" scrolling="no" frameborder="0">
<a href="/design/alert.htm">SharePoint Requires Internet Explorer 5.5 SP2 or higher.</a>


Description: CSS to Hide Alert IFrame When Not In Use



Description: HTML to Appear in IFrame (includes javascript to resize IFrame to match)


<script type="text/javascript">
        function resizeToFit(that){
                var objNode = (typeof(this.nodeName)=='undefined') ? that : this ;
                var objIframe = window.parent.document.getElementById('resizeToFit');
                var intScrollX, intScrollY, intWinWidth, intWinHeight, intMaxWidth, intMaxHeight;
                var intWhileCount = 0;
                    // scroll the document by 1 pixel
                    // measure the scroll position           
                    intScrollX = (document.all) ? document.body.scrollLeft : window.pageXOffset ;
                    intScrollY = (document.all) ? document.body.scrollTop : window.pageYOffset ;
                    // measure window size
                    intWinWidth = (document.all) ? document.body.offsetWidth : window.innerWidth ;
                    intWinHeight = (document.all) ? document.body.offsetHeight : window.innerHeight ;
                    // if the scroll position is not 0
                        // make the window larger
                        // make the iframe larger
                        if(objIframe!=null && !document.all) = ('') ? '64px' : (parseInt( + 32) + 'px';
                    // count the steps
                    intWhileCount += 1;
                }while((intScrollX>0 || intScrollY>0) && intWhileCount<900);
            function waitToFit()
            onload = waitToFit;

<body onload="resizeToFit();">
<!-- Make Change Below This Line -->

This is a test

<!-- Make Changes Above This Line -->

The content editor was given instructions to rename the CSS file from hidealert.css to showalert.css and add any custom HTML code between the <Make Changes> comment lines in the alert.htm.