Adding and removing content in jQuery - javascript

If I create a function with jQuery that adds an empty div, performs some animation inside the blank space created by the div, then removes the div, the browser never makes room for the empty div (height and width are set).
If I don't remove the empty div in my function, then the browser will create the needed space and everything works correctly. However, I really need the blank space created by the div to be removed when the animation is complete.
Is there a way to queue up the div removall so that the browser will show the desired behavior?

Some jQuery effects have callbacks, which will are run after the effect, for example:
$('#someDiv').slideDown(100, function() {
$(this).remove();
});

By doing a Google search on jQuery and setTimeout, I found an example which sent me down a different track. The problem occurs, I think, because the div manipulation is on a separate selector from the actual animation. This causes the div to be created and removed even while the animation is still occuring. By adding a simple animate statement to the div which delays the removal until after the main animation completes, then I can achieve the desired effect.

Doesn't it work if you use a setTimeout ?-)

The problem is that the DOM isn't updated until your function ends. So using setTimeout will cause the dom to update and 100ms later the rest of your function can continue. If you don't want the new div to be seen, I'd set the position to absolute and the top to something like -5000. It will have dimensions etc, just wont' be visible. You can also set the visibility (in css) to hidden just incase you are worried it will show up on screen.

Related

How do I make a smooth transition when moving an element from margin-left:-9999px to the page?

Here's some more details - due to some weird restrictions with the YouTube API, I am forced to push a container off the page to give the impression of hiding the container.
I achieve this by using this class:
.my_hide{
margin-left:-9999px;
position:fixed !important;
}
And by using the JQuery methods $("player-list_container").removeClass("my_hide") and $("player-list_container").addClass("my_hide") to control the toggling.
However, the toggling looks jaunty, and the container jumps up once the class is removed. I want to be able to transition smoothly from one state to the other, and am at a loss for how to do it.
This behaviour can be demonstrated here
Add a video by typing in and searching for anything, and then hit the Play button located below. You should observe the behaviour described.
Iam assuming you 'are not able to'/'not want to' manually hide the container but want to change its position so that it is outside the boundaries of the page and it looks hidden.
In that case changing the position property will definitely give you a jumpy instead of a smooth effect since this affects the whole layout of the page (Read more). What you can instead do is change its position using CSS3 animation's translate property.
Here's a demo I've coded which does exactly what you want.
http://codepen.io/anon/pen/EgcIi
The "Click me" button toggles between taking the container off and on the page and it does it smoothly. You can also adjust the time which it takes to change the position of container. (As of now its 500ms)
I want it to look like the container is fading in in position meaning I would have to get the container to that position before using any type of animation function.
Then, don't throw the element way off the page with CSS. Leave it where it is, and hide it with .hide(). Then fade it in with .fadeIn().
You'll need to manually size the container, as it won't expand to contain a hidden element.
On my screen it just popped up. Im not 100% sure what type of pop in effect you want but that said, check out http://api.jquery.com/animate/
i was going to code up an example but that page has a bunch!
good luck!
PS: scroll down for all the visual animation examples.
Here is some sample code:
$('#myBtn').click(function(){
$( '.ytv' ).fadeTo( "fast", Math.random() );
//add animation code here;
});
check out a rough fiddle.
edit: heres a rough example: http://jsfiddle.net/somdow/Lef9n/2/
just click the red area to the right of the video
Animate function in jQuery wll help you

Will the element be visible If it is added to DOM and instantly removed?

