Firefox is not running Jquery’s . css() method, how to fix it?

Asked

Viewed 175 times

0

I’m using this script Jasny-bootstrap.js, 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>
<script src="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>
<div class="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 gets max-height = 68px, and when I go in Firefox the image does not get max-lenght. (Does not resize and should resize as in Chrome)

How to solve this little problem?

I’m getting the impression that this section of js 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))

Some solution?

javascript jquery firefox

  • Everything seems to be all right here...

  • @Jorgeb. vc ran on Chrome and Firefox?

  • Both of us and it worked...

  • so it is my firefox, but how to treat this so that it does not occur in the client to have these errors? type in Chrome the image is resized correctly and in firefox not, how to treat you know? @Jorgeb. could help me?

  • after all does not work in firefox...

  • the issue is that in Firefox the image does not resize, not arrow the max-height on the tag <img> which is generated by Jasny, @Jorgeb.

Show 1 more comment

2 answers

1


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

This is a standard (default) Chrome CSS (and I believe Safari based browsers as well).

In other words, by .css("border-bottom") it returns empty in Firefox and the parseInt does not make the conversion empty, it returns NaN, any mathematical calculation with NaN will return NaN, why Firefox does not work.

As in Chrome .css("border-bottom") he returns 0px none rgb(51, 51, 51) the parseInt converts him to 0 then the mathematical calculus will work.

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

NOTE:

As I mentioned before I sent a pullrequest https://github.com/jasny/bootstrap/pull/444 to fix the code and finally it was approved https://github.com/jasny/bootstrap/commit/feea0e59b58cab170aefa5608ee976117c4b4f4b (after almost 3 months), a "release" has not yet been released, but it is possible to download the files from the folder directly from the repository:

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);
    }

  • Correct thanks I believe I’ll settle here

  • @Tiagoferezin finally they accepted the pullrequest I sent, updated the reply

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>
<script src="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>
<link href="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 console of browser you see that both libraries have not been properly loaded due to lack of jQuery (mandatory requirement):

Uncaught Error: Bootstrap’s Javascript requires jQuery

Uncaught Error: Jasny Bootstrap’s Javascript requires jQuery

  • unfortunately nothing has changed

  • this error does not in my firefox, does not point out any errors, just do not attack the style to img q i want

  • already changed now runs on Chrome and dps runs on Firefox to see the difference, I want it to happen the way it is on Chrome @w00t

  • Okay, I’ve seen the difference. You can show the part of the jQuery script where you do the image processing?

  • I think that’s what’s inside Jersey // if parent has max-height, using (max-)height: 100% on child doesn't take padding and border into account&#xA; 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))&#xA; &#xA; preview.html($img) @w00t

  • I don’t do in my jquery, I’m letting Jasny do it, but I wanted to know how to treat it.

Show 1 more comment

Browser other questions tagged javascript jquery firefox

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