A "sticky note" on a web page
Solved
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
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
-
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 -
To help those who want to do it simply: www.mypostup.com.
Very easy to integrate. Effective. -
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 -
Hi,
thank you very much. I'll get on it as soon as I have a bit of time.
Catch you later
Mickey -
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 -
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. -
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 -
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
