1

I'm trying to create a function to change my font color but I need to print it, at the moment all it's ok but I'm having problems with the CSS on print, here is my code

$('#draw').on('click', 'p', function () {
   if($(this).hasClass("highlited")) {
      $(this).removeClass("highlited");
   } else {
      $(this).addClass("highlited");
   }
});

$('#click').click(function () {
  var html = "";
  html += '<p>I want to be red...</p>';
  html += '<p>Me too...</p>';
  html += '<p>Ok... Me too...</p>';
  
  $('#draw').html(html);
});
.highlited {
  color: red;
}

@media print {
  .highlited {
    color: red;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="draw">
  <button id="click">Click me</button>
</div>

<hr />
<button onclick="window.print();">Print</button>

NOTE

On snippet works perfect but when I try it in my browser not and on codepen too.

Code not working on CodePen

I'm using Google Chrome. What is the problem and how can I solve it? Thanks in advance.

EDIT

In this picture you can see my problem, When you click a '

' element the font color change to red but when you click on print button appears in black, this happen with CodePen code and in my browser but I don't know why works perfectly on Snippet code...

Problem

Improve this question
6
  • I don't understand your question: what would you like to achieve and what is happening instead? Commented Sep 14, 2016 at 18:42
  • if you're trying to underline, you need to tell it to. Currently all you're doing is changing the color. Commented Sep 14, 2016 at 18:43
  • @webeno I'm trying to show the font color=red with this code, on snippet works fine, but on CodePen link and on my browser not, doesn't matter what I do the font color always is black. Commented Sep 14, 2016 at 18:45
  • @Keith That's what I want, that's what I write "to underline my text (change font color) ." Commented Sep 14, 2016 at 18:46
  • I don't get it, underline and changing font color is not the same action in my world... also, I see no underlining or font color change in the snippet either, to be honest... nonetheless it's useless for you to define color red twice, once separately for print, if it's defined by default, and you don't want it to be different in print, it will just pick up whatever that selector has been set to, ie. there will be no difference between the browser view and print, assuming that's what you wanted to achieve... Commented Sep 14, 2016 at 18:49

3 Answers 3

Reset to default
5

This is what you need. Some sites have their own media print so you need to add -webkit-print-color-adjust: exact; to your media print and !important it to make sure it overrides any other media print.

http://codepen.io/anon/pen/JRXEko

<div id="draw">
  <button id="click">Click me</button>
</div>

<hr />
<button onclick="window.print();">Print</button>

.highlited {
  color: red;
}

@media print {
  .highlited {
    color: red !important;
    -webkit-print-color-adjust: exact;
  }
}

$('#draw').on('click', 'p', function () {
   if($(this).hasClass("highlited")) {
      $(this).removeClass("highlited");
   } else {
      $(this).addClass("highlited");
   }
});

$('#click').click(function () {
  var html = "";
  html += '<p>I want to be red...</p>';
  html += '<p>Me too...</p>';
  html += '<p>Ok... Me too...</p>';

  $('#draw').html(html);
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That's it! Thanks!
-webkit-print-color-adjust: exact; is exactly what I needed. I put it in my body. Thanks!
1

Your issue is that the p tags are not on the page until you have clicked #click. Try this instead:

$(document).on('click', '#draw p', function () {
if($(this).hasClass("highlited")) {
      $(this).removeClass("highlited");
   } else {
      $(this).addClass("highlited");
   }
});

https://jsbin.com/fetumucero/edit?html,css,js,console,output

Improve this answer

1 Comment

Nope, the problem was what Keith said, but thanks for your help!
0

Maybe the codepen?

View explaple plnkr: 

plnkr.co/edit/NZrYQdGNOntaVwkvK4ZH?p=preview

regards!

Improve this answer

1 Comment

Yes! but on my browser doesn't work, thats the reason of why I'm asking here what can be the problem, because I have @media print but doesn't work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.