Solved

One Time Message or popup

Posted on 2010-09-24
6
981 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

707 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

10 Experts available now in Live!

Get 1:1 Help Now