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

Subscribe Post Reply

18057

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

Similar topics

Grey Text

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

HTML / CSS

getting rid of the applet grey box while loading

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

Javascript

change the grey color of a combobox

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

C# / C Sharp

Label text turning grey when enabled = false

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

Visual Basic .NET

Grey Shadow cell on the datagrid

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

Visual Basic .NET

VS Editor... The thin grey line that goes across the window

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

Visual Basic .NET

Debugging in VS2005 - why is some code shaded grey?

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.

Visual Basic .NET

Property enable colour changed to grey how do I change it to another color

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

Microsoft Access / VBA

Listbox changes textbox to disabled and grey

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

Javascript

Problem: grey shadow in CSS vertical text

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

HTML / CSS

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Wordpress or something else?

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

Content Management Systems

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Batch import of multiple excel files into the database

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

Data Management

Merging data from multiple Excel files

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

Data Management

Navigating the Data Structures and Algorithms (DSA)

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

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

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

Computer Hardware