473,382 Members | 1,619 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 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 18053
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

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

Similar topics

6
by: Isabelle | last post by:
Hey, How do you feel about using grey text for copy? I love grey for its neutral presence and ability to downplay something and give a clear and crisp look to the overall design of a site but...
3
by: Jacques Chaurette | last post by:
Hello all , thanks in advance for any help. While looking for a solution to how to replace the grey box while an applet loads, a search of Google got me an article by Glenn s. Peffers that claims to...
0
by: Sérgio Almeida | last post by:
Greetings Is it possible to change the color of a combobox (combobox arrow button), instead of grey? If so, how?? Thanks Sérgio
3
by: ReidarT | last post by:
I use a label to write some help-text in a web-form. I don't want the user to be able to click in this field so I have disabled it, enable = false. The text color turns grey. I use a cssclass with...
5
by: Peter Verijke | last post by:
Hi, I have a possible framework bug. Sometimes when i call other code by double clikking the datagrid, i get on returning a grey colored cell over the active cell, still showing the old data....
2
by: Jeff Jarrell | last post by:
The thin grey line that goes across the editor to mark off the sub\functions\regions from one another, is there a way to turn it off? I was considering using an underscore for my private member...
10
by: Andrew Kidd | last post by:
I see this when I'm stepping through in the debugger ... just thought I'd ask, and I just know it's going to be one of those "Doh" moments, but it's got me foxed just now.
2
by: SpankyTClown | last post by:
When I set an objects data enabled property, the form displays these objects in grey. Is there any way to change the colour? Thanks
3
by: BrendanMcPherson | last post by:
How can I get a listbox to change a textbox on some selections. I have a listbox which only needs to be filled in on some selections. Is there a way I can have on some selections the textbox go...
4
by: marfola | last post by:
I'm trying to implement bottom-to-top vertical text using CSS attributes in IE : writing-mode: tb-rl; filter: flipv fliph; But I have encountered the following: the text is...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.