Will the element be visible even for a blink of an eye If it is added to DOM and instantly removed?
var feed = $('<div class="entry"></div>').text(data.status).appendTo(app.twitter_feed);
console.log(feed.height());
feed.remove();
I've tried the above code on a few browsers and couldn't see the element. But is this behaviour consistent through all platforms/browsers?
After reading your previous question as well, it seems that you very badly want to calculate the display height of an element before actually displaying it. I 'm not entirely clear why you want to do this (it gives off a bad smell), but here's how to anyway.
Put a <div> in your page with height: 0, overflow: hidden, and the desired width of your element¹. Add the <div> we 're talking about inside that outer helper div (it will not show no matter what), and get its height after the browser performs layout. After that you can proceed however you want (e.g. by moving the inner <div> to another position in the DOM tree).
¹ it would be best to put it exactly where you want the .entry to end up (i.e. the .entry and the helper div will end up being siblings).
PS: It's always better for everyone if you mention your real purpose.
I can imagine a situation wherein for the browser to be able to compute the element's effective height, it will have to render it on the window, or at least have the element's box reflow against the current site layout. It might not be visible (as, yeah, it's instantly removed), but a situation like this will reflow the page, and the movement of the affected elements on the page can be seen.
Images come to mind, for example, because browsers generally have no idea what the dimensions of images are until they try to lay them out (correct me if I'm wrong there though).
So, no, I wouldn't say that this is consistent behavior.
Implement it like this. Make a clone of app.twitter_feed, and send it to hell (Coordinates: x:-30000, y:-30000) and try whatever you like there.
var cloneTWFeed = $(app.twitter_feed).clone();
cloneTWFeed.css("position", "absolute").css("top","-30000").css("left","-30000");
var feed = $('<div class="entry"></div>').text(data.status).appendTo(cloneTWFeed);
console.log(feed.height());
feed.remove();
You current code works just fine, but you never get to see the element, since just after you append it, you remove it.
The browser sees it, by the time that he takes to remove it, just after being appended.
See this working Fiddle Example!
There I've replaced the console.log with an alert() to force the browser to wait for my response, thus enabling me to see the element on the page.
Note: Also works fine with console.log(), given me the 18px of height.
You either have the remove() wrapped on a timer to actually see the element (visually), or if the HTML markup is to intense, or the desired effect is to only collect data from the element, place your element inside an hidden one, that way you can remove it whenever you've done collecting data from it.
If what you must acheive is an height measurement, try to add the element without visibility (see CSS:
http://reference.sitepoint.com/css/visibility)
In a zone of the page that causes no problems on the element flow.

jquery "empty" changes the scrollbar

i am updating content with ajax call from server.
after the update, i empty the wrapper div, that contains the data, and fill it again with the new data.
so far so good.
the problem is - that on a
$('#MessagesContainer').empty();
method - the scrollbar changes back up.
so if someione want to add data and he is in the bottom of the page, the scroll goes back up.
this action makes sense, but for this particular action i want to avoid it since it's not so "user-friendly".
you can use $('#MessagesContainer').html('');
This may work.
If the container you are emptying is almost all the content in the site that behaviour makes sense since for a millisecond the browser doesnt need a scrollbar.
Try just append a new container with the new messages and then remove the old one, in that way the user wont have any changes to the scroll state. Howere if the user was looking at something below the message container and there are more messages now than before the user might have to scroll down some.
Give you #messagecontainer a height with css. or depending on the layout add a second div with a min-height inside the scrolling div and then update the content of the inner div.
Add a height or min-height css property to the #MessagesContainer div this will mean that even when the contents are empty it still maintains a reasonable height on the page - this will keep the srollbar present
well, thanks for your answers.
use .html() would probably be better than .empty() and re-append the data.
but, the thing is that for my implementation that is not possible.
so what i did is implemented
.RemoveAfter(x) function
that remove all the elements after index 'x' in the collection and then append data from this 'x' index. that did the trick. the scrollbar stays where it is. it's not 100% percent user-friendly since it make some of the data disappear for a milisecond and then it comes back, but at this currently point, it's the best i could think of.

Insert content at top of page without scrolling

Is there a way that I can insert content at the beginning of a webpage without causing the page to give the impression of scrolling up.
I'm trying to implement something kind of like infinite scrolling but I need to be able to scroll up infinitely as well as down (I'm also unloading content on the other end so that the scroll bar doesn't become infinitesimal and the app doesn't take up too much memory).
I'm happy to use javascript, I'd rather not use a library (I'm trying to stay lighter weight than that).
Any ideas?
Before executing the code to create your element, simply do something like this:
var scrollY = window.scrollY;
window.onscroll = function(){
window.scrollTo(0, scrollY);
window.onscroll = null;
};
Keep in mind that, if you already have an onscroll function, you will need to reassign the function after this...
In my case layout was something like this:
<div class='container'>
<div class='list'>
product cards...
</div>
<button>Load more</button>
</div>
By clicking on button I want fetch data from server, dynamically create product cards with that data and add this cards to .list
Problem was that when dynamically cards added to the DOM, screen automaticaly scroll and I see only last added cards, but not first added.
I think its default behavior for all browsers (I may be wrong) - if content added in DOM above the focused element browser scroll page in order to focused element was on screen. If content added below the focused element scroll not happened and the focused element also on the screen.
To solve this problem I just add something like document.activeElement.blur() before add cards to the DOM and all was fine.
You can use window.scrollBy(x, y) to scroll down when you add content (you have to calculate the height of what you add).
One possible idea is to bypass the scroll mechanism completely and do your own.
Basically, position every element with display: fixed. You can then load elements above the screen using negative positions.
You'll have to sync the height of the document (just by adding white space) so the document scrollbars are correct. Then, you trap the scroll event and adjust the fixed positioning of all the elements within your page.
I'm not sure how smooth it will be, but I'm fairly certain you could get the effect you're looking for.
I solved it by saving the first element of the container in a variable and then after inserting I called "scrollIntoView" on it. Looks smooth to me.

Prevent "jump to Top" on jScrollPane

I am using the jScrollPane jQuery-Plugin on a -Box which is dynamically filled with content.
My problem is that on adding new content to the front of the old content, the maintainPosition option does not work. So I wrote my own code that moves the Scrollhandle back to it's original position.
The code works fine, but calling reinitialise() after adding the new content moves the handle to the top of the container just before my code reverts it's position. This results in a short flicker of the displayed content which is very disturbing.
Does anyone know a method to prevent the scroll handler to move to the top after calling "reinitialise()"?
Because noone has answered this question yet I've created a jsFiddle with my problem:
http://jsfiddle.net/hB4hE/1/
the calculation done on the second prepend link seems to solve the problem.
But if you run it StepByStep you see that the scrollbar is moved to top first.
Because I prepend many elements in my real environment this jumpy behavior is often visible.
So do you have an idea how to prevent it from jumping?
I didn't find any integrated solution to this, so I created a workaround:
1. calculate height of prepending elements
2. prepeding new elements
3. instantly scrolling down a distance equal to the height of the new prepended elements
Try using this setting: maintainPosition then you don't have to reposition yourself.
More information: http://jscrollpane.kelvinluck.com/settings.html#maintainPosition

Categories