Page disable like button disable

HTML & CSS
1

Hi Dears’

When we add a property of a button

disabled="disabled"

we can see the button but no action is happen… I want to do the same thing about pages… only a single item say for example there is a left bar, right bar, menu bar, header etc… User will see all the elements but right bar, menu bar, header disabled… no action happens if clicks on these elements… actions happens only from left side bar.

thanks in advanced.
If something not clear plz reply, I will clarify
Rashed

2

Cursor? How does that stop people from using links? It just sets the picture of the mouse : )

Hey but funny I just happened to find a page that I think does the same thing you want to (I’m not sure if the links come around if you’re logged in but it seems that way):

I dunno what the site is about, and couldn’t click “site info” to find out (it’s linked on some developer site for unknown reasons).
They have this markup:


    <div class="menu-line">
        <ul>
            <li class="inline-last">
                <span class="chgrad-01">/</span>

                <span class="chgrad-02"> </span>
                <span class="chgrad-03">/</span>
                <span class="chgrad-04"> </span>
                <span class="chgrad-05">/</span>
                <span class="chgrad-06"> </span>
                <span class="chgrad-07">/</span>

                <span class="chgrad-08"> </span>
                <span class="chgrad-09">/</span>
                <span class="chgrad-10"> </span>
                <span class="chgrad-11">/</span>
            </li>
               [b] <li class="inline">post</li>

                <li class="inline">links</li>
                <li class="inline">polls</li>
                <li class="inline">calendar</li>
                <li class="inline">search</li>
                <li class="inline">site statistics</li>
                <li class="inline">site info</li>

                <li class="inline"><a class="navtext" href="/partners.php">partners</a></li>
                <li class="inline">FAQ</li>
                <li class="inline">bulletin board</li>
                <li class="inline"><a class="navtext" href="http://eloise.cementhorizon.com/gallery/">photo gallery</a></li>
                <li class="inline"><a class="navtext" href="http://www.cementhorizon.com/wiki/">wiki</a></li>
                <li class="inline-last">site map</li>[/b]

        </ul>
    </div>

I dunno what’s with the spans, and those class=“inline” are totally silly and redundant, but you see menu items like FAQ are just li elements, no links.

3

Can we use cursor? May be. The above soln though well but unpleasent to users. I see in many web designing books some appear but in shaded color not accessible

I think cursor solves our problem.
thanks.

4

Oh, well remove the <a> tags but leave the text. When the user logs in, your back-end script can add the anchor tags back in.

Or simply don’t even have the link text. What’s the point of it if people can’t use them? Let them show up when they can actually be used.

Someone may suggest something like setting a huge transparent image over the page, but people should have access to the text, be able to highlight it with their mice and all that.
Someone else may suggest using javascript to target all the anchors and return false; so clicking them has no effect. However this is just as bad: it offers links to users, who click them expecting normal browser behaviour. Plus the links will work for anyone with Javascript off.

Or, another option is leave the anchor tags but change the href to “#” and after they are logged in, add in the real href URLs.
I don’t like this one as much as some browsers will bring the user back to the top of the page if they click one. Plus, it’s kinda wrong to suggest to someone that something is clickable, when in fact it doesn’t do anything.

5

I want user will see the whole things of the page but links will not works. If they login then the links action will works!

6

What action are you trying to stop? Normally there is only action on links and forms. Remove any links or forms from your header if you don’t want clicking to do anything.

There is no attribute that disables whole pages. Nor should there be.

7

Hi,

If you want a disable a section then you could as Stomme suggests just place something over the top to stop you clicking it.

You could use an absolute element to keep track with the content in question and if you set the opacity of the element you will make the elements look greyed out to appear disabled also.

Something like this rough demo which won’t work in IE as it is due to the target pseudo class I was using to switch it on.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1,h2 {
    text-align:center;
}
.menu {
    width:350px;
    margin:auto;
    border:5px solid #000;
    background:#ffc;
    position:relative;/* set stacking contewxt for absolute element*/
}
.menu ul {
    margin:0;
    padding:0;
    list-style:none;
}
.menu li, .menu a {
    display:block;
    width:100&#37;;
    background:red;
    color:#fff;
}
.menu a {
    text-indent:1em;
    text-decoration:none;
    padding:5px 0;
}
.menu a:hover {
    background:blue;
}
.overlay {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:100%;
    background:#ccc;
    opacity:0.6;
    z-index:999;
}
#overlay1:target{display:none}
</style>
</head>
<body>
<h1>You need to sign in before you can use this spage</h1>
<h2><a href="#overlay1">Click to sign in</a></h2>
<div class="menu">
    <ul>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
    </ul>
    <div id="overlay1" class="overlay"></div>
</div>
</body>
</html>

What you’d need to do for ie7 and 8 is to use some JS so hide the overlay when you want the effect removed (and use the filter opacity for IE8 and under).

If you want to support IE6 you would need to use the same method that I use for IE in my absolute column methods beacuse ie6 doesn’t understand top and bottom at the same time.

8

Ya, I wrote that. It’s based off of a standard (but old) Geeklog site template. The only reason those “links” like “FAQ” don’t do anything is because they have no “A” tag surrounding them.

Compare :


<li class="inline">FAQ</li>

with


<li class="inline"><a class="navtext" href="http://www.cementhorizon.com/wiki/">wiki</a></li>

Those spans are there to control the color of those slashes with CSS. You can see those as varying colored slash characters on the page.

9

the only full proof method is to actually have no links. hiding them with css or js is defeated easily by disabling the author style and js.

as far as the

I want user will see the whole things of the page but links will not works. If they login then the links action will works!
goes, you can:

  • use the text for links, but w/o using any <a> element, like above said
  • use links, <a> elements, that point nowhere useful until logon