I have a problem where the link locations are being printed when the user prints. Is there a way to disable the locations from being printed?
For example if I have the following code
<div id="link_row" class="headerbar">Home
it will print Home (admin.aspx)
or on other links Link1(javascript:Do_something()) when I only want to print Link1
Is there something that I can do to avoid such a problem?
Print a website without printing the link locations?
I looked at the link above to, but I am not able to follow the solution there.
Thank you,
Varun
EDIT: Just to clarify that this is occuring across all users with IE 8 or Firefox 3.6.
asp.net-mvc includes a default print stylesheet. It uses a CSS pseudo-elements to add the value of the href into the visible html. Css-Tricks has a good article on this trick and others.
You should find the CSS selector in the default print stylesheet (probably similar to "a[href]:after"), then add that same selector to your own print stylesheet, and make it override the original, which may require using !important.
#media print {
a[href]:after { content: ""; }
}
or, if that doesn't work:
#media print {
a[href]:after { content: "" !important; }
}
Related
I want there should be page counter in footer right, I am using Chrome. I know there is option available in more settings of Chrome but it also print URL which I don't want in print pages. Plus if printing date also display it will be awesome.
An example snippet:
HTML
<div id="pageFooter">Page </div>
CSS
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
Please let me know if this resolves your issue.
I have a page with two different print buttons and two types of div tags:
<button onclick="window.print()">Print Full</button>
<button onclick="PrintPartial()">Print Partial</button>
<div class="not-partial">
Div Content Here should print for "Print Full" but not for "Print Partial"
</div>
<div class="no-print">
This content shouldn't print on either
<div>
I have the following in my print.css file
.no-print { display: none; }
And below is my PrintPartial() function
function PrintPartial() {
var notPartial = $(".not-partial");
notPartial.addClass("no-print");
window.print();
notPartial.removeClass("no-print");
}
The "Print Full" button works just fine and prints according to my print.css file. The div that is hard coded with the "no-print" class correctly does not print.
However the "Print Partial" button print out is exactly the same as the print full button.
When I run my debugger and step into my PrintPartial() function I can inspect the elements and the "no-print" class is getting added to the correct elements. It calls window.print() which opens the print dialog and it removes the "no-print" class from the elements stored in the notPartial variable.
My only thought is the JQuery select and addClass is running asynchronously and its calling print before the class has changed? If so how do I make sure the window.print isn't called until after the addClass is complete.
I tried running it without the removeClass step and got the same results so I know its not my issue, or at least its not my ONLY issue.
Can somebody please tell me what I am doing wrong and how to correct it?
Thanks,
Scott
UPDATE: The above code works fine as Pabs123 pointed out. I had an issue where a different piece of css (not included in this post) is causing the display property to be changed back.
Thanks
Sorry, The code I posted here works as intended. As Pabs123 suggested in his/her comment, I had other conflicting css that was not included with the post, that was changing the display style back from display: none. So as posted this wasn't really a good question. Sorry.
Thanks for your help.
i am using CKeditor as a text editor in my rails app. so i just download it from the website, then included it. I added this code too:
<script type="text/javascript">$(document).ready(function() {
if ($('textarea').length > 0) {
var data = $('textarea');
$.each(data, function(i) {
CKEDITOR.replace(data[i].id);
});
}
});</script>
The problem is that when i save the content of the text area in the database, and display it after this, from my database, the formatting disappears (for example, what i underlined, is not underlined anymore..)
What can be the problem?
If your content is underlined with a class and not the <u> tag, it might be that you are missing the CSS that makes the class underlined. Meaning if in your content you have something like this: <span class="Underline"> Dr. Whooves </span>, you need the CSS rule for the Underline class to make the underline effective - something like .Underline { text-decoration: underline; }.
Another reason might be that something is overriding the underline tag, whatever it is. Inspect the content that should be underlined using your browser Developer Tools and check the effective style and the overwritten styles.
It would help in troubleshooting if you could provide what your content looks like. A small example of the HTML you produce. Also it might help to show the code you use to output the HTML, but in this case it might not be relevant.
I need to take a webpage and, when the user either clicks file > print or [cmd + p], duplicate an article (HTML) and place the new article adjacent to the original article. The idea is to show a list online, and then print from the webpage a 2-up paper version that can be cut in half: 2 identical lists, one sheet of paper. I'm using print style sheets for the custom paper layout, and I'm using jquery to duplicate the HTML.
The part that I'm stuck on is how to duplicate right before the user sees the print dialog box. I don't want there to be two identical articles on the webpage by default. I'd also want to remove the duplicate article after printing is done, but that's maybe not as important.
<script>
/* instead of window.onclick, is there an "on print" function? */
window.onclick = function() {
var $newArticle = $('article').clone();
$($newArticle).css({'margin-left':'1.3cm'});
$($newArticle).insertAfter("article");
}
</script>
thanks for any suggestions.
I don't want there to be two identical articles on the webpage by default.
No need for JavaScript! Have the article twice in the page and initially hide one with CSS:
article.copy {
display: none;
}
Then, with another CSS rule, show the article on the print page:
#media print {
article.copy {
display: block;
}
}
DEMO
Mode information on#media and a tutorial. Unfortunately #media doesn't seem to work in IE8 and below.
I'm trying to print (via a printer) two or more div's, each to its own page. I'm trying out different plugins, including printArea.
I've tried something along the lines of :
this.$el.find(".print").map(function () {
$(this).printArea();
});
in Chrome it brings up the print dialog twice, once for each div, but in Firefox, it just prints the last div. (Granted, I'm printing to a file instead of via a printer...)
Showing the dialog twice is acceptable, though it would be nice to break it into two pages beforehand. And also - how would I get this working in Firefox?
Thanks!
Instead of trying fancy plugins, why not use a page break?
#media print {
.print {
page-break-after: always;
}
}