Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Disabling links using css for a print preview 1

Status
Not open for further replies.
corchard

corchard

Programmer
Jul 3, 2002
23
0
0
CA
I use a CMS that automatically publishes a print variant of every page in my site.

I'd like to use a different CSS for the print version that will disable the hyperlinks that may be on that page, so people don't navigate through the print variant version of the website.

Anyone know how to disable the a:link or href in all occurrences on a page?

Note: I cannot do it on the end of the CMS before/during publishing, so it will have to be a client-side solution.

Cheers,

Chris

"Illegitimis non carborundum"
(don't let the b@st@rds get you down)
 
Sort by date Sort by votes
I am a little confused to what you want to do. What do you mean by 'print version' of your site. Do you want to disable styling for printing? Or do you have a special page that is used for printing and you don't want to have links on that page work? With a special css for printing, you could disguise your links so that they wouldn't look like links:
Code: 
a {
 color: #000000;
 cursor: text;
 text-decoration: none;
}
This will make your links look like normal text and people might not click on them. However, if you want to truly disable all the links, you will have to use JavaScript, so you better ask in that forum.
 
Upvote 0 Downvote
Create a separate stylesheet for printing.
Import it into your document with something like

Code: 
<style type="text/css" rel="stylesheet" media="print">stylesheet/printstlye.css</style>

Alternately have your "print this page button" load a page that calls that stylesheet.

in that sheet set the links to

Code: 
a {display: none;}

This will,however, potentially alter the flow of your document. If it does, you could try

Code: 
a {visbility: hidden;}
 
Upvote 0 Downvote
Quite good Ideas guys, but I'm afraid it doesn't quite meet the challenge.

Though I'm leaning towards vragabond as a backup, foamcow is closer.

Some of our site does a no decorate on text, so the users may sill quite likely click on a link even if its not an apparent link.

Foamcow's idea, the first makes the link go away altogether including the text that is anchored, so "Please click here" turns into "Please here".
Your second idea hiding visibility turns it into "Please here" (causing some fun formatting layouts)
What I need is to remove the href only from a link, so I get "Please click here" (not hyperlinked Vrag) and hopefully by way of an alternate CSS.

Thanks in advance for your solutions, because I know you will conquer this problem with your exceptionally creative skills.

Chris

&quot;Illegitimis non carborundum&quot;
(don't let the b@st@rds get you down)
 
Upvote 0 Downvote
You can't do it with css. It's that simple.

Using a CMS to do the print layout is simply unnecessary. If you want a seperate print style, provide it using a CSS print stylesheet - there's no need to provide different HTML.

If you insist on providing a print version as a seperate html file, than the solution is to have the CMS parse the content and remove all the links.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Upvote 0 Downvote
Agree partially. Printer-friendly versions of content don't have links. To get that, CSS is not enough. Removing anchors server-side usually turns into ugly regular-expression string crunching. On the other hand, client-side document is nicely structured into DOM tree so:
Code: 
<script language="javascript">
function removeAnchors()
{	for(i=0; i<document.links.length; i++)
		document.links[i].href = "#"
}
</script>
Another CSS is still necessary, mostly to turn all fancy colors into b&w.
 
Upvote 0 Downvote
That's pretty neat actually.
Can't you use the DOM to change a colour property for the links too though?
 
Upvote 0 Downvote
Yes, but in that particular case I'm rather for using another external CSS. Print variants may differ in many other details.
 
Upvote 0 Downvote
I developed vongrunt' solution..

Code: 
<html>
<head>
<style type="text/css">
 .hideAnchor{
  display:none; 
 }
  
</style>
<script language="javascript">
function removeAnchors()
{    for(i=0; i<document.links.length; i++)
        document.links[i].parentElement.className="hideAnchor";
}
document.onclick= removeAnchors;
</script>

</head>
<body>

<div class="linklayer">
  Please <a href="[URL unfurl="true"]http://tek-tips.com">click</a>[/URL] here.
</div>
<div class="linklayer">
  Please <a href="[URL unfurl="true"]http://tek-tips.com">click</a>[/URL] here.
</div>
<div class="linklayer">
  Please <a href="[URL unfurl="true"]http://tek-tips.com">click</a>[/URL] here.
</div>
<div class="linklayer">
  Please <a href="[URL unfurl="true"]http://tek-tips.com">click</a>[/URL] here.
</div>
<div class="linklayer">
  Please <a href="[URL unfurl="true"]http://tek-tips.com">click</a>[/URL] here.
</div>
<div class="linklayer">
  Please <a href="[URL unfurl="true"]http://tek-tips.com">click</a>[/URL] here.
</div>
 some text
</body>
</html>
 
Upvote 0 Downvote
te get the other solution, we cancelling a line in the <script> block..
Code: 
...

 //document.links[i].parentElement.className="hideAnchor";
 document.links[i].parentElement.style.visibility="hidden";
...

 
Upvote 0 Downvote
Brilliant vonGrunt! That will work great, and since the particular issue is on an intranet with fixed client machines (javascript enforced) your suggestion addresses the needs perfectly.

Thank you all for your input!

Chris

&quot;Illegitimis non carborundum&quot;
(don't let the b@st@rds get you down)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
70
Alt255
Alt255
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
329
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
166
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
131
PeDa
PeDa
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
133
198709km
198709km

Part and Inventory Search

Sponsor

Back
Top