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?
Related
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
I know there are a lot of tutorials to let a div appear after scroll down a certain amount of pixels.
But what I want is to let a div appear when the user scrolls past another div. And when they scroll back up it has to disappear again.
Why not after an amount of pixels? I want to use this for my menubar to appear on the top of my page after the user scrolls past the banner image. BUT when you scale down the browser (mobile, tablet, small screen...) the banner image will scale down to! The image will not be the same height as before. The menubar would appear to late or to earlier;) that's why I want the menubar to appear after that image (div).
Hope you guys can help!
Now that we are talking in abstract terms, I will try to explain to the best of my ability.
Can't you get the current position of the targetDiv (the div, after which scrolling down would show the menubar), and then use the same code of making the menuDiv appear after scroll down a certain amount of pixels.
This answer might help you in getting the current position of the targetDiv.
So, do the following steps and let me know how it went:
1) Get jquery.appear
2) Apply the disappear event on your selector:
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
// this element is now outside browser viewport
});
3) On that event just make the other div dissapear.
$('theStuffToHide').toggle()
4) Final result
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
$('theStuffToHide').toggle()
});
This should be the only thing you need.
Cheers, hope it helps.
You can check for the pageoffset to cross the amount (top offset of the target + height of the target element ) and show the div.
And when the pageoffset comes less that the calculated amount, make the div hide
I am trying to make a list of <li>'s so that when I click on one, it goes up to the top of the page, no matter if it is the last one or if there's just two on the list. I call scrollToElement() but it bounces back because of the lack of padding after the element. I have tried appending a <li> element of height 2000px, but the list will bounce back, making the last element go back to the bottom.
I found the solution, I needed to call .refresh() after appending the padding <li>. Afterwards, it will scroll past the bottom like expected.
I am facing a problem with set scroll bar top position. Actually what I need is; I am using a JQuery Keyboard plugin where for all the elements I need to display the virtual keyboard at the center bottom of the page and its done.
But the problem I am having is when I have a input field near to the bottom of the page where that page does not display the scroll bar (It means there is no need of overflow because all the elements I have is visible in my page). Since I am displaying the virtual keyboard at the bottom of the page and when the focused element also is at the bottom of the page I need to initiate the scroll bar and page should go up by scroll down automatically so active input field element is visible to me.
I tried to set the scroll bar by using this
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where _scroll_top is my current scroll top position, _el_top is focused elements top position, _el_height is my focused elements height and _keyboard_top is the top position of the keyboard.
Now the problem is when I have a more height page (It means scroll bar size is small i.e. scroll bar size may be around 60% of the screen.Height) scrollTop is correctly working and I can see the active input element even though keyboard is visible. But when I have small height of a page (Example: scroll bar size is around 90% or it may be same size of screen.Height) scrollTop is is not working correctly so the active input element is not visible and it is behind to virtual keyboard.
How can I set the scroll top correctly so I will be able to see the active input element then at the bottom of that element I can see virtual keyboard.
Please see the attached image. That is where actually active input element should be displayed.
First Image is Before Enable the keyboard: Just see the element's position, sroll top
Second Image is After Enable the keyboard: Just see the element's position, sroll top
This is what I need when my scroll bar size is big (Around 90% of the screen.Height)
Thanks in advance.
P.S: I am extremely sorry if I confuse by the way I expressed my question.
use jQuery('html,body').scrollTop('other things here');
Thanks for the responses.
I have found the solution for my question.
At the bottom of the page I have created a dummy div element.
<div id="scroll_dummy"></div>
Initially this div will be having zero height. I applied the height of the keyboard to this div. As a result your page size will be increased so it can easily move the scroll top. At the time of close again revert back this style.
Then at the place of I am applying scrollTop I have done this.
$("#scroll_dummy").css("height", _keyboard_height);
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where
_scroll_top : scroll top position
_el_top : active element top position
_el_height : active element height
_keyboard_top : keyboard element top position
_keyboard_height : keyboard element height position
Done with this... :)
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/