• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 12611
  • Last Modified:

Disabling Hyperlinks using CSS

I have a 2 frame page.

I want to disable the hyperlinks on pages which are loaded into the lower frame.
But, I dont want to disable the hyperlinks for the top frame.

I dont want to edit each of the 4000 files (that get loaded itno the lower frame) to disable the hyperlinks.

Is there any easy way to do it?

Points are for urgency and creative solutions.
:) SD
0
sciber_dude
Asked:
sciber_dude
  • 7
  • 5
  • 3
  • +2
3 Solutions
 
sciber_dudeAuthor Commented:
PS:
1. I definitely do need example code
2. It need not be only a CSS solution; I dont mind a Javascript solution too.
0
 
Drift3rCommented:
I don't think you can do it with css (I may be wrong ... but I don't think so ...)

And what do you mean by disable?

You can do something like in all links put <a href="whatever.htm" disabled="disabled">It won't go to whatever.htm</a>

although in the different browsers I've tested this, some still trigger the onmouseover (but they all disable the onclick so they won't follow the link)

The way I see it you could do what you want by putting a php page on the lower frame opening the other pages.

This php page would just have a regular expression/replace all function which would read the .htm file to be opened and substitute all '<a ' by '<a disabled ="disabled" '

Is as simple as I can figure it out ... that should fix your problem and no Javascript involved. ;)

Drift3r

 

0
 
sciber_dudeAuthor Commented:
hmm! I was hoping there would be a simpler solution @ CSS or Javascript

What i mean by disabled is that ... I dont want the visitor to click on the hyperlink in a page and go to the Internet webpage. I am having the 4000 webpages on a CD.

I dont want a solution where i have delete the hyperlinks using regular expressions or a solution where i have to alter the code in each of the 4000 webpages.

I know! Its a crazy thing to ask, but thats what i want :P

:) SD
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Drift3rCommented:
Well that doesn't delete the hyperlinks ... just disables them in "runtime" ... You wouldn't have to edit all 4000 files ...

If you don't wanna do that... I really don't know how you're gonna do it ... as the solution with javascript will be basically the same ... but in javascript :)
0
 
sciber_dudeAuthor Commented:
> The way I see it you could do what you want by putting a php page on the lower frame opening the other pages.

> This php page would just have a regular expression/replace all function which would read the .htm file to be opened and substitute all '<a ' by '<a disabled ="disabled" '

Since I cant run a PHP page on a CD-ROM, this wont work for me :| (I think). I am more of an ASP guy. So solutions in ASP/CSS/Javascript preferable.

:) SD
0
 
Drift3rCommented:
well ... actually you could ... but maybe javascript is easier ...

It's still the same algoritm really ...
0
 
seanpowellCommented:
How about this:


<frameset rows="100,*" framespacing="0" border="0" frameborder="0">
  <frame name="upper" src="top.htm" scrolling="no">
  <frame name="lower" src="bottom.htm">
  <noframes>
  <body topmargin="0" leftmargin="0">
  <p>Sorry, you don't have a frames-capable browser.</p>
  </body>
  </noframes>
</frameset>

Then, in bottom.htm, do this:

<html>
<head>
<title>Bottom Page</title>
<style type="text/css">

body { margin:0px; padding:0px; }

div#screen { width:100%; height:100%; z-index:1; background-image: url("clear.gif"); }

</style>
</head>

<body>
<div id="screen">
<iframe src="index.html" name="myCover" width="100%" height="100%" style="z-index:-1; position:absolute;"></iframe>
</div>
</body>
</html>

Now simply target all the pages to load into the iframe, which is positioned behind a transparent image that covers the entire page.

Hence - you can't click on anything...
0
 
sciber_dudeAuthor Commented:
Amazing! this could work! :D

let me test it out!

:) SD

0
 
Drift3rCommented:
hheheeh ... 10 points for creative ... and it would work ... ;)

Although Iframes won't work on some of the older browsers ...
0
 
seanpowellCommented:
Just a note if you're going to go this route....

You will need to adjust the CSS to allow for scrolling if the bottom pages are longer than the viewport. So the relevant code would change to this:

<html>
<head>
<style type="text/css">

body
{
    margin:0;
    padding:0px;
}

div#screen
{
    /* just to see where the div is */
    border:1px solid #000;

    /* set it to 0-0 */
    position:absolute;
    top:0;
    left:0;

    /* don't cover the scrollbar */
    right:22px;

    width:100%;
    height:100%;

    /* put it on top of the iframe */
    z-index:1;

    /* and here's the image */
    background-image: url("1ptrans.gif");
}

iframe
{
    /* put it behind the div */
    z-index:-1;
   
    /* this must be set for the z-index to work */
    position:absolute;
   
    width:100%;
    height:100%;
}

</style>
</head>
<body>

<div id="screen"></div>
<iframe src="1.html" name="myIframe" id="myIframe" frameborder="no"></iframe>

</body>
</html>

Here's an online example for you:
http://www.pdgmedia.com/ee/sciber.html
0
 
COBOLdinosaurCommented:
a:hover {display:none }

as the last entry in the style sheet used for those pages will make the link disappear and be unclicable on mouseove.

Cd&
0
 
alexgreenCommented:
you could always do a "find and replace" in the html files and remove all the hyperlinks!

dearmwaever and VS.NET have theese functionality and i believe notepad does too!
0
 
alexgreenCommented:
Or if you don't want to do it yourself, zip them up, post a link and I'll do a find and replace for you (tell me what you want removing) turnaround in 2 working days, cost... a few EE points!
0
 
sciber_dudeAuthor Commented:
@ alexgreen -

> turnaround in 2 working days, cost... a few EE points!
Thanks for offering to help with find and replace but that wont really be necessary. coz, there are 4000 files and I didnt want to scan 4000 files and replace them. I probably could have written a script that could have done that; but i wanted a more simpler solution of disabling hyperlinks.

But your offer is very much appreciated.
:) SD

PS: I guess i got my answer. Time to close this question and provide feedback which i will in a couple of minutes.
0
 
sciber_dudeAuthor Commented:
@ COBOLdinosaur -

That is an amazing solution! I had a blast testing that solution! Thank you.

@ seanpowell -

Thanks for the code and the re-work of it! I love it!

@ Drift3r - Thank you for your idea @ disabled!

:) SD
0
 
Drift3rCommented:
No problem ... actually I wasn't sure if you could do the disabled with CSS ... hadn't had time to check it out ... now I know! :P
0
 
sciber_dudeAuthor Commented:
@ COBOLdinosaur -

> a:hover {display:none }
Out of curiousity... If I had to replace the hyperlink with this text "Disabled_link" what would it be?

:) SD
0
 
alexgreenCommented:
no worries, just offering my 2p
0
 
COBOLdinosaurCommented:
For IE only you could try something like:

a:hover {color:setExpression("this.href='#';this.childNodes[0].innerHTML='disabled_link'");}

But if it works it will also be prone to crash the browser, because it can get into an endless loop.

Cd&
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 7
  • 5
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now