Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

One Time Message or popup

Posted on 2010-09-24
6
Medium Priority
?
1,055 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:Justin Mathews
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:Justin Mathews
ID: 33754529
Cookie solution will not work if the user has cleared all cookies.
0
Veeam Disaster Recovery in Microsoft Azure

Veeam PN for Microsoft Azure is a FREE solution designed to simplify and automate the setup of a DR site in Microsoft Azure using lightweight software-defined networking. It reduces the complexity of VPN deployments and is designed for businesses of ALL sizes.

 
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:
Justin Mathews 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:Justin Mathews
ID: 33891251
Hello,

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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

610 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