?
Solved

One Time Message or popup

Posted on 2010-09-24
6
Medium Priority
?
1,049 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Back Up Your Microsoft Windows Server®

Back up 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.

 
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 2000 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

Office 365 Training for IT Pros

Learn how to provision tenants, synchronize on-premise Active Directory, implement Single Sign-On, customize Office deployment, and protect your organization with eDiscovery and DLP policies.  Only from Platform Scholar.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

800 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