We Keep Coding

Scrolling ul to specific li

I have an unordered list #ul with set max-height and overflow-y: scroll it houses a lot of list tags with unique id's like #item-1.
I am trying to figure out a way to scroll this ul element to specific li if it is selected, so far I've tried
let ul = document.getElementById('ul');
let li = document.getElementById('item-1') // can be item-2 etc..
ul.scrollTo(0, li.offsetTop)
But I get error saying that scrollTo is not a function.
Please provide vanilla js solutions only.
HTML showing what I have at the moment: https://jsfiddle.net/axu8eywr/1

You have the Scrolling functions confused.
It's either:
window.scrolTo(x,y) - https://developer.mozilla.org/en/docs/Web/API/Window/scrollTo
(element).scrollIntoView() - https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

jQuery before adding elements act strange

Please go to the jsfiddle: here.
Click the last image with the "+" sign, this will open a popup with an ADD button, please click it.
The problem is, and I can't figure it out, why if I add multiple elements (clicking the ADD multiple times, like 4-5 times) the distance between the new elements is smaller than the distance between the predefined elements? I am using the same CSS for it, the same HTML structure.

The reason for that is that <li> tags have a natural spacing.
You have a few options:
Either stop using li tags and use something else.
<li> tag for each row, like it should be.
Change natural <li> behaviour
li {
display: table;
}
Edit:
Another option, as mentioned by Florin, is:
a {
float: left
}
Anyway, it's all about the li behaviour. There are many ways to solve it.

You use inline-block for the images.
The images are layout by using display: inline-block.
In your HTML code you have whitespace between the images. That whitespace is shown in the website.
The programmatically added images are inserted without whitespace between them, so they are nearer together.
Check here for strategies against the whitespace:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/

I discovered that if I add to the a tags:
a {
float:left;
}
it will remove the unwanted whitespace.

(".menu") or ("menu") JQuery/JavaScript

I've just started learning JQuery/JavaScript and I can't figure out the difference between using (".menu") and ("menu") and where I should use them?

it is menue, jquery uses css selectors to select elements. .menu means select all elements that have a class .menu ans $('menu') means that select element with a tag menu which I don't know about but can be div, p, body etc.

give custom style to neighbours li with same class (active)

I'm trying to give a custom style to neighbours items with the same class, this is the example on jsfiddle
i tried this code, but this gives style to the second, not the first or middle items ..
ul li.active+li.active div {
border-radius: 0 50% 50% 0;
}
the second line describe what i want to do exactly, the same idea if there is more than 2 active items ..
how could i do that using css !

It is the nature of CSS that selectors are cascading, and that, selectors can only be used to identify elements 'beneath' or following the referenced node.
The only available sibling selectors are + (immediate following sibling) and ~ (following siblings), you cannot select a preceding or parent element.
If you wish to select both the preceding and following elements, you will need to resort to e.g. jQuery
$('.active').prev('.active') and $('.active').next('.active')

Changing the position of a li element with a given class inside an ul?

I have a ul with several li elements, one of them will always have the class "active". How can I make the li.active element to always appear on top of the list?
I cant't control the html output that produces this list, so I would have to do this with css (preferably) or javascript/jquery.
I guess there is not a way to do this with css, but it would be great to have some kind of position-in-list property.
Thanks a lot!

If we assume the height of the list items is going to be constant (and that is a pretty big assumption):
ul {
position: relative;
padding-top: 2em;
}
li {
height: 2em;
}
li.active {
position: absolute;
top: 0;
left: 0;
}

If (and I think you do) you need to manipulate a list item's actual order, as you're guessing, CSS alone won't cut it. You're tagging this post with 'jquery' so I guess you know about that library's selectors and so on. Surely you just need to (a) select the li element with the class "active" and then (b) insert said item at the top of the unordered list? This is perfectly do-able in jQuery. Here's a (VERY) simple way of doing it:
$('ul').prepend($('.active'));
All this does is grab the first element on the page with the class 'active' and prepends it to the first unordered list. This is probably too simplistic for your needs, but hopefully it will help you find a more robust solution.