jQuery CSS remove negative value

Question

I'm using jqLite in AngularJS.

Basically I'm adding some custom CSS properties like this:

$scope.$on('scrollEvent', function(){

     if (a < 5){
        a = a + 1/20;

        $element.css({
           '-webkit-filter': 'blur('+ a +'px)',
           'margin': '-'+ a +'px'
        });
     }

     if (inView()){
        a = 0;

        $element.css({
           '-webkit-filter': '',
           'margin': ''
        });
     }
  })

I can't change or remove margin property value because it's negative, it will get changed only if it's positive.

Why is that?

If you're using angular, then you have to make a directive for that. — Vucko, Jul 05 '15 at 09:17
@Vucko I have updated my queston, there is no need for including the whole directive since it's working expect this particular behavior when setting CSS properties. — Jack, Jul 05 '15 at 12:03

score 0 · Answer 1 · answered Jul 05 '15 at 09:01

0

But it won't work neither with '0px'.

Could not reproduce. .css() appear to reset margin property to 0px at stacksnippets ?

var a = 12;

$("div").css("margin", "-" + a + "px");
// set `div` `margin` to `0px` after three seconds
setTimeout(function() {
  $("div").css("margin", "0px");
}, 3000)

div {
  position:relative;
  width:50px;
  height:50px;
  background:orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>abc</div>

answered Jul 05 '15 at 09:01

guest271314

1
15
104
177

It works in Jquery, but i'm using jqLite in AngularJS, which won't override a property with a negative value. – Jack Jul 05 '15 at 09:13
What is "jqLite" ? `jquery` tag appear at Question ? – guest271314 Jul 05 '15 at 09:14
A slimmer version of jQuery: https://docs.angularjs.org/api/ng/function/angular.element – Jack Jul 05 '15 at 09:16
@Jack See https://docs.angularjs.org/api/ng/function/angular.element at `.css()` _"As a setter, does not convert numbers to strings or append 'px'."_ Tried setting `style` attribute of element utilizing `js` without jqLite or jQuery ? – guest271314 Jul 05 '15 at 09:18
Hmmm, now i'll try using JS. – Jack Jul 05 '15 at 09:24
Are you specifically coding for mobile only devices or in some way concerned about the download size of JQuery, If its the former fair Enough, If its just a size thing then just causing yourself pain. You could use a CDN version and chances are the browser may already have have JQuery downloaded. Anyway its typically only a one time hit if you add cache headers. You could always minify an image or two in the rest of your site to make up for the difference in size between the two libraries. – Code Uniquely Jul 05 '15 at 09:24
@CodeUniquely Actually i'm developing for a hybrid mobile app. So including the whole jQuery lib could decrease UI performances. – Jack Jul 05 '15 at 11:51
@Jack _"Hmmm, now i'll try using JS."_ Does using `js` to set `margin` return expected results ? – guest271314 Jul 05 '15 at 16:17
@guest271314Nope, same result. Interesting fact, if i inline manually margin:-5px; i try to change it using JS or jQuery i can't do it. Only when the value is positive. – Jack Jul 05 '15 at 16:23
@Jack _"Nope, same result. Interesting fact, if i inline manually margin:-5px; i try to change it using JS or jQuery i can't do it. Only when the value is positive."_ Can create plnkr http://plnkr.co/edit/?p=catalogue , jsfiddle http://jsfiddle.net/rnL84/ to demonstrate ? – guest271314 Jul 05 '15 at 16:29
@Jack _"i try to change it using JS or jQuery i can't do it."_ Could not reproduce at jsfiddle http://jsfiddle.net/0f9kzb2k/ . `margin` appear to set, unset utilizing `js` without jQuery, jqLite . – guest271314 Jul 05 '15 at 16:47
@guest271314 I made in plunkr an example and works: http://jsfiddle.net/A8Vgk/1668/, i really don't get what i'm doing wrong. The most interesting fact is that this happends only if i set an negative value. – Jack Jul 05 '15 at 17:24
@Jack _"I made in plunkr an example and works: jsfiddle.net/A8Vgk/1668"_ Not certain interpret "and works" correctly ? Is Question resolved ? jsfiddle not appear to utilize `js` only , instead of "jqLite" ? – guest271314 Jul 05 '15 at 17:34

jQuery CSS remove negative value

1 Answers1