how to grey-out a DIV tagged section

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • javakid
    New Member
    • Mar 2007
    • 23
    #1

    how to grey-out a DIV tagged section

    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
    Tags: None
    • harshmaul
      Recognized Expert Contributor
      • Jul 2007
      • 490
      #2
      What are the "certain conditions". depending on what they are you may need server side coding, but possible Javascript will sort you out

        Comment

        • javakid
          New Member
          • Mar 2007
          • 23
          #3
          Originally posted by harshmaul
          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,

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              Without javascript, no.

                Comment

                • javakid
                  New Member
                  • Mar 2007
                  • 23
                  #5
                  Originally posted by drhowarddrfine
                  Without javascript, no.

                  hi

                  I want it in javascript only. If u have solution pls tell me.
                  I said it WITH javascript.
                  Thanks

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      Then you need to ask in the javascript forum. I'll send you there.

                        Comment

                        • pbmods
                          Recognized Expert Expert
                          • Apr 2007
                          • 5821
                          #7
                          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.

                            Comment

                            • Romulo NF
                              New Member
                              • Nov 2006
                              • 54
                              #8
                              [CODE=html]
                              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

                              <html>
                              <head>
                              <title>Untitled </title>
                              </head>

                              <style>
                              body {margin:15px; text-align:auto}
                              .holder {margin:5px auto; height:100px; width:500px; border:1px solid #000;}
                              </style>

                              <script>

                              function disableDiv(elm) {

                              while (elm.tagName !="DIV") {
                              elm = elm.parentNode
                              }

                              _width = elm.offsetWidth
                              _height = elm.offsetHeigh t
                              _top = elm.offsetTop
                              _left = elm.offsetLeft

                              overlay = document.create Element("div")
                              overlay.style.w idth = _width + "px"
                              overlay.style.h eight = _height + "px"
                              overlay.style.p osition = "absolute"
                              overlay.style.b ackground = "#dedede"
                              overlay.style.t op = _top + "px"
                              overlay.style.l eft = _left + "px"

                              overlay.style.f ilter = "alpha(opacity= 50)"
                              overlay.style.o pacity = "0.5"
                              overlay.style.m ozOpacity = "0.5"

                              document.getEle mentsByTagName( "body")[0].appendChild(ov erlay)
                              }

                              </script>

                              <body>

                              <div class="holder">
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              </div>

                              <div class="holder">
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              </div>

                              <div class="holder">
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              </div>

                              <div class="holder">
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                              </div>

                              </body>
                              </html>
                              [/CODE]

                              I believe this is more or less what you need!
                              Good luck!
                              Last edited by gits; Jul 26 '07, 07:00 AM. Reason: fix CODE tags

                                Comment

                                • javakid
                                  New Member
                                  • Mar 2007
                                  • 23
                                  #9
                                  Originally posted by Romulo NF
                                  [CODE=html]
                                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

                                  <html>
                                  <head>
                                  <title>Untitled </title>
                                  </head>

                                  <style>
                                  body {margin:15px; text-align:auto}
                                  .holder {margin:5px auto; height:100px; width:500px; border:1px solid #000;}
                                  </style>

                                  <script>

                                  function disableDiv(elm) {

                                  while (elm.tagName !="DIV") {
                                  elm = elm.parentNode
                                  }

                                  _width = elm.offsetWidth
                                  _height = elm.offsetHeigh t
                                  _top = elm.offsetTop
                                  _left = elm.offsetLeft

                                  overlay = document.create Element("div")
                                  overlay.style.w idth = _width + "px"
                                  overlay.style.h eight = _height + "px"
                                  overlay.style.p osition = "absolute"
                                  overlay.style.b ackground = "#dedede"
                                  overlay.style.t op = _top + "px"
                                  overlay.style.l eft = _left + "px"

                                  overlay.style.f ilter = "alpha(opacity= 50)"
                                  overlay.style.o pacity = "0.5"
                                  overlay.style.m ozOpacity = "0.5"

                                  document.getEle mentsByTagName( "body")[0].appendChild(ov erlay)
                                  }

                                  </script>

                                  <body>

                                  <div class="holder">
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  </div>

                                  <div class="holder">
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  </div>

                                  <div class="holder">
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  </div>

                                  <div class="holder">
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  <a href="javascrip t:void(0)" onclick="disabl eDiv(this)">Dis able this</a><br>
                                  </div>

                                  </body>
                                  </html>
                                  [/CODE]

                                  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.

                                    Comment

                                    Previous template Next
                                    Working...