Position div using Jquery on doc load without seeing it move

Question

How do you position a div using Jquery without seeing it noticeably move from its original position? As I understand it, the Jquery selectors only work in the ready function, which means there is a slight delay between the DOM showing and the jquery function being called to move the div. I want the div to be moved instantly without any noticable transition AND no delay in it being shown.

Why not have the div hidden initially, move it and then show it using .show()? — simnom, Oct 03 '11 at 13:08
Hi, its for an overlay which I want to appear at the same time as all other elements on the page. If I do this won't there be a slight lag between the move, then show? — jaffa, Oct 03 '11 at 13:49

score 0 · Answer 1 · answered Oct 03 '11 at 13:09

0

You can make the div invisible by giving display:none with css, and at the time when DOM is loaded relocate it and show it.

This will also prevent the page reflow.

answered Oct 03 '11 at 13:09

Headshota

21,021
11
61
82

Hi, see my comment to simnom above. – jaffa Oct 03 '11 at 13:49

vzwick · Answer 2 · 2011-10-03T13:16:39.847

0

jQuery selectors do work outside of domready as well as demonstrated in this fiddle).

So, You could to this:

<div id="mydiv">Content</div>

<script type="text/javascript">$('#mydiv').css({'position' : 'absolute', 'left' : '55px'});</script>

I don't quite get though, why you wouldn't position the div by pure CSS in the first place.

Edit: Under no circumstances should you render the div invisible via CSS and display it via JS only. Rather use .hide() on the element early in the page load.

edited Oct 03 '11 at 13:16

answered Oct 03 '11 at 13:09

vzwick

11,008
5
43
63

I’d say in some circumstances is perfectly acceptable to do that – it always depends on the actual case. – margusholland Oct 03 '11 at 13:19
If by "some circumstances" you mean "displaying a 'Your browser supports JS!' to the user in a
", I do agree.
– vzwick Oct 03 '11 at 13:29
@vzwick - I use ASP.NET Mvc view model attributes from the server as I'm saving its xpos/ypos to session state. So when I move the overlay, its position is stored on the server. When a new page is loaded, I want to give the impression the overlay is always there rather than a div which is loaded slightly after onto the page. – jaffa Oct 03 '11 at 13:52
@jaffa well, that seems like a legit use case. – vzwick Oct 03 '11 at 13:52

score 0 · Accepted Answer · answered Oct 03 '11 at 13:11

To my knowledge, the only way to reliably achieve this is to render the <div> element initially hidden, and show it only after it was moved. For instance:

<div id="yourDiv" style="display: none;">
    <!-- ... -->
</div>

$(document).ready(function() {
    $("#yourDiv").appendTo("#targetContainer").show();
});

However, doing that breaks graceful degradation / progressive enhancement: if Javascript is disabled on the client, the <div> element will remain hidden in the page.

score 0 · Answer 4 · edited May 23 '17 at 12:03

If you execute your code when the document is ready and not when it's loaded, the delay between rendering the dom and executing your code is minimal, because (as answered in other questions : What is the difference between $(window).load and $(document).ready?), the ready event fires after the dom is constructed.
My point is that you can rely on $(document).ready and reposition your elements, because in most cases it won't be noticeable.
Here's a live demo showing that you can dynamically position an element "any noticable transition AND no delay in it being shown".

If you're still not convinced that this is the right thing for you, you should probably hide your elements and show them only after you've repositioned them.

Position div using Jquery on doc load without seeing it move

4 Answers4