471,887 Members | 803 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > javascript > questions > how to grey-out a div tagged section

Join Bytes to post your question to a community of 471,887 software developers and data experts.

how to grey-out a DIV tagged section

23
Hi

I have a table with four columns. there exist a div for each of them.
The data in one column is an href i.e link.

Based on certain condition, i want to disable the links in these columns. but user should be able to view it but the links should be disabled.

Is there any possibility to gray-out the required div by HTML, CSS or JAvascript?

Thanks and Best Regards
Jul 25 '07 #1
8 17542
harshmaul
490 Expert 256MB
What are the "certain conditions". depending on what they are you may need server side coding, but possible Javascript will sort you out
Jul 25 '07 #2
javakid
23
What are the "certain conditions". depending on what they are you may need server side coding, but possible Javascript will sort you out
Hi
Thank u for your reply

The condition is such that, I check for the typr of user in my application , if it is a member , then the div should be grey-out and links should be disabled. If the user is editor type user then, the the div should not be grey-out. this user type of checking is done in jsp.

how to grey out this with using javascript?
Thanks for your quick help.

Best regards,
Jul 25 '07 #3
drhowarddrfine
7,435 Expert 4TB
Without javascript, no.
Jul 25 '07 #4
javakid
23
Without javascript, no.

hi

I want it in javascript only. If u have solution pls tell me.
I said it WITH javascript.
Thanks
Jul 25 '07 #5
drhowarddrfine
7,435 Expert 4TB
Then you need to ask in the javascript forum. I'll send you there.
Jul 25 '07 #6
pbmods
5,821 Expert 4TB
Heya, javakid.

The easiest way to do this is to create an absolutely-positioned div with background-color of grey and opacity of 0.5.

When a column is supposed to be disabled, show the div overlayed over that column. The div will intercept any clicks, thus rendering the links unusable.

I think.

It's been awhile since I've done this.
Jul 25 '07 #7
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5.     <title>Untitled</title>
  6. </head>
  7.  
  8. <style>
  9. body {margin:15px; text-align:auto}
  10. .holder {margin:5px auto; height:100px; width:500px; border:1px solid #000;}
  11. </style>
  12.  
  13. <script>
  14.  
  15. function disableDiv(elm) {
  16.  
  17.     while (elm.tagName !="DIV") {
  18.     elm = elm.parentNode
  19.     }
  20.  
  21. _width = elm.offsetWidth
  22. _height = elm.offsetHeight
  23. _top = elm.offsetTop
  24. _left = elm.offsetLeft
  25.  
  26. overlay = document.createElement("div")
  27. overlay.style.width = _width + "px"
  28. overlay.style.height = _height + "px"
  29. overlay.style.position = "absolute"
  30. overlay.style.background = "#dedede"
  31. overlay.style.top = _top + "px"
  32. overlay.style.left = _left + "px"
  33.  
  34. overlay.style.filter = "alpha(opacity=50)"
  35. overlay.style.opacity = "0.5"
  36. overlay.style.mozOpacity = "0.5"
  37.  
  38. document.getElementsByTagName("body")[0].appendChild(overlay)
  39. }
  40.  
  41. </script>
  42.  
  43. <body>
  44.  
  45. <div class="holder">
  46. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  47. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  48. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  49. </div>
  50.  
  51. <div class="holder">
  52. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  53. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  54. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  55. </div>
  56.  
  57. <div class="holder">
  58. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  59. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  60. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  61. </div>
  62.  
  63. <div class="holder">
  64. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  65. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  66. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  67. </div>
  68.  
  69. </body>
  70. </html>
  71.  
I believe this is more or less what you need!
Good luck!
Jul 25 '07 #8
javakid
23
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5.     <title>Untitled</title>
  6. </head>
  7.  
  8. <style>
  9. body {margin:15px; text-align:auto}
  10. .holder {margin:5px auto; height:100px; width:500px; border:1px solid #000;}
  11. </style>
  12.  
  13. <script>
  14.  
  15. function disableDiv(elm) {
  16.  
  17.     while (elm.tagName !="DIV") {
  18.     elm = elm.parentNode
  19.     }
  20.  
  21. _width = elm.offsetWidth
  22. _height = elm.offsetHeight
  23. _top = elm.offsetTop
  24. _left = elm.offsetLeft
  25.  
  26. overlay = document.createElement("div")
  27. overlay.style.width = _width + "px"
  28. overlay.style.height = _height + "px"
  29. overlay.style.position = "absolute"
  30. overlay.style.background = "#dedede"
  31. overlay.style.top = _top + "px"
  32. overlay.style.left = _left + "px"
  33.  
  34. overlay.style.filter = "alpha(opacity=50)"
  35. overlay.style.opacity = "0.5"
  36. overlay.style.mozOpacity = "0.5"
  37.  
  38. document.getElementsByTagName("body")[0].appendChild(overlay)
  39. }
  40.  
  41. </script>
  42.  
  43. <body>
  44.  
  45. <div class="holder">
  46. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  47. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  48. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  49. </div>
  50.  
  51. <div class="holder">
  52. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  53. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  54. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  55. </div>
  56.  
  57. <div class="holder">
  58. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  59. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  60. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  61. </div>
  62.  
  63. <div class="holder">
  64. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  65. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  66. <a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>
  67. </div>
  68.  
  69. </body>
  70. </html>
  71.  
I believe this is more or less what you need!
Good luck!
God Bless U, Thanks

Thank u for your help , it did help me.
Jul 26 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics
Grey Text
6 posts views Thread by Isabelle | last post: by
getting rid of the applet grey box while loading
3 posts views Thread by Jacques Chaurette | last post: by
change the grey color of a combobox
reply views Thread by Sérgio Almeida | last post: by
Grey Shadow cell on the datagrid
5 posts views Thread by Peter Verijke | last post: by
Listbox changes textbox to disabled and grey
3 posts views Thread by BrendanMcPherson | last post: by
how to create picsart png ?
reply views Thread by zermasroor | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates