I'm using the jScrollPane plug-in along with my SmartAutocomplete (https://github.com/laktek/jQuery-Smart-Auto-Complete) and i'm appending the Autocomplete results into my main containing div for jScrollPane so the user can scroll through them.
This works, but my problems is when a new set of data is appended to my jScrollPane the height (scroll area) does not update, it always stays the same height.. so items are either cut off or there is a large amount of white space at the bottom.
I've looked at the demo for their dynamic content example but can't get this to work: Demo here
Anyone have any ideas?
The property you are looking for is the autoreinitialize property. You need to call something like:
$('#idofyourcontainer').jScrollPane({ autoReinitialise: true });
when changes are being made to your container.
Related
I have a page containing a list of items:
Load more button should load some more items via ajax and append it to the items container preserving current scroll position. So after I click it the feed I expect it to look like this (green items are new):
But in fact Chrome 56 executes some computations to make the page stay in the same state, and what I see looks like this:
Is there any way to prevent this smart scrolling position setting in Chrome?
Update: I can reproduce the behavior only if parent container ('body' in my case) has 'display: flex' property (I use it to achieve 'sticky footer' feature).
I solved a similar problem by adding overflow-anchor: none; to the scroll container.
https://wicg.github.io/ScrollAnchoring/
Today it seems that this property was excluded? When adding 'overflow-anchor: none;' as style on a div element I get the message: Validation (CSS 3.0): "overflow-anchor" is not a known css property name.
This is simple. Before performing your AJAX call, save the scroll position of the page to a variable, then, after the call, scroll to the position indicated by that variable. Here is what you should write before your AJAX call:
var scrollpos = window.scrollY;
and here is the code after your AJAX call
window.scrollTo(0,scrollpos)
Hope this works
Why chrome makes calculations to preserve the scroll position? Usually the page will only be longer, so the scroll position stay fixed anyway.
I assume you remove the button, so the position cannot be kept, while content was not reloaded. You should reserve the button space in the dom and remove the reserved space when inserting the reloaded items.
Any idea how make a layout like google plus or facebook. You can see at google plus home as example,
at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.
Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).
One technique (which many are based on) is like so (in brief)..
Capture the browser's scrolling
Get the position from top of chosen element (x)
Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.
The same will work in reverse, for example:
var target = $('#div-to-stick');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.addClass('fixed');
}
else {
target.removeClass('fixed');
}
}
Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.
Hope this helps.
The new approach with css3 is reduce your effort. use single property to get it.
position:sticky;
here is a article explained it and demo.
article
Demo
You are looking for CSS position:fixed (for the scroll-along sidebar), you can set the location with left:[length], right:[length], top:[length], bottom:[length] and the normal width and height combos
You will need to augment it with a window resize and scroll listener that applies the position:fixed property after the window has scrolled past the top of the sidebar.
Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.
I have a table with a fixed layout. The columns take up more space than is available so a horizontal scroll bar appears. Currently you can move around in the table using the keyboard arrows. But when a cell is selected that is not in view I need to programmatically tell the scrollbar to move. I thought this would be scrollleft but is not settable and is always zero. Instead I have achieve my desired effect by using scrollIntoView(false). This works but I still want to know why scrollleft was not working.
Please see my fiddle. The function you may want to use is called scrollLeft()
http://jsfiddle.net/ydj5E/
jQuery Docs: http://api.jquery.com/scrollLeft/
MDN: https://developer.mozilla.org/en/DOM/element.scrollLeft
We needed a footer toolbar that stays at the bottom of the page, and sticks to some area when page is scrolled below that area.
We did achieved this using following script:
fixed div on bottom of page that stops in given place
But there is an issue on some page where the footer toolbar just disappears from the page, and then appear again when page is scrolled down further.
We found that this particular issue appears only on few page, when the page has some contents like Images, Video, or Ajax load other content where the content is filled in (or space is being filled) after page has loaded.
I have no clue how to fix this.
Here is the link from live site with problem page.
http://www.sandiegopchelp.com/services/cellphone-repair/htc/
http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/
http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one/
It is usually more visible on blog posts with many comments. May be due to Disqus comments being loaded after the page has loaded completely.
How does this look?
http://jsfiddle.net/LukeGT/NxSc3/
$(window).scroll(function() {
$('#bar').css('position', 'static');
console.log($('#bar').position().top);
console.log($(window).scrollTop() + $(window).height());
if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) {
$('#bar').css('position', 'fixed');
}
});
setTimeout(function() {
$('#extra').show();
}, 1000);
I simulated the late loading of images by just showing a few extra divs after 1 second. I believe the problem arises from the fact that the height of the page changes after the code for the bar runs, so it's behaving as it should if the page were shorter (without the images/ajax etc).
What I do instead is position the bar in it's place at the bottom of the page each time the page is scrolled, calculate its height from the top there, and compare this with the scroll height. If we're too far up, it positions the bar in a fixed position at the base of the page, and otherwise leaves it alone. It works smoothly in Chrome, but I haven't tested elsewhere.
I guess this is a problem with the $(window).height() function. Check here. For all the dynamic contents like Images, Video or Ajax-loaded content the height is not added to the result of $(window).height() unless it is specified somewhere in the HTML or CSS (and from the referred link I see this happens only in Chrome. You might want to confirm on this though). To those dynamic contents you can either try adding the height attribute in html or height attribute in the corresponding style.
This is not the answer but i have found something while inspecting your website...
This is you actual HTML when its working fine as you want..
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: fixed; ">
but when it is not working, the Position attribute is changing from Fixed to Relative .
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: relative; ">
you can check you script for that or post you script here...
At initial state, your div is in position: relative so its offset is based on the container element, not on the total height of the page. The variable stickyOffset is set based on that relative offset, that is why it gets clip down sooner than expected while scrolling and also why it works in your JSFiddle as the container there is the page (Iframe) itself.
In your $(document).ready function, you'll need to add the offset of not only the footer but also the rest of the offset on top of the containing element so that the offset is based on the total page instead of the containing div.
Hope that helps.
By looking at your example on http://www.sandiegopchelp.com/services/cellphone-repair/htc/ using chrome, I can see that your footer disappears when it gets at the "related links" section. At this moment, you set the position of the footer to "relative" so it will replace it in the regular flow of the document and its position is actually below the "related links" section which is why it disappears off screen (below "related links").
but you calculated the position at which it should become relative on page load only where you should have recalculated it after having added the "related links" section as it changes the page height (I understood that you added afterward, am I right?).
Try adding a zero height div just above the position of the sticky div, which will remain at that position as the page resizes, then check that position as you scroll to determine the position where the sticky div should stop.
Finally got it fixed by two techniques, setting explicit height wherever possible using CSS and delaying jQuery function after all images are loaded. Refer this: Delay some jQuery function until all images are loaded completely
I installed jScrollPane on my website and can't make it work.
My website works as follows: from the main page, pages are loaded dynamically using jQuery's load() method. In the page I load I have the following script to launch jScrollPane:
$(function(){
$('.scroll-pane').jScrollPane();
});
Which seems to be called. No problems so far I guess. The problem is that the page, at the beginning, is not long enough to need a scrollbar. I have hidden content that shows up only on specific actions (i.e. clicking on a button shows the content of a certain paragraph), and when I click to show the content of a hidden div, the scrollbar doesn't appear.
I also tried to call $('.scroll-pane').jScrollPane(); as I show the new content (i.e. in the event that triggers .show() on the hidden div I also call $('.scroll-pane').jScrollPane();) but I had no success with that either.
Can anyone help me?
Thanks
EDIT:
I forgot to mention the structure of the page: I have a div which has class="scroll-pane" and is loaded with the page load and it contains small hidden divs that show up when clicking on particular areas. I would like to add a scroll bar to the div with the class scroll-pane in order to make the content of the showed div scrollable (right now the content stays in the size of the div but it's not scrollable since no jScrollPane scroll bar is shown).
Update:
I tried to put $('.scroll-pane').jScrollPane(); in the callback of the .show() method of my divs and tried to put class="scroll-pane" to those divs that appear, but again nothing is shown (the scroll bar doesn't appear and the div is not scrollable).
Check this demo provided by the developer of the plugin
http://jscrollpane.kelvinluck.com/examples/invisibles.html
When the element is first shown you simply have to (re)initialise the
scrollpane (or you could even use autoReinitialise if you like) and
its width and height will be calculated correctly.
All that you need is
$(function(){
$('.scroll-pane').jScrollPane({autoReinitialise: true});
});
and may be the recent version of the plugin
I suggest to use css visibility property instead auto reinitialising. Each time you call show() method, jScrollPane reinitialises itself. This takes time and has impact on animation.
If you use, say, slide..() methods, then animation starts properly, but scrollable container (and its elements) appears little bit later, and that looks bad.
var wrapper = jQuery('#gallery-album-preview-wrapper');
if (wrapper.css("visibility") == "hidden") {
wrapper.css("visibility", "visible").css("display", "none");
}
if (wrapper.is(":hidden")) {
wrapper.slideDown(1000);
} else {
wrapper.slideUp(1000);
}