[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Disabling Hyperlinks using CSS

Posted on 2004-03-23
19
Medium Priority
?
12,608 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 200 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
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!

 
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 1200 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 600 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

650 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