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
8  18110 
What are the "certain conditions". depending on what they are you may need server side coding, but possible Javascript will sort you out
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,
Without javascript, no.
hi
I want it in javascript only. If u have solution pls tell me.
I said it WITH javascript.
Thanks
Then you need to ask in the javascript forum. I'll send you there.
pbmods 5,821
Recognized Expert Expert
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.
-
<!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!
-
<!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.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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 at the same time, it's hard to read or
take notice of. One to some words seem to be OK but blocks of grey text
seem to be difficult to read and I...
|
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 solve the problem.
You can find the article at http://www.codeproject.com/java/javaappletwaitmsg.asp
I have adapted the code to my situation but...
|
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
|
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 another color and want it
to remain blue, not grey.
How do I avoid this?
regards
reidarT
|
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.
Even when i refresh the datagrid, and no records are on that position,
the grey shadow cell is still there.
Did somebody know a solution for that?
| | |
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 variables, but
with the grey line, it obscures it (on the last one).
|
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.
|
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
|
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
disabled and turn grey?
|
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 displayed with a grey shadow (instead of anti-alias).
It seems that the problem is caused by the "filter:flip" attribute. Does anyone have a work...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in...
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
