Improving Link Display for Print

by Aaron Gustafson

49 Reader Comments

Back to the Article
  1. Brian, thanks for taking a look at it.  However, the links in your previous comment (#37) don’t work (403 Forbidden).  Is that page not accessible outside your university?

    Copy & paste the code below to embed this comment.
  2. I discovered the correct link:
    http://www.cps.brockport.edu/~cpsclub/template/footnoteLinksExpanded.js

    (The links posted in comment #37 are missing the tilde before “cpsclub”.)

    Copy & paste the code below to embed this comment.
  3. Sorry about that. Glad it worked for you (I assume it works or you’d have complained when posting).

    Copy & paste the code below to embed this comment.
  4. I was just checking through the comments again to see how the discussion has progressed and it looks like you all have been very busy kicking the tires and finding bugs. I love all of the energy around this script and am very happy this has made so many of you smile. In the coming weeks I will be looking over the enhancements you all have put together and will look to roll them into a revised version I have planned.

    Thanks again for all of your feedback!

    Copy & paste the code below to embed this comment.
  5. This is so great! I use it on my own website, if you want to check.

    I only changed one thing: when there is no link at all, I find it disturbing to have a “links” title with no content, so I have just added a test for num > 1 before actually adding the content.

    HTH

    Copy & paste the code below to embed this comment.
  6. Another possibility would be to check the myArr array to see if it is empty before appending the <h2> and <ol>:

    if (myArr.length > 0) {
      // append the heading and ordered list to the target
      target.appendChild(h2);
      target.appendChild(ol);
    }


    Just another way of preventing “Links” from showing up in case there are no links on the page or you have all of them in the ignore class.

    Copy & paste the code below to embed this comment.
  7. I’ve just implemented this on my own site (www.fueladvance.com) and it rocks! Try printing our homepage…

    Copy & paste the code below to embed this comment.
  8. @Brian LePore: I’ve seen you’ve made a lot of alterations, but how do you implement them? Do you have some description?

    What I was missing in the original script was not having the ability to skip elements (e.g. a menu). Even if it is set to display:none it will not print but the links are added to the list anyway. This could be solved bij adding ignore to an element (which is not possible right now) or by ignoring all elements that are not dispayed all together.
    The class ignore did not seem to work bij the way but that is probably my bad implementation.

    Another thing is that IE treats images as a link too.

    But the technique is great and offers a great result for the end user.

    Copy & paste the code below to embed this comment.
  9. Hi,

    The author’s technique is pretty slick.  However, it wasn’t quite was I was searching for—hopefully someone here knows the answer.  Is there a way to have a larger document that has lots of anchor links print just the page number they’ll appear on?  So if you’re printing something that looks like this:

    Additional Considerations

    …it would appear in a print version as:

    Additional Considerations (p. 17)

    This ability would really help for a document I’m currently working on.

    Thanks,
    Kev

    Copy & paste the code below to embed this comment.