Solved

One Time Message or popup

Posted on 2010-09-24
6
993 Views
Last Modified: 2012-05-10
Hello Experts,

I'm looking for suggestions/ideas.  We are standing up a new MOSS '07 portal at our academic institution.  We want to inform first time visitors of a few tasks they need to complete, but then not keep reminding them on subsequent visits.

We tried using a Content Editor Web Part, but in our usbility testing it went largely unnoticed.  We are mostly concerned with it being visible.  An Ajax modal popup sounded good, but I don't even know where to begin with that.  I looked at the documentation and a few posts on forums and it looks to be needlessly complicated.

My last try was a CEWP with a javascript alert, but that is less than ideal.  In all of these solutions, there is no 'expiration' feature to stop alerting the user after the first time (or two or three)...  While we need to communicate the message we don't want to annoy our users into never coming back.

There must be others that are doing this...  Would you share your thoughts?  
0
Comment
Question by:Jeremy Morel
  • 4
6 Comments
 
LVL 16

Expert Comment

by:jmatix
ID: 33754365
If the user has already logged in before accessing the page, you can use a database column to identify if the popup has ever been displayed to that particular user.

If the popup has never been shown to the user as indicated by the db column, then display the popup as a DHTML/JavaScript popup.

Let me know if you want a sample popup.


0
 
LVL 82

Expert Comment

by:leakim971
ID: 33754427
You need to check for a cookie each time. If the cookie is not set set it and display the message. if the cookie exist don't display the message.
To play with cookie : http://www.w3schools.com/JS/js_cookies.asp

Additonaly check this thread : http://raiumair.wordpress.com/2007/04/10/a-wss-30-disclaimer-content-editor-web-part/
0
 
LVL 16

Expert Comment

by:jmatix
ID: 33754529
Cookie solution will not work if the user has cleared all cookies.
0
Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

 
LVL 1

Author Comment

by:Jeremy Morel
ID: 33769116
Hello again,

Yes I should have mentioned cookies and the fact that I've tried them --  yes I'm weary of someone clearing their browser.  

Jmatix, I'm very interested in your idea, but I'm still finding my footing.  Do you have any resources that explain the database column / logging practice?  Yes, a sample would be very helpful.  Thank you!
0
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 33771193
Assuming you have a Database backend and have a USER table for storing user profiles, add a flag column to the user table, say,  POPUP_DISPLAYED which is initially set to false or 'N' when a user profile is created. Subsequently when the user logs in to your portal, check this flag in the table. If it is false or 'N' add DHTML code to display the popup message on the home page. See sample code below. When the user clicks 'OK' on the popup either do a form submit or open an AJAX connection to the server to set the POPUP_DISPLAYED flag in the table to true or 'Y'.

<html>
<head>

<style type="text/css">

      .popup {
        border: solid 1px #333;
        font-family: Tahoma;
        font-size: 12px;
        display: none;
        position: absolute;
        z-index: 60;
      }

      .popuptitle {
        background: blue;
        color: white;
        font-weight: bold;
        height: 15px;
        padding: 5px;
      }
     
      .popupbody {
        background: #ddd;
        padding: 5px;
        text-align: center;
      }

      #popup1 { top: 100px; left: 50px; }

      #popup2 { top: 100px; left: 400px; }

    </style>

    </SCRIPT>    
   
    <script type="text/javascript">

      var fadeOpacity  = new Array();
      var fadeTimer    = new Array();
      var fadeInterval = 100;  // milliseconds
            var initHeight = 40;
            var initWidth = 60;
            var fullHeight = 600;
            var fullWidth = 900;

      function fade(o,d)
      {
     
        // o - Object to fade in or out.
        // d - Display, true =  fade in, false = fade out
     
        var obj = document.getElementById(o);
     
        if((fadeTimer[o])||(d&&obj.style.display!='block')||(!d&&obj.style.display=='block'))
        {
     
              if(fadeTimer[o])
            clearInterval(fadeTimer[o]);
          else
            if(d) fadeOpacity[o] = 0;
            else  fadeOpacity[o] = 9;
       
          obj.style.opacity = "."+fadeOpacity[o].toString();
          obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";
         
          if(d)
          {
            obj.style.display = 'block';
            fadeTimer[o] = setInterval('fadeAnimation("'+o+'",1);',fadeInterval);
          }
          else
            fadeTimer[o] = setInterval('fadeAnimation("'+o+'",-1);',fadeInterval);
        }
      }

      function fadeAnimation(o,i)
      {

        // o - o - Object to fade in or out.
        // i - increment, 1 = Fade In

        var obj = document.getElementById(o);
        fadeOpacity[o] += i;
        obj.style.opacity = "."+fadeOpacity[o].toString();
        obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";
            var stepNum = fadeOpacity[o];
              var w = Math.floor((fullWidth-initWidth)/10 * stepNum);
              var h = Math.floor((fullHeight-initHeight)/10 * stepNum);
              if (w > fullWidth)
                  w = fullWidth;
              if (w < initWidth)
                  w = 0;
              if (h > fullHeight)
                  h = fullHeight;
              if (h < initHeight)
                  h = 0;

              obj.style.width =  w + "px";
              obj.style.height =  h + "px";

        if((fadeOpacity[o]=='9')||(fadeOpacity[o]=='0'))
        {
          if(fadeOpacity[o]=='0')
            obj.style.display = 'none';
          else
          {
            obj.style.opacity = "1";
            obj.style.filter  = "alpha(opacity=100)";
          }
     
          clearInterval(fadeTimer[o]);
          delete(fadeTimer[o]);
          delete(fadeTimer[o]);
          delete(fadeOpacity[o]);
     
        }  
      }

    </script>


    </head>
  <body onload="fade('popup1',true);">


      <div id="popup1" class="popup">
      <div class="popuptitle">Important Message</div>
      <div class="popupbody">
        <p>Hi User,<br>Welcome to our portal. Please take some time to read the user guide....
            </p>  
        <input type="button" value="OK" onClick="fade('popup1',false);"/>
      </div>
    </div>


  </body>

</html>
0
 
LVL 16

Expert Comment

by:jmatix
ID: 33891251
Hello,

Is this problem resolved? Or are you still looking for a solution?
0

Featured Post

Backup Your Microsoft Windows Server®

Backup all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now