Firefox is not running the Jquery .css () method, how to fix it? [closed]

Question

Firefox is not running the Jquery .css () method, how to fix it? [closed]

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am using this script a>, in that code snippet

<head>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.js"></script></head><body><divclass="container col-md-6 fileinput fileinput-new" data-provides="fileinput" id="btnImagem">
  <div class="col-md-6" style="padding-top: 45px;">
    <span class="btn btn-info btn-file"><span>Imagem</span>
    <input type="file" />
    </span>
  </div>
  <div class="col-md-6" id="imagem" style="padding-top: 35px;">
    <span class="fileinput-preview" style="max-height: 68px;"></span>
  </div>

</div>
</body>

The problem is that in Chrome the image that is inserted is with max-height = 68px, and when I go in Firefox the image does not get max-lenght. (Do not resize and resize as in Chrome)

How to solve this problem?

I'm having the impression that this js snippet does not run in Firefox

 if (preview.css('max-height') != 'none') $img.css('max-height', parseInt(preview.css('max-height'), 10) - parseInt(preview.css('padding-top'), 10) - parseInt(preview.css('padding-bottom'), 10)  - parseInt(preview.css('border-top'), 10) - parseInt(preview.css('border-bottom'), 10))

Any solution?

javascript jquery firefox

asked by anonymous 04.03.2016 / 20:26

2 answers

0

Includes reference to jQuery before Bootstrap and Jasny:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css" rel="stylesheet" />

With the current code, if you use the browser console you see that both libraries were not properly loaded due to lack of jQuery (requirement required):

Uncaught Error: Bootstrap's JavaScript requires jQuery

Uncaught Error: Jasny Bootstrap's JavaScript requires jQuery

05.03.2016 / 16:55

Error while trying to upgrade Visual Studio 2015 / Framework to version 4.6.1 Dynamic Multiselect with bootstrap

score 1 · Accepted Answer

It is not a bug of .css , in fact it is a feature that is different in Firefox and in Webkit (or Blink) that by default Webkit has in the border: property the value 0px none rgb(51, 51, 51) in any element, already in Firefox (gecko) border: is always empty.

This is a default CSS default for Chrome (and I think of Safari-based browsers as well).

In other words, when you get with .css("border-bottom") it returns empty in Firefox and parseInt does not convert empty, it returns NaN , any mathematical calculation with NaN will return NaN , so no Firefox does not work.

As in Chrome .css("border-bottom") it returns 0px none rgb(51, 51, 51) parseInt converts it to 0 so the mathematical calculation will work.

The problem is not from jQuery or Firefox, the problem is with the library jasny-bootstrap

NOTE:

As I mentioned earlier I sent a pullrequest link to correct the code and finally it was approved link (after almost 3 months), a "release" has not yet been released, but it is possible to download directly from the repository the folder:


link

A brief solution is to do this:

    // if parent has max-height, using '(max-)height: 100%' on child doesn't take padding and border into account
    if (preview.css('max-height') != 'none') {
        var mh = parseInt(preview.css('max-height'), 10) || 0
        var pt = parseInt(preview.css('padding-top'), 10) || 0
        var pb = parseInt(preview.css('padding-bottom'), 10) || 0
        var bt = parseInt(preview.css('border-top'), 10) || 0
        var bb = parseInt(preview.css('border-bottom'), 10) || 0

        $img.css('max-height', mh - pt - pb - bt - bb);
    }