CSS/HTML question ("disabling" a DIV)

Factual Questions
1

I’m not sure if this is possible … not even quite sure how to word it, else I’d have Googled those terms… but:

Say I have a typical CSS web page layout. I have one narrow DIV as a column on the left that contains the navigation links, and one big DIV on the right that has the main content of the page.

But, I need to be able to disable all of those links in the left hand column. Say, when someone is editing the contents of a database entry and I want them to either commit the changes or cancel via “submit” and “cancel” buttons–not just click on a different section of the site and leave the editing page behind.

Now, I can do this manually at the start by having my server-side script write the links to such editing pages as just text and not actual links. But it would be much easier to just apply some global change to the whole DIV to disable those links … as though I were putting some sort of piece of glass over the whole column, so people could see the contents but not touch them.

Is this possible? What the heck are the terms involved?

2

I’m not sure if it’s possible or not, but I did want to pop in and say that there’s nothing quite so annoying as links, menu items, or other UI controls that are disabled. If they’re not needed on the page, remove them. If they are needed, allow them to be clicked and code around it. Don’t just leave a grayed out item on the page with no explanation as to why the user can’t click them.

Another answer - make each of the links work like the “cancel” button. Cancel, then navigate to wherever it should go.

3

The short answer is that it’s being left in as a wayfinding cue (i.e., so that users have some idea of where they are).

Not a bad idea, I guess, but I also don’t want the user to drop out without actually meaning to (i.e., I don’t want them to spend five minutes typing up an entry, then navigate out without being 100% aware that doing so will destroy all of that work).

4

That’s what alerts and confirms are for!

5

Some browsers have bugs that work this way…if you can position something else above/over the nav links and make that thing transparent, the links are sometimes unclickable but still shown. I’ve never had a reason to do this (I’ve just run into the problem from the other end), but maybe you can make use of it. Maybe not…I wouldn’t recommend it, but it’s your site.

6

You could use Javascript to make the href of all the links blank onFocus of the editing/typing DIV.

Like…



function disableLinks {
   document.getElementById("link1").href = '';
   document.getElementById("link2").href = '';
}

I don’t know off the top of my head of all browsers don’t refresh when you click on an empty href…maybe some do.

7

Make a second <DIV> with just the text of the links, and have a style=“display:none;” for one or the other where applicable. That may have to be toggled with javascript, though, not sure.

8

OK. Almost there. I figured out how to do this, which is exactly what I’m looking for:

http://hotknifedeveloper.com/divtest/index.html
… BUT, it (naturally) doesn’t work in IE. Anyone know their way around those wacky IE/CSS hacks?

9

Did you try my solution?

You can also change the style of the links at the same time you remove the href.

10

Ah! Success:

http://hotknifedeveloper.com/divtest/start3.html

Sorry, ZipperJJ–didn’t try your solution, yet. I was just focused on finding some CSS thing that I could change by inserting a single line (in this case, " <div class=“maskfront”></div> ").

11

First, IE doesn’t like 2 things:
1.) Position your leftdiv absolutly, this will overlay the leftdiv and maskfront.
2.) IE 6 doesn’t have a min-height. I believe the CSS-hack goes something like:



min-height:400px;
height:auto !important;
height:400px;

Second, I’d do this using javascript as ZipperJJ suggests. Overlaying div’s is kinda messy.