How to Make Simple Note using HTML JavaScript

Submitted by alpha_luna on Monday, July 25, 2016 - 11:32.
This simple note script was created using HTML and JavaScript. You can use it for broadcast special events or news in your site. You can easily be dismissed it, and users allow to specify the Frequency of its appearance, it's either once per session browser or every time the page loaded. Lastly, in any browser, you can drag the note where you want to place it.

Direction:

First, kindly copy this codes below into the HEAD section of your page.
  1. <style type="text/css">
  2. #post_the_note {
  3. position:absolute;
  4. width:523px;
  5. padding:5px;
  6. background-color:azure;
  7. border:2px solid blue;
  8. visibility:hidden;
  9. z-index:100;
  10. font-size:15px;
  11. font-family:cursive;
  12. }
  13. </style>
Second, insert this code below to your BODY section, better at the bottom of a page.
  1. <div id="post_the_note" style="left:100px;top:100px"><!---don't delete the style tag, for drag purposes-->
  2.         <div align="right">
  3.                 <b>
  4.                         <a href="javascript:closeit()"><img src="images/close.gif"></a>
  5.                 </b>
  6.         </div>
  7. <!---your content-->
  8.         <b style="font-size:18px; font-family:cursive;">Reminder:</b>
  9. <br />
  10.         <p>
  11.                 <a href="http://www.sourcecodester.com/" title="Sourcecodester" target="_new">
  12.                 Looking for free source code?
  13.                 </a>
  14. <br />
  15.                 Kindly visit this site, <a href="http://www.sourcecodester.com/" style="text-decoration:none;" title="Sourcecodester" target="_new">
  16.                                                                         <b style="color:#0000ff; font-size:18px; font-family:cursive;" title="Sourcecodester">Sourcecodester.com</b>
  17.                                                                 </a>
  18.         </p>
  19.  
  20.         <p>
  21.  
  22.                 <a href="http://www.sourcecodester.com/" title="Sourcecodester" target="_new">
  23.                 Do you have source code, articles, tutorials, web links, and books to share?
  24.                 </a>
  25. <br />
  26.                 What are you waiting for? <a href="http://www.sourcecodester.com/" style="text-decoration:none;" title="Sourcecodester" target="_new">
  27.                                                                                 <b style="color:#0000ff; font-size:18px; font-family:cursive;" title="Submit now!">Submit now!</b>
  28.                                                                   </a>
  29.         </p>
  30. <!---end your content-->
  31. </div>
This two script copy and paste below your markup in your page.
  1. <script type="text/javascript" language="JavaScript">
  2. //once per browser session to post?
  3. //(0=no, 1=yes)
  4. var once_per_browser=0
  5. var ns4=document.layers
  6. var ie4=document.all
  7. var ns6=document.getElementById&&!document.all
  8. if (ns4)
  9. crossobj=document.layers.post_the_note
  10. else if (ie4||ns6)
  11. crossobj=ns6? document.getElementById("post_the_note") : document.all.post_the_note
  12. //for closing
  13. function closeit(){
  14. if (ie4||ns6)
  15. crossobj.style.visibility="hidden"
  16. else if (ns4)
  17. crossobj.visibility="hide"
  18. }
  19. //the cookie name
  20. function get_cookie(Name) {
  21.   var search = Name + "="
  22.   var returnvalue = "";
  23.   if (document.cookie.length > 0) {
  24.     offset = document.cookie.indexOf(search)
  25.     if (offset != -1) { // if cookie exists
  26.       offset += search.length
  27.       // set index of beginning of value
  28.       end = document.cookie.indexOf(";", offset);
  29.       // set index of end of cookie value
  30.       if (end == -1)
  31.          end = document.cookie.length;
  32.       returnvalue=unescape(document.cookie.substring(offset, end))
  33.       }
  34.    }
  35.   return returnvalue;
  36. }
  37. function showornot(){
  38. if (get_cookie('postdisplay')==''){
  39. showit()
  40. document.cookie="postdisplay=yes"
  41. }
  42. }
  43. function showit(){
  44. if (ie4||ns6)
  45. crossobj.style.visibility="visible"
  46. else if (ns4)
  47. crossobj.visibility="show"
  48. }
  49. if (once_per_browser)
  50. showornot()
  51. else
  52. showit()
  53. </script>
  54.  
  55. <script type="text/javascript" language="JavaScript">
  56. // for the drag function
  57. function drag_drop(e){
  58. if (ie4&&dragapproved){
  59. crossobj.style.left=tempx+event.clientX-offsetx+'px'
  60. crossobj.style.top=tempy+event.clientY-offsety+'px'
  61. return false
  62. }
  63. else if (ns6&&dragapproved){
  64. crossobj.style.left=tempx+e.clientX-offsetx+'px'
  65. crossobj.style.top=tempy+e.clientY-offsety+'px'
  66. return false
  67. }
  68. }
  69. function initializedrag(e){
  70. if (ie4&&event.srcElement.id=="post_the_note"||ns6&&e.target.id=="post_the_note"){
  71. offsetx=ie4? event.clientX : e.clientX
  72. offsety=ie4? event.clientY : e.clientY
  73. tempx=parseInt(crossobj.style.left)
  74. tempy=parseInt(crossobj.style.top)
  75. dragapproved=true
  76. document.onmousemove=drag_drop
  77. }
  78. }
  79. document.onmousedown=initializedrag
  80. document.onmouseup=new Function("dragapproved=false")
  81. </script>

