Bug Tracker

Modify

Ticket #7701 (closed bug: invalid)

Opened 3 years ago

Last modified 2 years ago

reinit css value for "top,bottom,left,right"

Reported by: anonymous Owned by: anonymous
Priority: undecided Milestone: 1.6
Component: unfiled Version: 1.4.4
Keywords: Cc:
Blocking: Blocked by:

Description

if you applied a value for top and left on a element and later, if you want to positionned this element with bottom/right it doesnot work event if you give an empty,null,auto,undefined value to top and left value.

Change History

comment:1 Changed 3 years ago by jitter

  • Owner set to anonymous
  • Status changed from new to pending

Thanks for taking the time to contribute to the jQuery project by writing a bug report.

Please submit a valid reduced test case, which reproduces the issue you are experiencing, on  http://jsfiddle.net. So that we can investigate this issue further.


 How to report bugs

comment:2 Changed 3 years ago by anonymous

  • Status changed from pending to new

You can see this bug here:

 http://jsfiddle.net/KQYz6/1/

comment:3 Changed 3 years ago by danheberden

  • Status changed from new to closed
  • Resolution set to invalid

Thanks for taking the time to investigate this particular case. However, it isn't a bug, but rather - an issue of positioning in the browser.

Its similar to a css declaration, where if you have top and left defined along with right and bottom, it's hard to the browser to know quite what you mean. Particularly if the element has a fixed width.

So in the case of your example, if you think of it from the browser's perspective, how can it position it bottom/right when it's already top/left?

First, relinquish control over top/left. Something like

.css({top: 'auto', left: 'auto' })

will let you use the bottom/right stuff.

One note, though, these kind of animations can be a pain. Youll have to (just as you would with css) compensate for the bottom/right if you had it positioned top/left - e.g. the left of a 100px box in a 600px container is 100px, where the right is 400px. Just a heads up if you run into jumpy animations :D

Here's your demo, but with the top/left set to auto:

 http://jsfiddle.net/danheberden/9t9FZ/

Last edited 3 years ago by danheberden (previous) (diff)

comment:4 Changed 3 years ago by anonymous

Thanks for your reply.

I already tried : ".css({top: 'auto', left: 'auto' })" it doesnot work.

More over, the difference between positionning div element at the bottom right corner with top/left proprieties rather than bottom/right proprieties is when the user enlarge is browser window:

With bottom/right proprieties it's always at the bottom right corner, with top/left proprieties it doesnot.

It really be nice if jQuery could do this staff by removing css "top,bottom,left,right" proprieties before updating them.

comment:5 Changed 3 years ago by danheberden

Did you see my example? Where positioning bottom/right works?

It would be cool if jquery reset these values, but then the cases of what if you only give a bottom param? Then for everybody ever setting top, right, bottom or left the element's dimensions have to be calculated, reset, stored, and that adds overhead for every possible call.

This is one of those cases where from a performance perspective, it makes much more sense (performance wise) to write your own function to handle that (assuming you're doing it more than once), that is, get the items dimensions, create new bottom/right values based of its current top/left with regards the dimensions of it's parent and then make your animation call.

Anyway, hope this explains it well :)

comment:6 follow-up: ↓ 7 Changed 3 years ago by nicolas.albert@…

In JQuery <= 1.4.2 you can clear a previously set style with ".css('key', 'value')" with ".css('key', null)".

In JQuery > 1.4.2 you need to use ".css('key', )".

Tested for left, top, position, z-index, width, height !

comment:7 in reply to: ↑ 6 Changed 3 years ago by nicolas.albert@…

Replying to nicolas.albert@…:

In JQuery > 1.4.2 you need to use ".css('key', )".

I mean empty chain :

.css("key", "");

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.