Databases
StackOverflow2013
Postsdbo
POFirefox behaves strangely when changing an element's position (CSS left, right, top, bottom) using jQuery.animate
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFirefox behaves strangely when changing an element's position (CSS left, right, top, bottom) using jQuery.animate
    primarykey
    data
    text
    <p>Consider the following fiddle in Firefox: <a href="http://jsfiddle.net/rawKC/1/" rel="nofollow">http://jsfiddle.net/rawKC/1/</a></p> <p>Click the red rectangle and see how it moves. It disappears at once, then warbles out of nowhere somewhere at the top and comes to a stop at its proper end point. The expected behaviour (as can be seen in Chrome, for example) is to wander to its end point in a straight line, changing size as specified in the animate call.</p> <p>The rectangle is absolutely positioned using the left, right, top and bottom attributes. This is also how its size is determined. Upon clicking, the wrapper's positioning attributes are changed. I have no idea why the animation doesn't work in Firefox.</p> <p>I can think of a number of workarounds, but I would like to find out what's wrong with this particular use case. Does anybody have an idea?</p> <p><strong>EDIT</strong></p> <p>It seems like the containing element's styling is of no importance at all. Only the moving element behaves strangely. I've updated the question and fiddle accordingly.</p> <p><em>Code snippets for reference:</em></p> <pre class="lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;&lt;/div&gt; </code></pre> <pre class="lang-js prettyprint-override"><code>$(function() { var $wrapper = $('#wrapper'); $wrapper.click(function() { $wrapper.animate({ bottom: '85%', left: '2%', right: '75%', top: '2%' }); }); }); </code></pre> <pre class="lang-css prettyprint-override"><code>#wrapper { bottom: 35%; left: 18%; position: absolute; right: 18%; top: 35%; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMartin Denk
    1. USMartin Denk
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COI was under the impression that Firefox required explicit declaration of at least two attributes when using position:absolute;. Perhaps adding a left:0 to your #content will help?
      singulars
      1. POFirefox behaves strangely when changing an element's position (CSS left, right, top, bottom) using jQuery.animate
      1. USPlantTheIdea
    2. COThat does not seem to do anything to fix the behaviour, and also keep in mind that using top rather than bottom seems to be okay. I just found something interesting out, though, I'll update the question.
      singulars
      1. POFirefox behaves strangely when changing an element's position (CSS left, right, top, bottom) using jQuery.animate
      1. USMartin Denk
    3. COYou can actually keep clicking the rectangle, it'll start a new animation each time, even though the position attributes never change again. What on earth is happening here?
      singulars
      1. POFirefox behaves strangely when changing an element's position (CSS left, right, top, bottom) using jQuery.animate
      1. USMartin Denk
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload