New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Relative percentage values (+= / -=) work in .animate but not in .css #1711

Closed
mgol opened this Issue Oct 16, 2014 · 2 comments

Comments

Projects
None yet
3 participants
@mgol
Member

mgol commented Oct 16, 2014

Originally reported by jwagner: http://bugs.jquery.com/ticket/14484

.css({'left':'+=50%'})

...moves the item by 50 pixel instead of 50%, while

.animate({'left':'+=50%'})

...works as expected (adds 50%).

The docs suggest that .css and .animate should behave identically ( http://api.jquery.com/css/):

As of jQuery 1.6, .css() accepts relative values similar to .animate().

If "similar" should really mean "similar" but not identical, it would help to give a hint in the docs that relative percentage values are not supported by .css.

The problem shows up in current Chrome, Firefox and IE10.

Fiddle to reproduce: http://jsfiddle.net/2VGgg/

@mgol mgol added the Bug label Oct 16, 2014

@mgol mgol added this to the 3.0.0 milestone Oct 16, 2014

@mgol

This comment has been minimized.

Show comment
Hide comment
@mgol

mgol Oct 16, 2014

Member

Original discussion:

Changed 12 months ago by timmywil

Priority changed from undecided to blocker
Status changed from new to open
Component changed from unfiled to css
Milestone changed from None to 1.11/2.1
This looks valid.

comment:2 in reply to: ↑ description Changed 11 months ago by francomalatacca

Replying to jwagner@…:

.css({'left':'+=50%'})

The problem is that style function that is called by css function doesn't care about percentage. A fix could be by adding support for this by checking if there is the % symbol at the end of value. If so it should compute the percentage of the parent width. I fixed the bug with something

        if ( type === "string" && (ret = rrelNum.exec( value )) ) {
            // Fixes bug #14484
            if(!/[%$]/i.exec(value) ) {
                value = (( ret[1] + 1 ) *  ret[2]) + parseFloat( jQuery.css( elem, name ) );
            } else {
                value = parseFloat( jQuery.css( elem, name ) ) + (parseFloat(jQuery(elem).parent().css("width")) * (( ret[1] + 1 ) * ret[2]/100));
            }

            // Fixes bug #9237
            type = "number";
        }

Thanks. Franco

comment:3 Changed 10 months ago by gibson042

Owner set to gibson042
Status changed from open to assigned
comment:4 Changed 8 months ago by gibson042

Milestone changed from 1.11/2.1 to 1.11.1/2.1.1
comment:5 Changed 6 months ago by anonymous

This is reproducible for other unit "em"

There are other not so popular units like "cm","in" etc.

Need fix for them too

comment:6 Changed 6 months ago by dmethvin

Milestone changed from 1.11.1/2.1.1 to 1.12/2.2

Member

mgol commented Oct 16, 2014

Original discussion:

Changed 12 months ago by timmywil

Priority changed from undecided to blocker
Status changed from new to open
Component changed from unfiled to css
Milestone changed from None to 1.11/2.1
This looks valid.

comment:2 in reply to: ↑ description Changed 11 months ago by francomalatacca

Replying to jwagner@…:

.css({'left':'+=50%'})

The problem is that style function that is called by css function doesn't care about percentage. A fix could be by adding support for this by checking if there is the % symbol at the end of value. If so it should compute the percentage of the parent width. I fixed the bug with something

        if ( type === "string" && (ret = rrelNum.exec( value )) ) {
            // Fixes bug #14484
            if(!/[%$]/i.exec(value) ) {
                value = (( ret[1] + 1 ) *  ret[2]) + parseFloat( jQuery.css( elem, name ) );
            } else {
                value = parseFloat( jQuery.css( elem, name ) ) + (parseFloat(jQuery(elem).parent().css("width")) * (( ret[1] + 1 ) * ret[2]/100));
            }

            // Fixes bug #9237
            type = "number";
        }

Thanks. Franco

comment:3 Changed 10 months ago by gibson042

Owner set to gibson042
Status changed from open to assigned
comment:4 Changed 8 months ago by gibson042

Milestone changed from 1.11/2.1 to 1.11.1/2.1.1
comment:5 Changed 6 months ago by anonymous

This is reproducible for other unit "em"

There are other not so popular units like "cm","in" etc.

Need fix for them too

comment:6 Changed 6 months ago by dmethvin

Milestone changed from 1.11.1/2.1.1 to 1.12/2.2

@dmethvin

This comment has been minimized.

Show comment
Hide comment
@dmethvin

dmethvin Nov 26, 2014

Member

@gibson042 can you get to this soon?

Member

dmethvin commented Nov 26, 2014

@gibson042 can you get to this soon?

@gibson042 gibson042 closed this in 9b03f6d Mar 9, 2015

gibson042 added a commit that referenced this issue Mar 9, 2015

CSS: Support relative adjustment in any applicable unit
Fixes gh-1711
Closes gh-2011

(cherry picked from commit 9b03f6d)

Conflicts:
	src/css.js
	src/effects.js

@dmethvin dmethvin modified the milestones: 1.12/2.2, 3.0.0 Jan 7, 2016

@cssmagic cssmagic referenced this issue May 18, 2016

Open

jQuery #5

@lock lock bot locked as resolved and limited conversation to collaborators Jun 19, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.