We Keep Coding

Intersection Observer not working as expected for horizontal scroll (X-axis)

I'm using lozad.js which internally uses intersection observer for lazy loading images. I have a carousel where I need the images on next slide which are not on viewport yet to be loaded to better the performance of the website.
Basically load n+1th slide image while on nth slide.
if ($(".lozad").length) {
var observer = lozad('.lozad', {
threshold: 0,
rootMargin: '400px 0px'
})
observer.observe();
}
currently i'm using above code, all the pictures in website are loading as they approach viewport, 400px away vertically.
But horizontally, In a carousel it loads only the slide comes in contact with the viewport.
Event when I give root margin of 400px on all sides,
rootMargin: '400px'
it works fine for all other components vertically(loads images 400px away from viewport) but in carousel it still loads the image when the slide comes in contact with viewport (not 400px away).
There is a similar question in link below
Intersection Observer rootMargin not working as expected on x-axis
the answer says to 'specify the root element to be a direct ancestor of the target.'
But what value can I set for root while using it in website using lozad for all the images inside it.
Am I missing something or Is there any way to modify root margin so that in carousel while I'm on "nth slide, n+1th slide" be loaded for smooth transition in carousel.
Tried changing rootMargin and root values but it doesn't work as expected.

Perfect scrollbar continues to be displayed even after content is reduced

I am trying perfect scrollbar. The scrollbar works fine... it starts display of the scrollbar when content exceeds.
...BUT!
When content is deleted to be less than the div's height, I would expect the scrollbar to go away. It does not. It goes only after the dragger is moved up or the rail above the dragger is clicked on.
To let the scrollbar go right away after the content is deleted, does this require use of the eventhandlers and be done programmatically in Javascript? I would have expected this to be a default behaviour. There is nothing much to show in code but here is how I initialize it:
const ps = new PerfectScrollbar('#editDiv', {
maxScrollbarLength: 60,
minScrollbarLength: 30
});
I had initially changed the CSS to alter the width of the scrollbar and change colors. Just to be sure, I reinstalled the CSS with zero changes just to check this behavior. And its still the same.
EDIT: Try with the browser's default scrollbar. The scrollbar goes as soon as the content is deleted to be less than div's height.

Use ps.update() if the content changes.

How do I stop the page from expanding when animating an element so it slides in from off screen?

I'm making my first website and I've run into a problem I can't easily fix as I'm not sure how to phrase a google search for it. I need to slide images into the page without making the scroll bar appear or, rather, without the page expanding in width to encompass the newly appeared image while it slides in.
Here's the actual test version of the page:
http://test.dingac.com/accommodation.html
The part I need help with is the sliding of the pictures when you click on the arrows next to the blueprint for each apartment in the accommodation tab.
If you want to look at the code, the relevant code is in the JqueryAnimate.js file but keep in mind, the comments aren't in English, I'm new to this so the code is a bit weird and the CSS isn't fine tuned yet. I've posted the relevant code snippet further down. My current issue is the slide animation. The way I did it right now is for all the images to be there from the start but all but one have display:none. When you click the arrow to the right it fades out and slides out the current picture (using Jquery) and turns on the display of the next picture (which is positioned relatively at left: 2000px) while animating it to left:0px.
In the moment the new image appears, the page sees that a new element is on the page and not everything is being displayed so it expands the width of the page to encompass the off-screen picture. This is only an annoyance on desktop as it only makes the scroll bar appear, but on mobile it makes the whole page zoom out until the new picture is on screen and then zoom back in as the picture slides in.
$("#buttonRight"+apInd).click(function(){
if(status[apInd].circleIndex!=status[apInd].numApPic){
status[apInd].Picture.fadeOut({duration: 1000, queue: false}).animate({left: '-2000px'},1000);
status[apInd].NextPicture.fadeIn({duration: 1000, queue:false}).animate({left: '0px'},1000);
status[apInd].PreviousPicture=status[apInd].Picture;
status[apInd].Picture=status[apInd].NextPicture;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circle");
status[apInd].circleIndex++;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circleSelected");
status[apInd].NextPicture=$("#apPicture"+apInd+"-"+(status[apInd].circleIndex+1));
}
if(status[apInd].circleIndex===status[apInd].numApPic) //hiding/showing arrows when at the edge of the selection
{
status[apInd].arrowDisplay="left";
$("#buttonRight"+apInd).css("opacity",0).css("cursor","default");
}
else
{
if(status[apInd].arrowDisplay!=="both")
{
status[apInd].arrowDisplay="both";
$("#buttonRight"+apInd).css("opacity",1).css("cursor","pointer");
$("#buttonLeft"+apInd).css("opacity",1).css("cursor","pointer");
}
}
});
What I need is for the page width to stay constant or, more specifically, that there be no zooming in mobile and no horizontal scroll bar on desktop.

Use overflow: hidden (or, for more fine grained control, overflow-x: hidden) in your CSS.
For example, if this is the HTML of your page:
<body>
<div id="page-wrap">
Contents
</div>
</body>
You can use overflow like so:
#page-wrap {
overflow-x: hidden; // hides horizontal overflowing elements
overflow-y: auto; // shows scrollbars if the content vertically overflows
}
Link to MDN

Try to add an overflow:hidden on the span with id="apImgBox"

First slide doesnt show in jQuery Royal Slider within tabs

I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks

The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.

Centering text in a touch scroller

I modified a version of the iScroll touch scroller. It was modified based on the carousel demo in the sample file when you download the library.
I need to center the text that is displayed when you scroll through each item and when it hits the end of the list it should correctly cycle back to the first item. This is the default behavior.
I got as far as centering the first text item but it only centers the text in the currently selected item and when another item is selected it breaks the text centering, this also breaks the snap back to first element effect when the list is done. I did this by simply adding a margin
margin:0 250px.
A sample of the modded scroller is here: http://jsfiddle.net/egfx/5TswV/2/show/
buggy code: http://jsfiddle.net/5TswV/3/
And the library is here: https://github.com/cubiq/iscroll/tarball/master
my resolution: 1600x1200
I am looking for a stretchable solution that would fit any container and res.
Thanks.

Here is your problem: Your Li's are smaller than your container, if you find a way to make the li's the same width as the container, everything will be aligned correctly.
http://fiddle.jshell.net/5TswV/5/show/
http://fiddle.jshell.net/5TswV/5/
Using jQuery:
$('#scroller li').width($('#wrapper').width());
$(window).resize(function(){$('#scroller li').width($('#wrapper').width())});