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

Jul 25 '07 #1

Follow Post Reply

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

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

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

Romulo NF

Expand|Select|Wrap|Line Numbers

 
<!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.offsetHeight

_top = elm.offsetTop

_left = elm.offsetLeft
 
overlay = document.createElement("div")

overlay.style.width = _width + "px"

overlay.style.height = _height + "px"

overlay.style.position = "absolute"

overlay.style.background = "#dedede"

overlay.style.top = _top + "px"

overlay.style.left = _left + "px"
 
overlay.style.filter = "alpha(opacity=50)"

overlay.style.opacity = "0.5"

overlay.style.mozOpacity = "0.5"
 
document.getElementsByTagName("body")[0].appendChild(overlay)

}
 
</script>
 
<body>
 
<div class="holder">

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

</div>
 
<div class="holder">

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

</div>
 
<div class="holder">

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

</div>
 
<div class="holder">

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

</div>
 
</body>

</html>

I believe this is more or less what you need!
Good luck!

Jul 25 '07 #8

javakid

Expand|Select|Wrap|Line Numbers

<!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.offsetHeight

_top = elm.offsetTop

_left = elm.offsetLeft

overlay = document.createElement("div")

overlay.style.width = _width + "px"

overlay.style.height = _height + "px"

overlay.style.position = "absolute"

overlay.style.background = "#dedede"

overlay.style.top = _top + "px"

overlay.style.left = _left + "px"

overlay.style.filter = "alpha(opacity=50)"

overlay.style.opacity = "0.5"

overlay.style.mozOpacity = "0.5"

document.getElementsByTagName("body")[0].appendChild(overlay)

}

</script>

<body>

<div class="holder">

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

</div>

<div class="holder">

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

</div>

<div class="holder">

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

</div>

<div class="holder">

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

<a href="javascript:void(0)" onclick="disableDiv(this)">Disable this</a><br>

</div>

</body>

</html>

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

how to grey-out a DIV tagged section

Post your reply

Similar topics