Solved

Disabling Hyperlinks using CSS

Posted on 2004-03-23
19
12,580 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
  • 7
  • 5
  • 3
  • +2
19 Comments
 
LVL 11

Author Comment

by:sciber_dude
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 3

Expert Comment

by:Drift3r
Comment Utility
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
Comment Utility
> 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
Comment Utility
well ... actually you could ... but maybe javascript is easier ...

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

Expert Comment

by:seanpowell
Comment Utility
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
Comment Utility
Amazing! this could work! :D

let me test it out!

:) SD

0
 
LVL 3

Expert Comment

by:Drift3r
Comment Utility
hheheeh ... 10 points for creative ... and it would work ... ;)

Although Iframes won't work on some of the older browsers ...
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 31

Accepted Solution

by:
seanpowell earned 300 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
@ 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
Comment Utility
@ 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
Comment Utility
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
Comment Utility
@ 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
Comment Utility
no worries, just offering my 2p
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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 your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now