We Keep Coding

How to stay in same scroll position when adding items to the top of a div?

I want when the user scrolls from the bottom to the top of a div to load more items into that div to the top part of the div and I want to maintain the scroll position (or rather make sure the top item before adding more items is still visible after adding the items)
For example if I have item 100 on the top and 100 more items has been loaded into the div then I want item 100 to still be the focus of the scroll position, currently when I add items to the div it jumps to item 200...
I'd love to get help with this issue, thanks in advance :)

I found this answer useful, I just created the same logic but in React
jquery - keep window from changing scroll position while prepending items to a list?

Move element from one parent to another with animation

I'm trying to create a custom carousel. The way it works is that the items are contained in two "piles", both piles contain the same items.
When you click the "next" button, the topmost item from the second pile moves to the top of the first pile. The last item in the first pile will then move to the bottom of the second pile, meaning both piles always contain the same number of items.
When clicking the "prev" button it needs to perform the reverse animation.
When moving items from the second pile to the first, this needs to happen with an animation.
I created a fiddle here https://jsfiddle.net/n109rpp0/3/ with the HTML I have produced so far, but I am struggling to work out a way to do the animation.
I'm not sure if I've taken the right approach, e.g. by having the items duplicated in two ul elements. Also how do I ensure the items are cycled in the correct order?
Does anyone have any ideas on how I should go about this?

Here is a quick idea how to achieve what you want. Add this:
$(prevItem).animate({left: '-345px', top: '-30px', width: '+=50px', height: '+=50px'});
$(prevItem).css('zIndex', '1');
to your next button functionality.
You need to play with the code to make perfect transition.
Here is an updated fiddle
Google animate function for jQuery and you will find more examples

div element should scroll down till it gets in contact with another element

I've an div element #1 which stick on top the screen while scrolling. Thats working so far. Now further down on the page there is another element #2 and the element #1 should stop scrolling when it gets in contact with #2. To illustrate the scenario I made a sick picture with my paint skills.
Do somebody have an idea how to do it?

$el1.offset().top + $el1.outerHeight();
this will give you the bottom position of first div. Now When you scroll check if taht bottom position of first div is less than top position of second div. if it is less its ok but if it is greater than you can do whatever you want with first div. You can hide it on make its position absolute.
$(window).scroll(function(){
var bott = $el1.offset().top + $el1.outerHeight();
if(bott > $el2.offset().top){
$el1.css('display','none');
// OR
$el1.css('position','absolute');
}
});
hope this helps

Move all elements which overflow a div horizontally into another

I have a "menu bar" (for lack of a better term) which is basically a fixed width ul at 980px. The li elements are populated on page load, and contain an image, a span, and a divider (for the next li).
If there are too many li elements, they overflow onto the next line. I want to prepare for such an event by running some JS/jquery after the list is populated to move all of the overflow elements into another div, which will essentially be a css hover menu with the elements inside it (it will say '...view more' or similar).
My initial approach has been to check, after populating the menu, if the menu's total width exceeds a certain number, and if so, to append the last element to the new div for overflow. This function would either loop with a variable checking the width of the menu, or call itself recursively, whichever. I got the basic functionality working with an if statement, but it was a single iteration to test - the last element got moved to the div successfully. Unfortunately, when I tried to iterate it (loop or recursive) the browser seemed to go into an endless loop in the js and never loaded the page properly.
A version of my current attempt looks like this:
/**code for populating etc happens here ... then calls trimList(); */
function trimList(){
var menuWidth = $('#menu').width();
if(menuWidth > 700){
$('#menu li:last-child').appendTo('#overflowList');
trimList();
}
}
With this version or with a while loop the browser eventually crashes, but I'm not sure why. I'm sure it's something obvious.
I'd like to either fix my current implementation, or do it some other way (perhaps - if width is longer, grab ALL elements that push beyond that width, and throw them in the div. All at once, rather than iterating. But I'm not sure what the best way to grab the first offending (boundary pushing) element would be.)
I'm sure this is something simple, I'm just struggling to figure out what's causing the issue now.
Thanks
edit: see below - fixed my issue

Fixed it!
The issue was that the 'overflow' div was inside the menu div and my CSS selectors targeted all descendants. So, after the first iteration, every subsequent .appendTo targeted the one which had already been appended. The stopping condition would never be reached, and it iterated endlessly..stack overflow.
For clarification, my answer involved changing $('#menu li:last-child') to $('#menu > li:last-child). Works great now.

error offset().left in null or not an object [duplicate]

I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left

Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/

If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.

You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/