Image Sample Output

Result

The Complete Code

  1. <!DOCTYPE html>
  4. <title>Simple Note</title>
  5.  
  6. <style type="text/css">
  7. #post_the_note {
  8. position:absolute;
  9. width:523px;
  10. padding:5px;
  11. background-color:azure;
  12. border:2px solid blue;
  13. visibility:hidden;
  14. z-index:100;
  15. font-size:15px;
  16. font-family:cursive;
  17. }
  19.  
  20. </head>
  21.  
  23.  
  24. <div id="post_the_note" style="left:100px;top:100px"><!---don't delete the style tag, for drag purposes-->
  25.         <div align="right">
  26.                 <b>
  27.                         <a href="javascript:closeit()"><img src="images/close.gif"></a>
  28.                 </b>
  29.         </div>
  30. <!---your content-->
  31.         <b style="font-size:18px; font-family:cursive;">Reminder:</b>
  32. <br />
  33.         <p>
  34.                 <a href="http://www.sourcecodester.com/" title="Sourcecodester" target="_new">
  35.                 Looking for free source code?
  36.                 </a>
  37. <br />
  38.                 Kindly visit this site, <a href="http://www.sourcecodester.com/" style="text-decoration:none;" title="Sourcecodester" target="_new">
  39.                                                                         <b style="color:#0000ff; font-size:18px; font-family:cursive;" title="Sourcecodester">Sourcecodester.com</b>
  40.                                                                 </a>
  41.         </p>
  42.  
  43.         <p>
  44.  
  45.                 <a href="http://www.sourcecodester.com/" title="Sourcecodester" target="_new">
  46.                 Do you have source code, articles, tutorials, web links, and books to share?
  47.                 </a>
  48. <br />
  49.                 What are you waiting for? <a href="http://www.sourcecodester.com/" style="text-decoration:none;" title="Sourcecodester" target="_new">
  50.                                                                                 <b style="color:#0000ff; font-size:18px; font-family:cursive;" title="Submit now!">Submit now!</b>
  51.                                                                   </a>
  52.         </p>
  53. <!---end your content-->
  54. </div>
  55.  
  56. <script type="text/javascript" language="JavaScript">
  57. //once per browser session to post?
  58. //(0=no, 1=yes)
  59. var once_per_browser=0
  60. var ns4=document.layers
  61. var ie4=document.all
  62. var ns6=document.getElementById&&!document.all
  63. if (ns4)
  64. crossobj=document.layers.post_the_note
  65. else if (ie4||ns6)
  66. crossobj=ns6? document.getElementById("post_the_note") : document.all.post_the_note
  67. //for closing
  68. function closeit(){
  69. if (ie4||ns6)
  70. crossobj.style.visibility="hidden"
  71. else if (ns4)
  72. crossobj.visibility="hide"
  73. }
  74. //the cookie name
  75. function get_cookie(Name) {
  76.  var search = Name + "="
  77.  var returnvalue = "";
  78.   if (document.cookie.length > 0) {
  79.     offset = document.cookie.indexOf(search)
  80.     if (offset != -1) { // if cookie exists
  81.       offset += search.length
  82.       // set index of beginning of value
  83.       end = document.cookie.indexOf(";", offset);
  84.       // set index of end of cookie value
  85.       if (end == -1)
  86.          end = document.cookie.length;
  87.       returnvalue=unescape(document.cookie.substring(offset, end))
  88.       }
  89.    }
  90.   return returnvalue;
  91. }
  92. function showornot(){
  93. if (get_cookie('postdisplay')==''){
  94. showit()
  95. document.cookie="postdisplay=yes"
  96. }
  97. }
  98. function showit(){
  99. if (ie4||ns6)
  100. crossobj.style.visibility="visible"
  101. else if (ns4)
  102. crossobj.visibility="show"
  103. }
  104. if (once_per_browser)
  105. showornot()
  106. else
  107. showit()
  109.  
  110. <script type="text/javascript" language="JavaScript">
  111. // for the drag function
  112. function drag_drop(e){
  113. if (ie4&&dragapproved){
  114. crossobj.style.left=tempx+event.clientX-offsetx+'px'
  115. crossobj.style.top=tempy+event.clientY-offsety+'px'
  116. return false
  117. }
  118. else if (ns6&&dragapproved){
  119. crossobj.style.left=tempx+e.clientX-offsetx+'px'
  120. crossobj.style.top=tempy+e.clientY-offsety+'px'
  121. return false
  122. }
  123. }
  124. function initializedrag(e){
  125. if (ie4&&event.srcElement.id=="post_the_note"||ns6&&e.target.id=="post_the_note"){
  126. offsetx=ie4? event.clientX : e.clientX
  127. offsety=ie4? event.clientY : e.clientY
  128. tempx=parseInt(crossobj.style.left)
  129. tempy=parseInt(crossobj.style.top)
  130. dragapproved=true
  131. document.onmousemove=drag_drop
  132. }
  133. }
  134. document.onmousedown=initializedrag
  135. document.onmouseup=new Function("dragapproved=false")
  136. </script>
  137.  
  138. </body>
  139. </html>
Just download the source code and use it to your project. Hope this work will help you. Try it yourself and enjoy coding. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
note
HTML
css
html/css
Javascript

Add new comment

About text formats
  • 100 views