469,271 Members | 1,356 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

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 16801
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

6 posts views Thread by Isabelle | last post: by
3 posts views Thread by Jacques Chaurette | last post: by
reply views Thread by Sérgio Almeida | last post: by
5 posts views Thread by Peter Verijke | last post: by
3 posts views Thread by BrendanMcPherson | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.