CODEWITHSUNDEEP
jquerycss
daru79
daru79

Reputation: 31

CSS transform scale property

I have a big problem. I try to resize all fonts on my page. This code below works fine in EDGE / CHROME, but not in FF :/ I have no clue whats the problem with that code...

$('#zoom_in').click(function() {
    $('body').css({
        '-moz-transform': 'scale(1.5, 1.5)', /* Moz-browsers */
        'zoom': 1.5, /* Other non-webkit browsers */
        'zoom': '150%' /* Webkit browsers */
    });
});

$('#zoom_reset').click(function() {
    $('body').css({
       '-moz-transform': 'scale(1.0, 1.0)', /* Moz-browsers */
        'zoom': 1.0, /* Other non-webkit browsers */
        'zoom': '100%' /* Webkit browsers */
    });
});

Thanks in advance!

Upvotes: 0

Views: 183

Answers (1)

Bhavin Shah
Bhavin Shah

Reputation: 2482

$('#zoom_in').click(function() {
    $('body').css({
      'font-size' : '150%',
        'zoom': 1.5, /* Other non-webkit browsers */
        'zoom': '150%' /* Webkit browsers */
    });
});

$('#zoom_reset').click(function() {
    $('body').css({
       'font-size' : '100%',
        'zoom': 1.0, /* Other non-webkit browsers */
        'zoom': '100%' /* Webkit browsers */
    });
});
body{
  margin:0;
  padding:0;
  text-align:center;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  font-size:100%;
}

button{
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="zoom_in">Zoom In</button>
<button id="zoom_reset">Zoom Reset</button>

<p>
  Some Text
</p>

It works fine in my Mozilla Browser. Kindly check this code. Hope this helps.

Upvotes: 2

Related Questions