A "sticky note" on a web page

Solved
Mickey7 Posted messages 56 Status Member -  
 CIDM -
Hello,

I would like to place a "post-it" (or an image similar to a post-it) in the foreground on one of my web pages.
This page is a form, and I would like to inform users that I cannot respond at the moment.

Is it possible? And if so, how should I do it?

P.S.: the page is http://ww5.hippogeriatrie.be

Thank you

Mickey
Configuration: Windows XP Firefox 2.0.0.11

8 answers

  1. Christounet Posted messages 1272 Registration date   Status Member Last intervention   1 393
     
    Bonjour Mickey7,

    Here is the complete code example of an HTML page that just displays the post-it. In fact, I copied/pasted the lines of code from the link of my previous response in the right place, you just have to copy/paste in the right place:

    <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Page</title> <script Language="Javascript"> <!-- /* Displays a post-it on the page Improved by the WEB Creation site: - 20030801: is now compatible with Netscape 6+ and Mozilla 1+ - 20030801: code improvement and addition of a post-it table allowing random post-it generation Other scripts ? >> http://www.web-creation-fr.com */ // You can enter multiple post-its to display them randomly // If you only want to display one, just keep Postit[0] Postit=new Array(); Postit[0]="<b>Post-it n°1 :</b><BR><BR>Isn't it a <br>nice way to indicate<br>news to your<br> visitors ?"; Postit[1]="<b>Post-it n°2 :</b><BR><BR>Isn't it a <br>nice way to indicate<br>news to your<br> visitors ?"; Postit[2]="<b>Post-it n°3 :</b><BR><BR>Isn't it a <br>nice way to indicate<br>news to your<br> visitors ?"; Postit[3]="<b>Post-it n°4 :</b><BR><BR>Isn't it a <br>nice way to indicate<br>news to your<br> visitors ?"; Postit[4]="<b>Post-it n°5 :</b><BR><BR>Isn't it a <br>nice way to indicate<br>news to your<br> visitors ?"; // Randomly choose the post-it to display function RandomPostit() { if (Postit.length>0) { nombre=(Math.floor((Postit.length)*Math.random())); return Postit[nombre]; } else { return Postit[0]; } } function AfficherPostit(xo,yo,texte) { // If the browser is not IE (it must comply with the latest HTML standards to display the post-it) if (!document.all){ // Define the layer in a variable for convenience calque=document.getElementById('postit'); // If the xo coordinate of the post-it is -1, then center it horizontally if (xo==-1){xo=(window.innerWidth/2)-120;} // If the yo coordinate of the post-it is -1, then center it vertically if (yo==-1){yo=(window.innerHeight/2)-120;} // Apply the position to the layer calque.style.left=xo; calque.style.top=yo; // Insert the content of the post-it document.getElementById('contenu').innerHTML="<font color=#000000 size=2 face=verdana>"+texte+"</font>"; // And finally display the layer calque.style.visibility="visible"; } else { // If the browser is IE // Same as above for the rest if (xo==-1){xo=(document.body.clientWidth/2)-120;} if (yo==-1){yo=(document.body.clientHeight/2)-120;} document.all.postit.style.left=xo; document.all.postit.style.top=yo; document.all.contenu.innerHTML='<font color=#000000 size=2 face=verdana>'+texte+'</font>'; document.all.postit.style.visibility="visible"; } } function FermerPostit() { if (!document.all) { calque=document.getElementById('postit'); calque.innerHTML=""; calque.style.visibility="hidden"; } else { postit.innerHTML=""; document.all.postit.style.visibility="hidden"; } } //--> </script> </head> <body onload="AfficherPostit(-1,-1,RandomPostit())"> <div id="postit" style="position:absolute;left:-240px;top:0px;width:240px;height:240px;visibility:hidden" > <table border=0 cellpadding=0 width=240 height=240 background="../33_postit.gif"> <tr> <td align=center valign=middle> <div id="contenu"></div> </td> </tr> </table> <div id="close" style="position:relative;top:-230;left:100;width:21;height:21;"> <a href="javascript:FermerPostit()"> <img src="../33_punaise.gif" border=0 width="16" height="21"></a> </div> </div> </body>


    You just need to change the location of the images 33_postit.gif and 33_punaise.gif

    See you later
    2
    1. chrisdrud
       
      Hello,

      What values should be modified to center the pin at the top of the post-it?
      I have tried different values, but it doesn't work.

      Thanks in advance.
      0
  2. CIDM
     
    To help those who want to do it simply: www.mypostup.com.

    Very easy to integrate. Effective.
    1
  3. Christounet Posted messages 1272 Registration date   Status Member Last intervention   1 393
     
    Hello,

    By following the link below, you will find a solution to add a post-it on your page, using CSS and HTML code:

    Post-it on web page

    See you later
    0
  4. Mickey7 Posted messages 56 Status Member 1
     
    Hi,

    thank you very much. I'll get on it as soon as I have a bit of time.

    Catch you later
    Mickey
    0
  5. Mickey7 Posted messages 56 Status Member 1
     
    Hello,

    Well... :o(

    I tried but I couldn't make it. CSS is too complicated. Also, I’m working with FrontPage 2000 (so the latest features are not great). More and more... ;o) I'm not really an expert in this field => relatively simple things are a big advantage for me.

    If you have any solutions?!

    See you,
    Mickey
    0
  6. Christounet Posted messages 1272 Registration date   Status Member Last intervention   1 393
     
    Hello,

    I found another example that uses a script and HTML code, no CSS.

    Just copy/paste the lines from the site into Frontpage following the instructions step by step:

    Post-It

    See you later.
    -1
  7. Mickey7 Posted messages 56 Status Member 1
     
    I'm really not good at this :o((((((((((((
    the only image that comes up is: onload="AfficherPostit(-1,-1,RandomPostit())"

    I think it's because I can't tell the difference between:
    "Insert the code below into the <BODY> tag of your HTML page"

    and

    "Insert the code below between the <BODY> and </BODY> tags of your HTML page"

    It's not that I'm getting discouraged, but I'm running out of time more and more => I think I'm going to give up.

    In any case, a very big thank you for your advice.

    See you later (when I have a bit more time ;o)

    Mickey
    -1
  8. Mickey7 Posted messages 56 Status Member 1
     
    Hello,

    Well... THANK YOU.
    It only took me a few minutes and IT WORKS.

    I have to say that I have received several requests via my form (since I can only deal with this issue reasonably for the moment, it's wasted time for the internet users and my credibility is fading away).

    Once again (I'm not Belgian for nothing ;o) THANK YOU.

    See you later
    Mickey
    http://ww5.hippogeriatrie.be
    0
    1. Christounet Posted messages 1272 Registration date   Status Member Last intervention   1 393
       
      Hello Mickey7,

      Your site is great, I especially appreciate the little banner at the top left for Belgium.

      See you soon

      PS: I am Belgian too and proud to be one.
      0