Guest User

Untitled

a guest
Jun 24th, 2018
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.35 KB | None | 0 0
  1. <div id="div_drag">
  2. <div id="mydivheader">
  3. <a onclick="document.getElementById('div_name2').style.display='';return false;" href="">Menu</a>
  4.  
  5. <div id="div_name2">
  6.  
  7. <a href="firstyear.html">+2018</a>
  8. <br></br>
  9. <a href="secondyear.html">+2017</a>
  10. <br></br>
  11. <a href="thirdyear.html">+2016</a>
  12. <br></br>
  13. <a href="fourthyear.html">+2015</a>
  14. <br></br>
  15.  
  16. <a onclick="document.getElementById('div_name2').style.display='none';return false;" href=""
  17. >hide</a>
  18. </div>
  19. </div>
  20. </div>
  21.  
  22. <script>
  23. dragElement(document.getElementById(("div_drag")));
  24.  
  25. function dragElement(elmnt) {
  26. var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  27. if (document.getElementById(elmnt.id + "header")) {
  28. /* if present, the header is where you move the DIV from:*/
  29. document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  30. } else {
  31. /* otherwise, move the DIV from anywhere inside the DIV:*/
  32. elmnt.onmousedown = dragMouseDown;
  33. }
  34.  
  35. function dragMouseDown(e) {
  36. e = e || window.event;
  37. e.preventDefault();
  38. // get the mouse cursor position at startup:
  39. pos3 = e.clientX;
  40. pos4 = e.clientY;
  41. document.onmouseup = closeDragElement;
  42. // call a function whenever the cursor moves:
  43. document.onmousemove = elementDrag;
  44. }
  45.  
  46. function elementDrag(e) {
  47. e = e || window.event;
  48. e.preventDefault();
  49. // calculate the new cursor position:
  50. pos1 = pos3 - e.clientX;
  51. pos2 = pos4 - e.clientY;
  52. pos3 = e.clientX;
  53. pos4 = e.clientY;
  54. // set the element's new position:
  55. elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  56. elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  57. }
  58.  
  59. function closeDragElement() {
  60. /* stop moving when mouse button is released:*/
  61. document.onmouseup = null;
  62. document.onmousemove = null;
  63. }
  64. }
  65.  
  66. </script>
  67.  
  68. #div.drag {
  69. position: absolute;
  70. z-index: 9;
  71. background-color: #f1f1f1;
  72. text-align: center;
  73. border: 1px solid #d3d3d3;
  74. }
  75.  
  76. #mydivheader {
  77. padding: 10px;
  78. cursor: move;
  79. z-index: 10;
  80. background-color: #2196F3;
  81. color: #fff;
  82. }
Add Comment
Please, Sign In to add comment