We Keep Coding

Scroll jumps to the bottom of the page after resizing text

I have an Angular 8 project, which receives list of products from the server. Since the number of products per user might be very large, I'm making request and displaying to user only first 20 items, but when he reaches the bottom of the container, I'm uploading 20 more items. For scroll detection I'm using infinite-scroll library. Everything worked fine until I've added another library, that autoresizes product title to fit container width. After adding it, scroll started automatically jump to the end of the container (to the latest uploaded item) and because of that it triggers uploading of another bunch of additional items. Before adding autoresize, users were staying on the same place (at the end of the first 20 items).
I have already tried next steps:
Removed infinite-scroll and wrote my own method to detect when user
reaches end of container to upload new items. Result: same behavior
with scroll drop.
Removed fittext library and wrote my own directive to resize text
label. Result: same behavior with scroll jump.
Tried to switch overflow on container to hidden to prevent scroll,
tried to change scrollTop value.
Nothing helps. Scroll is still jumping to the end each time new items are loaded. But when I'm removing autoresize feature - everything works fine, except I don't have autoresize..
Maybe someone had similar issue or have any ideas about how to prevent that scroll jump?
Thanks!
This is my html:
<div class="prizes__wrapper" *ngIf="viewModel.prizes.items.length > 0" infinite-scroll [scrollWindow]="false"
(scrolled)="scrollDown(this.viewModel.prizes, 0)">
<div class="content-wrapper">
<div class="outer__wrapper" *ngFor="let prize of viewModel.prizes.items; let i=index; first as isFirst">
<div class="inner__wrapper">
<div class="prize">
<div class="image-wrapper">
<div class="prize__date">
{{'claim_page_won_title' | translate:(prize.created | date:'mediumDate')}}
</div>
<div class="prize__image" [ngStyle]="{ 'background-image': 'url(' + prize.machineImage + ')' }">
</div>
</div>
<div class="prize-controls">
<div class="title-container">
<p class="title" appTextFit>{{prize.prizeShortName}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Styles for container with overflow:
.prizes__wrapper
height: 100%
overflow-y: scroll
scrollbar-width: none
-ms-overflow-style: none

Adding trackBy on ngFor element helped to fix that issue.
<div class="machine" *ngFor="let machine of viewModel.machines; let i = index; trackBy: trackByFn">

YouTube iFrame unclickable because of margins (Bootstrap)

I have a problem with my YouTube iFrame: it becomes not clickable when I set margin (negative ones). And that is not what I want! I would like the visitor to be able to play the video on my website.
To add a bit more context, it is a Bootstrap website, and the video is in a timeline. I set negative margins, so that I do not lose space on the page. If I do not set margins, I get a left item - everything on the right is blank -, then after scrolling to the end of the first item, I get the second one on the right - but everything is blank on the left, and so on...
I tried to use relative and absolute positions, but it does not work in bootstrap timelines (every item crash together when I change it).
Do you have any idea or clue about this issue?
Here is what my HTML looks like:
<li style="margin-top: -140px">
<div class="timeline-badge"><i class="fa fa-gamepad" id="round"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Solitaire Android app</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> November 2016 - Work in Progress</small></p>
</div>
<div class="timeline-body">
<p style="margin-bottom: 10px;">This solitaire card game is an Android application, that tells the player when there is no more move to do.
This feature exists on iOS but not on Android, as far as I know.
So I wanted to do this to avoid the player to lose time in looking for a solution that does not exist.
You can play by dragging and dropping cards on the screen.
I plan to publish it on the Play Store! </p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A2nMAct2w88"></iframe>
</div>
<p style="margin-top: 10px;"><i>Technologies used: Java, Android</i></p>
</div>
</div>
</li>
And here is a link to my WIP-website, if it can help :)
http://horlogehumaine.net16.net/slegras/code.html

Are you talking about the small video in, say, "Solitaire Android App"?
If so, it's being relatively positioned among other relative/absolutely positioned things that are "covering" it.
Give .embed-responsive a z-index:1;

Where is this styling coming from?

I searched several of the suggested questions that came up when typing this, but I couldn't find an answer to my problem.
I'm using Uikit V2, and I have a div with the Sticky component. Here:
<div class="uk-sticky" data-uk-sticky id="nvbr">
<nav class="uk-navbar-center">
<a class="uk-button" href="#pg5"><h3>Contact</h3></a>
<a class="uk-button" href="#pg6"><h3>AboutUs</h3></a>
<a class="uk-button" href="#pg3"<h3>Services</h3></a>
</nav>
</div>
This works fine on the full screen, but when I resize to a small screen, the bar gets very wide. I open then in the inspector in Chrome and I get this line:
<div class="uk-sticky-placeholder" style="height: 123px; margin:0px;">
Where would this be in my code and how can I fix it? I looked in Uikit and the Uikit.js.
(I should note, that when I am in Inspector, if I change that 123px to say 10px, it looks fine.)
Thanks all.

I think it just counts height based on collapsed elements in the viewport.
https://github.com/uikit/uikit/blob/v2/develop/src/js/components/sticky.js#L286
The thing I would do if I were on your place, I would hide navbar elements on smaller devices with conditional classes and prepare of canvas menu (take a look inside docs).
Or try to take over control with your own js script.

Background image slideshow not working properly

I am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect

It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.

I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.

This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"

How do I get my logo, slideshow and image to cover my entire screen no matter the window size

I would like to get all three of these divs (logo, slideshow, and subslider) to fit the entire screen window no matter the size. I basically want to mimic the background:cover action in CSS but with all three of these elements. From my research I need to do something in javascript but I just can't seem to get it to work no matter what I try. I would also like to note that I am using drupal if that changes anything... Despite reading a lot on the subject, I'm way out of my comfort zone when it comes to trying to understand window resizing issues, any help, advice, and code snippets would be a godsend please!
<div class="logo">
<img src="sites/all/themes/cpd pro/images/cpd.jpg" alt="Center for Passion Development">
</div>
<!-- *************SLIDESHOW***************-- -->
<div id="slider">
<img src="sites/all/themes/cpd pro/images/slide1.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide2.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide3.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide4.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide5.jpg"/>
</div>
<!-- *************BELOW SLIDESHOW IMAGE***************-- -->
<div class="subslider">
<h5><img src="sites/all/themes/cpd pro/images/nav-wrap.png" alt="navigation"> </h5>
</div>

Use vh unit in CSS. 100vh is exactly 100% of your viewport's height, so you can make your 3 divs heights sum to 100vh.