Develop Reference

JQuery slim scroll doesn't scroll to the last element

I have a dashboard with a left-side bar. The bar has a lot of elements in it (including inner lists, etc). Obviously, it didn't fit in such a small area. The solution was to use a slim scroll by JQuery. The problem I have encountered, though, is unavailability to scroll to the very last element inside the bar.
The bar looks like this (without scrolling)
Now take a look at how it looks when inner elements are open:
See? The very last element cannot be seen properly (although it is clickable). Unfortunately, the only way to "fix" it is perphaps use some parameters, while initializing this stuff. Now it looks like this:
$('.elemToAddScrolling').slimScroll({
height: '100%',
wheelStep: 5,
});
Basically I see that the library generates div elements - one of them is slimScrollBar - exactly what I look for. I see that it has top property, and whenever I scroll it alters. The maximum value, though, is 107px (when we reach "the end"). I use the latest version of this plugin - 1.3.8 Is there a way to customize it really?

The issue was reproduced here.
So it was clear that it was a padding issue from a parent element. Now which one? In the codepen, it was the body... In J. Doe's project, it was on an outer wrapper were he found a 44px padding.
The issue was fixed by applying a margin-top:-44px to the inner container... To move the whole thing up.
But, another way could have been to apply height: calc(100% - 44px) in the slimScroll settings! It can take it, as you can see it here.

horizontally fixed column is lagging on IE

Im trying to build comparison table from vertical lists.
Main goal is that first column must be fixed horizontaly only and horizontal scrollbar must be visible on screen all the time. I want to easy compare rows of first column with corresponding rows from other columns
like here jsfiddle example
I've managed to do this by using position absolute on 1st column and changing its css left property on scroll event.
$('#container').scroll(function() {
$('#main').css('left', $(this).scrollLeft());
});
That solution works fine except IE. On IE my fixed column is lagging and changing position is not smooth. I'm trying to fix it but i've run out of ideas for solution.

A part of the problem might derive from the fact that attaching anything to the scroll event can be quite heavy, just attaching a console.log() to it can be enough to understand the amount of calls.
You should give a try the solutions proposed in this thread, which will surely make it lighter on other browsers apart from IE as well.
I know you're searching for smoothness, you could animate the left property instead of changing it instantly, or finding a way to only do the smooth transition on IE, keeping it as is in the other browsers.
One other thing you could try would be will-change, but sadly it's not supported by IE. You could try giving transform:translate3D(0,0,0) to #main to trick the browser into using hardware acceleration, which might raise the performance on IE11.
--EDIT
Another thing that came to mind:
I can see you need to have the div absolutely positioned and not fixed since you need to scroll down while keeping it aligned with the other tables. Couldn't you use JS to give it position:fixed while scrolling horizontally and go back to absolute when the user scrolls vertically or stops scrolling horizontally?

Flexbox layout - multiple lines if long enough

I have this layout with flexbox:
However, when the content in one of the columns of the first line increases, I don't get what I want. This next image explain what I get and what I want:
Basically, I want box 3 to span multiple lines, if needed, without changing the position of box4
Please help me into this. Thanks

This thing is not possible using Flexbox. You Should Use lots of Available JQuery plugins.
You can Check it out following JQuery plugins.
1.) Packery.
2.) MCPants.
3.) Gridster.
4.) Masonry.
This are some of the available plugins which will give you, Your desirable output.
You can also find other plugins on search engine.
Hope it helps.

Flexbox doesn't work this way. It won't randomly fill out to use minimum height. The calculations required by your browser would slow everything down, if it is even possible to have the browser guess what you want precisely. You'll have to adjust your design I'm afraid.

Flexbox won't do what you need but you still can use them.
Here's what it would look like so below explanations will be easier to understand :
Create 2 containers that will display inline-block. The 1st (blue blocks) is 75%, the 2nd is 25%.
Blue blocks are in a flexbox. Set the flex rules as you need it.
The red block has is own container, style it as you want too.
Based on the images you posted, blue blocks 1 and 2 are flex: 1 and flex: 2, that means block 1 will always be 25% of its parent. This is why I set 25% to the red block container.
Check fiddle for full CSS : https://jsfiddle.net/Paf_Sebastien/dyxtq144/

Split Ajax animation

I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.

I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.

Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.

Floating various shaped divs together into rows

I have a large containing element with around ten DIVs inside - most are about 300px in width on average and are all set to float left. The end result is a widget/grid type layout. However, this style has been specifically built with responsive design in mind - we're using media queries to adjust the size and column count depending on device.
The issue is that we may have one or two boxes that are double-wide or double-tall. The double-wide doesn't really cause a problem with floating (that I can't solve anyway) but the issue is the double-tall. The double-tall would expand into the next row, but prevents other boxes from floating on the left of it. Float-right isn't an option because the tall box can't always be on the right.
I'm trying to find a way to dynamically figure out where each block can float to, like solving a puzzle. I've looked at a few javascripts like Masonry, jLayout, etc but they either don't work, or don't solve the problem of irregular boxes.
So:
I want to avoid absolutely positioning anything because we'd have to re-do that every time, for every element and they won't feel fluid.
I need to allow for double-wide and double-tall, but they may not always be present and eventually, users should be able to determine their location so we can't always just write javascript based on a known location.
I've tried moving around the elements via jQuery which does work, but has to be done on window resize, which is too much activity and results in elements flickering back and forth when you transition over the width that requires three columns to four.
Using css3 columns won't work because the DIVs are treated as text and are broken into two when they pass to the next column, and that doesn't allow for double-wide either.
Does anyone have any ideas or suggestions?

Use Jquery Masonry or Isotope, it'll arrange all the containers into the most space saving arrangement ( or if your using isotope, you can fiddle it around to prioritise other forms of arrangement)

Well, if you don't care too much about the order of your elements, a simple solution would be this:
Add your items to #main so that all .tall widgets are added first. Float .tall widgets to the right.
Likewise, make sure that all .wide widgets are added last and float these to the left.
It works in this case and I think will give you the most optimal use of space for any set of these elements.

I still have not found any real way to handle the situation. For now I've just written some custom javascript to swap around a few DIVs when the page resizes.