Solved

Disabling Hyperlinks using CSS

Posted on 2004-03-23
19
12,598 Views
Last Modified: 2007-12-19
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
Comment
Question by:sciber_dude
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 3
  • +2
19 Comments
 
LVL 11

Author Comment

by:sciber_dude
ID: 10662858
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
 
LVL 3

Assisted Solution

by:Drift3r
Drift3r earned 50 total points
ID: 10662942
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
 
LVL 11

Author Comment

by:sciber_dude
ID: 10662987
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
Industry Leaders: 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!

 
LVL 3

Expert Comment

by:Drift3r
ID: 10663037
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
 
LVL 11

Author Comment

by:sciber_dude
ID: 10663068
> 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
 
LVL 3

Expert Comment

by:Drift3r
ID: 10663173
well ... actually you could ... but maybe javascript is easier ...

It's still the same algoritm really ...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10663304
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
 
LVL 11

Author Comment

by:sciber_dude
ID: 10663317
Amazing! this could work! :D

let me test it out!

:) SD

0
 
LVL 3

Expert Comment

by:Drift3r
ID: 10663323
hheheeh ... 10 points for creative ... and it would work ... ;)

Although Iframes won't work on some of the older browsers ...
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 300 total points
ID: 10667409
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 150 total points
ID: 10670750
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
 
LVL 3

Expert Comment

by:alexgreen
ID: 10676348
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
 
LVL 3

Expert Comment

by:alexgreen
ID: 10676589
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
 
LVL 11

Author Comment

by:sciber_dude
ID: 10679735
@ 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
 
LVL 11

Author Comment

by:sciber_dude
ID: 10679834
@ 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
 
LVL 3

Expert Comment

by:Drift3r
ID: 10679862
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
 
LVL 11

Author Comment

by:sciber_dude
ID: 10679871
@ 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
 
LVL 3

Expert Comment

by:alexgreen
ID: 10680515
no worries, just offering my 2p
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10682297
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question