Increase, Decrease and Print Button

Asked

Viewed 57 times

0

I’m using the bootstrap and by default the font is 1rem when I click the print button it doesn’t take the standard document size it takes a very small font, to mount the increase and decrease font button I’m using a jquery Jfontsize does it have something that disturbs it to catch the right font size.

Someone can help me?

     $('a, p, h1, h2, h3, h4, h5, h6, img, figcaption, footer, span, li, ul, ol, td, th, tr').jfontsize({
        btnMinusClasseId: '#jfontsize-m2', 
        btnDefaultClasseId: '#jfontsize-d2', 
        btnPlusClasseId: '#jfontsize-p2', 
        btnMinusMaxHits: 1,
        btnPlusMaxHits: 3, 
        sizeChange: 5
    });

jquery.jfontsize-2.js

(function($) {
  return $.fn.jfontsize = function(opcoes) {
    var $this, apply, current_size, defaults, save;
    $this = $(this);
    defaults = {
      btnMinusClasseId: "#jfontsize-minus",
      btnDefaultClasseId: "#jfontsize-default",
      btnPlusClasseId: "#jfontsize-plus",
      btnMinusMaxHits: 10,
      btnPlusMaxHits: 10,
      sizeChange: 1
    };
    if (opcoes) {
      opcoes = $.extend(defaults, opcoes);
    }
    save = function() {
      return $.jStorage.set("jfontsize", current_size);
    };
    apply = function() {
      return $this.each(function(i) {
        var fontsize, size;
        if (!($(this).data("initial_size") != null)) {
          fontsize = $(this).css("font-size");
          fontsize = parseInt(fontsize.replace("px", ""));
          $(this).data("initial_size", fontsize);
        }
        size = $(this).data("initial_size") + (current_size * opcoes.sizeChange);
        return $(this).css("font-size", size + "px");
      });
    };
    $(opcoes.btnMinusClasseId + ", " + opcoes.btnDefaultClasseId + ", " + opcoes.btnPlusClasseId).removeAttr("href");
    $(opcoes.btnMinusClasseId + ", " + opcoes.btnDefaultClasseId + ", " + opcoes.btnPlusClasseId).css("cursor", "pointer");
    current_size = $.jStorage.get("jfontsize", 0);
    if (current_size === (-opcoes.btnMinusMaxHits)) {
      $(opcoes.btnMinusClasseId).addClass("btn-secondary disabled");
    }
    if (current_size === opcoes.btnPlusMaxHits) {
      $(opcoes.btnPlusClasseId).addClass("btn-secondary disabled");
    }
    apply();
    $(opcoes.btnMinusClasseId).click(function() {
      $(opcoes.btnPlusClasseId).removeClass("btn-secondary disabled");
      if (current_size > (-opcoes.btnMinusMaxHits)) {
        current_size--;
        if (current_size === (-opcoes.btnMinusMaxHits)) {
          $(opcoes.btnMinusClasseId).addClass("btn-secondary disabled");
        }
        apply();
        return save();
      }
    });
    $(opcoes.btnDefaultClasseId).click(function() {
      $(opcoes.btnMinusClasseId).removeClass("btn-secondary disabled");
      $(opcoes.btnPlusClasseId).removeClass("btn-secondary disabled");
      current_size = 16;
      $this.each(function(i) {
        return $(this).css("font-size", $(this).data("initial_size") + "px");
      });
      return save();
    });
    return $(opcoes.btnPlusClasseId).click(function() {
      $(opcoes.btnMinusClasseId).removeClass("btn-secondary disabled");
      if (current_size < opcoes.btnPlusMaxHits) {
        current_size++;
        if (current_size === opcoes.btnPlusMaxHits) {
          $(opcoes.btnPlusClasseId).addClass("btn-secondary disabled");
        }
        apply();
        return save();
      }
    });
  };
})(jQuery);
  • I don’t know if it will, but go to the end of your CSS and put a @media only print { body { font-size:1rem !important;} } and test it in the print preview to see if it solves there.

  • he still leaves the fountain small :/

  • Do you want to decrease or increase in print? If it is to decrease it has to be @media only print { body { font-size:0.5rem !important;} } for example...

  • 1

    actually the increase and decrease works what is giving problem is that when I click on the button to return the font to normal and click on print the font gets small, I do not want to lock in time to print a font size, I want that if the user increases the font he can print large

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.