[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1063
  • Last Modified:

One Time Message or popup

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
Jeremy Morel
Asked:
Jeremy Morel
  • 4
1 Solution
 
Justin MathewsCommented:
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
 
leakim971PluritechnicianCommented:
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
 
Justin MathewsCommented:
Cookie solution will not work if the user has cleared all cookies.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Jeremy MorelSenior ConsultantAuthor Commented:
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
 
Justin MathewsCommented:
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
 
Justin MathewsCommented:
Hello,

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

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now