Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 2nd, 2012  |  syntax: None  |  size: 3.65 KB  |  hits: 26  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. show/hide border around containing div? Javascript
  2. function setColor()   {    
  3. var color = document.getElementById("color").value;    
  4. document.getElementById("myDiv").style.color = color;  
  5. }
  6. function border(border) {
  7. document.getElementById("myDiv").style.border = border;
  8. }
  9.        
  10. #myDiv  {
  11. position:relative;
  12. width:100px;
  13. height:100px;
  14. float:left;
  15. overflow:hidden;
  16. border:1px solid #f1f1f1;
  17. text-align:center;
  18. }
  19.  
  20. #lineOne    {
  21. position:relative;
  22. padding:5px;
  23. }
  24.  
  25. #lineTwo    {
  26. position:relative;
  27. padding:5px;
  28. }
  29.  
  30. #lineThree  {
  31. position:relative;
  32. padding:5px;
  33. }
  34.  
  35. #lineFour   {
  36. position:relative;
  37. padding:5px;
  38. }
  39.        
  40. Colour:
  41.     <select id="color" onclick="setColor();">
  42.         <option value="white">white</option>          
  43.         <option value="black" selected="selected">black</option>          
  44.         <option value="red">red</option>          
  45.         <option value="lightblue">light blue</option>          
  46.         <option value="darkblue">dark blue</option>          
  47.         <option value="lightgreen">light green</option>          
  48.         <option value="darkgreen">dark green</option>          
  49.         <option value="yellow">yellow</option>          
  50.         <option value="orange">orange</option>          
  51.         <option value="pink">pink</option>          
  52.         <option value="purple">purple</option>          
  53.         <option value="gray">gray</option>        
  54.     </select>
  55.  
  56.     <select id="border"  onchange="border(this.value);">
  57.         <option value="1px solid" selected="selected">1px</option>
  58.         <option value="2px solid">2px</option>
  59.         <option value="3px solid">3px</option>
  60.         <option value="4px solid">4px</option>
  61.         <option value="5px solid">5px</option>
  62.     </select>
  63.  
  64.  
  65. <div id="myDiv>
  66.     <div id="lineOne">Some text here</div>
  67.     <div id="lineTwo">Mores text here</div>
  68.     <div id="lineThree">And even more</div>
  69.     <div id="lineFour">And last text here</div>
  70.        
  71. function setColor()   {    
  72.   var color = document.getElementById("color").value;  
  73.   document.getElementById("myDiv").style.borderColor = color;  
  74. }
  75.        
  76. var myDiv = document.getElementById("myDiv");
  77.  
  78. function setColor(elem) {
  79.     myDiv.style.borderColor = elem.value;
  80. }
  81.  
  82. function border(elem) {
  83.     myDiv.style.borderWidth = elem.value;
  84. }
  85.  
  86. <select id="color" onchange="setColor(this);">
  87.      <option value="white">white</option>          
  88.      <option value="black" selected="selected">black</option>          
  89.      <option value="red">red</option>          
  90.      <option value="lightblue">light blue</option>          
  91.      <option value="darkblue">dark blue</option>          
  92.      <option value="lightgreen">light green</option>          
  93.      <option value="darkgreen">dark green</option>          
  94.      <option value="yellow">yellow</option>          
  95.      <option value="orange">orange</option>          
  96.      <option value="pink">pink</option>          
  97.      <option value="purple">purple</option>          
  98.      <option value="gray">gray</option>        
  99. </select>
  100. <select id="border"  onchange="border(this);">
  101.      <option value="1px" selected="selected">1px</option>
  102.      <option value="2px">2px</option>
  103.      <option value="3px">3px</option>
  104.      <option value="4px">4px</option>
  105.      <option value="5px">5px</option>
  106. </select>
  107. <div id="myDiv">
  108.     <div id="lineOne">Some text here</div>
  109.     <div id="lineTwo">Mores text here</div>
  110.     <div id="lineThree">And even more</div>
  111.     <div id="lineFour">And last text here</div>
  112. </div>
  113.        
  114. function setStyle(elem, prop){
  115.     myDiv.style[prop] = elem.value;
  116. }
  117.        
  118. function setColor()   {    
  119.     var color = document.getElementById("color").value;    
  120.     document.getElementById("myDiv").style.borderColor = color;  
  121. }
create a new version of this paste RAW Paste Data