By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,482 Members | 2,438 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > how to grey-out a div tagged section
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,482 IT Pros & Developers. It's quick & easy.

how to grey-out a DIV tagged section

P: 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
Share this Question
Share on Google+
8 Replies
harshmaul
Expert 100+
P: 490
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
P: 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
Expert 5K+
P: 7,435
Without javascript, no.
Jul 25 '07 #4
P: 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
Expert 5K+
P: 7,435
Then you need to ask in the javascript forum. I'll send you there.
Jul 25 '07 #6
pbmods
Expert 5K+
P: 5,821
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
P: 54
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
P: 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.

Question stats

  • viewed: 15323
  • replies: 8
  • date asked: Jul 25 '07
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates