Advanced Search

Posted By

sales2u on 01/19/11

Tagged

Versions (?)

Last Edited at 01/19/11 04:27am

Statistics

Viewed 45 times
Favorited by 0 user(s)

Drowdown contentbox

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //IN HEAD
  2. <style type="text/css">
  3.  
  4. #dropinboxv2cover{
  5. width: 320px; /*change width to desired */
  6. height: 220px;  /*change height to desired. REMOVE if you wish box to be content's natural height */
  7. position:absolute; /*Don't change below 4 rules*/
  8. z-index: 100;
  9. overflow:hidden;
  10. visibility: hidden;
  11. }
  12.  
  13. #dropinboxv2{
  14. width: 300px; /*change width to above width-20. */
  15. height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
  16. border: 2px solid black; /*Customize box appearance*/
  17. background-color: lightyellow;
  18. padding: 4px;
  19. position:absolute; /*Don't change below 3 rules */
  20. left: 0;
  21. top: 0;
  22. }
  23.  
  24. </style>
  25.  
  26. <script type="text/javascript">
  27.  
  28. /***********************************************
  29. * Amazon style Drop-in content box- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  30. * Visit DynamicDrive.com for hundreds of DHTML scripts
  31. * This notice must stay intact for legal use
  32. * Go to http://www.dynamicdrive.com/ for full source code
  33. ***********************************************/
  34.  
  35. var dropboxleft=200 //set left position of box (in px)
  36. var dropboxtop=100 //set top position of box (in px)
  37. var dropspeed=15 //set speed of drop animation (larger=faster)
  38.  
  39. //Specify display mode. 3 possible values are:
  40. //1) "always"- This makes the fade-in box load each time the page is displayed
  41. //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
  42. //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
  43. // For example, 2 would display the box about (1/2) 50% of the time the page loads.
  44.  
  45. var displaymode="always"
  46.  
  47. ///Don't edit beyond here///////////
  48.  
  49. if (parseInt(displaymode)!=NaN)
  50. var random_num=Math.floor(Math.random()*displaymode)
  51. var ie=document.all
  52. var dom=document.getElementById
  53.  
  54. function initboxv2(){
  55. if (!dom&&!ie)
  56. return
  57. crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
  58. crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
  59. scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
  60. crossbox.height=crossbox.offsetHeight
  61. crossboxcover.style.height=parseInt(crossbox.height)+"px"
  62. crossbox.style.top=crossbox.height*(-1)+"px"
  63. crossboxcover.style.left=dropboxleft+"px"
  64. crossboxcover.style.top=dropboxtop+"px"
  65. crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
  66. dropstart=setInterval("dropinv2()",50)
  67. }
  68.  
  69. function dropinv2(){
  70. scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
  71. if (parseInt(crossbox.style.top)<0){
  72. crossboxcover.style.top=scroll_top+dropboxtop+"px"
  73. crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
  74. }
  75. else{
  76. clearInterval(dropstart)
  77. crossbox.style.top=0
  78. }
  79. }
  80.  
  81. function dismissboxv2(){
  82. if (window.dropstart) clearInterval(dropstart)
  83. crossboxcover.style.visibility="hidden"
  84. }
  85.  
  86. function truebody(){
  87. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  88. }
  89.  
  90. function get_cookie(Name) {
  91. var search = Name + "="
  92. var returnvalue = ""
  93. if (document.cookie.length > 0) {
  94. offset = document.cookie.indexOf(search)
  95. if (offset != -1) {
  96. offset += search.length
  97. end = document.cookie.indexOf(";", offset)
  98. if (end == -1)
  99. end = document.cookie.length;
  100. returnvalue=unescape(document.cookie.substring(offset, end))
  101. }
  102. }
  103. return returnvalue;
  104. }
  105.  
  106. if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
  107. if (window.addEventListener)
  108. window.addEventListener("load", initboxv2, false)
  109. else if (window.attachEvent)
  110. window.attachEvent("onload", initboxv2)
  111. else if (document.getElementById || document.all)
  112. window.onload=initboxv2
  113. if (displaymode=="oncepersession")
  114. document.cookie="droppedinv2=yes"
  115. }
  116.  
  117. </script>
  118.  
  119. //UNDER <body>
  120.  
  121. <div id="dropinboxv2cover">
  122. <div id="dropinboxv2">
  123. INSERT YOUR CONTENT HERE. DO NOT REMOVE THE TWO OUTER DIVS<br>
  124. <p align="right"><a href="#" onClick="dismissboxv2();return false">Close It</a></p>
  125. </div>
  126. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.