We Keep Coding

Using a loading spinner in a Dynamics 365 embedded iframe web resource

I am trying to use a loading spinner in an embedded iframe in a Dynamics 365 application. I am using this library: https://loading.io/button/. I can see that the CSS loads properly, because it shows the spinning icon when had a class of running on the button/div element.
What I'm trying to do is add the "running" class to the button when it is clicked, so the user knows that an action is occurring and they should expect something to happen in the near future. However, when I have code that adds the "running" class to the button, it does not seem to work. Here's my code:
$("#retakeButton").on("click", function () {
$("#retakeButton").addClass('running');
\\\\\\ LOGIC GOES HERE \\\\\\
$("#retakeButton").removeClass('running');
});
And here is my HTML:
<div id="outerBorder" class="container embed-responsive ">
<div class="col-md-12" id="topbuttons">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div type="button" id="retakeButton" class="btn btn-primary hovering ld-over">
<strong>Take Photo</strong>
<div class="ld ld-ring ld-spin-fast"></div>
</div>
</div>
</div>
</div>
<div id="carousel" class="slideshow-container"></div>
<br>
<div id="dots" style="text-align:center"></div>
</div>
What is strange is that if I open the console and select the iframe as the target, I can get it to show the in progress animation by running $("#retakeButton").addClass('running');. However, it doesn't seem to work in the javascript that is referenced by the HTML.

I just tested this, its working.
For clear visibility, I added a border for div, also commented out the removeClass for testing (it may be too fast to notice).
<div id="div_loader" class="btn btn-default ld-ext-top" style="border:solid; font-size:2em">
<div class="ld ld-ring ld-spin-fast"></div>
</div>
$("#div_loader").on("click", function () {
$("#div_loader").addClass('running');
//do some logic
//$("#retakeButton").removeClass('running');
});
One last thing. Problem could be by class hovering - you can remove & test your code.

scrollTop behaves erratically when item to be scrolled to top is last or close to end of nested

I have a problem with scrollTop that partially works that I will try to describe. First to get it work I applied the solution found here.
I have an angular component that renders a list of nested angular components in it using *ngFor. Snippet follows (parent):
<div id="scrollable-container" class="scrollable">
<div *ngIf="isAccountsToShow" class="top-row-spacing">
<div *ngIf="accountsToggle">
<div class="grid-x ruler">
<div class="small-4 cell">
<div class="text-left sub-header">Header 1</div>
</div>
<div class="small-1 cell">
<div class="text-left sub-header">Header 2</div>
</div>
<div class="small-2 cell">
<div class="text-center sub-header">Header 3</div>
</div>
<div class="small-2 cell">
<div class="text-center sub-header">Header 4</div>
</div>
<div class="small-3 cell">
<div class="text-center sub-header">Header 5</div>
</div>
</div>
<div *ngFor="let data of displayAccounts">
<member-product
[memberNumber]="mnum"
id={{data.accountNumber}}
(scrollIntoView)="scrollToView(data.accountNumber)"
[product]="data" </member-product>
</div>
</div>
</div>
</div>
The child's html contains info on each header and in addition a ellipsis toggle at the far right that looks like this:
screenshot of a single element (Apparently I need more reputation points to fully add a screenshot. Hope it helps anyway).
The problem: everytime I click the ellipsis it will expand the account information (NOTE: this is NOT another angular nested component) to reveal even more information AND the account clicked will autoscroll to the top. screenshot of expanded widgetThis works for the first accounts considering that there might be dozens or even hundreds but will fail to scroll only for the last few and it will fail gradually, meaning that it will begin to scroll less closer to the top of its container until the very last item which will not scroll at all. Also it fails when only a few elements are displayed causing no overflow-y where the scrolling simply does not happen.
Scroll code: (I'm using event emitter here as you might have already noticed)
scrollToView(accountNumber): void {
var element = document.getElementById(accountNumber);
var topPos = element.offsetTop;
document.getElementById('scrollable-container').scrollTop = topPos - 10;
}
Css code:
.scrollable {
max-height: 24rem;
position: relative;
}
I not quite sure if this is an overflow-y related issue or what. I am completely puzzled with this.
Searching for this very particular problem in Stackoverflow yielded no results, be it angular be it jquery although it doesn't apply to my angular 2 scenario.
I appreciate any insight or help on the matter.

Adding collapsible sidebar

So I have created my website using Bootstrap. I want to add a facebook-like collapsible sidebar. I have tried to divide my website into two columns. One for the sidebar and other for the whole website using col-md-2 and col-md-10 but the problem that was occurring was the site was being overflown towards the right side. This is what I did:
<html>
<head></head>
<body>
<div class="container">
<div class="col-md-2">...Sidebar...</div>
<div class="col-md-10">...Rest of the website...</div>
</div>
</body>
</html>
But the site was overflowing towards the right side. I tried that with many other col-* but to no avail. I also added .clearfix class to the body but still could not fix the overflowing issue.
Q1. How can I fix the overflowing issue?
Secondly, I want to make the sidebar collapsible. I thought I would do that by hiding the col-md-2 and changing the class of the website holder div to col-md-12 and reversing the thing when the user un-collapses the sidebar but the problem I know that would be occurring is that I would not be having a smooth sliding effect.
Q2. How could I make a collapsible siderbar with a smooth slide effect?
Demo of what's happening.

Q1: Have you tried adding a row after the container?
<div class="contianer">
<div class="row">
<div class="col-md-2">...Sidebar...</div>
<div class="col-md-10">...Content...</div>
</div>
</div>
Q2: You can create you sider bar off the top of the screen and animate it in using jquery to slide it down to where you want it when the menu button is clicked.

Jquery scroller based on mouse position

So I have looked at jquery hover and this is all well and great but how can I use a list into this? The example that the previous user uses is all image backgrounds.
Im not sure if the is in the right place.
<div class="backdrop">
<ul id="year"></ul>
<div class="direction left"></div>
<div class="direction right"></div>
jsfiddle

Since I could not change background position on <ul><li> I decided to use margin here if my solution.

Floats causes lag

On my site I use a grid layout with floated div's. As a pagination transition I use a fade-out. However, I've noticed that, since I started using floating div's the animation lags quite a bit. My lightbox fade-in also lags on the pages with the floating divs. Any idea how I can stop this lag?
Here's a JSFiddle. Please bot that the lag on the animation is more noticeable when there's content in the floats, and on my lightbox which contains a youtube video (the video itself starts too lag)
Layout:
<div id=container>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
<div id=float></div>
​</div>​​​​​​​​​​​​​