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: submenu appears with hover function but not click function

I have a multi-layered navigation the consists of 3 <ul>s nested in each other (obviously a menu with hidden submenus the show on click).
I have created a script to show the 2nd level <ul>s if one of the first is clicked. This works fine:
//CLICK MAIN NAV SHOW 2nd LAYER NAV
$("#ctamenu ul li").not("#ctamenu ul li ul li, .thirdsub").click(function() {
$(this).children('ul').stop().delay(200).slideDown(300);
});//END CLICK FUNCTION
But when I repeat this for the 3rd level <ul>s it does not work properly:
$("#ctamenu ul li ul li").click(function () {
$(this).find('.thirdsub').stop().show(300);
});
What is strange is that when I inspect the elements in the browser the display: none css is definitely removed from the thirdsub element. I even get a coloured outline where Chrome is showing me where the element should be.
What even weirder is that if I change .click to .hover it works fine:
$("#ctamenu ul li ul li").hover(
function () {
$(this).find('.thirdsub').stop().show(300);
},
function () {
$(this).find('.thirdsub').stop().hide(300);
}
);
Would anyone know why this could be working with hover but not click?

$("#ctamenu ul li ul li").click(function (e) {
$(this).find('.thirdsub').stop().show(300);
e.stopPropagation();
});
Try stopPropagation() because you also have assigned click handler to parent of that. Which will invoke also when you click on #ctamenu ul li ul li.

"touch and feel" at custom HTML drop down menu

I made a custom drop down menu on a HTML page + JavaScript. I want that menu to act as following:
When the button "Freunde" gets clicked, the drop down menu appears
When the button gets clicked again, the drop down menu disappears
When the mouse curor leaves the "area" of button + drop down menu, it disappears
The drop down menu consists of a main div with multiple divs in it (the "menu items").
My first approach was to put a onmouseout() on the main div of the drop down menu, but there is following problem: As soon as I hover over an inner div, the onmouseout() is true, and since the inner divs fill the entire main div, the drop down menu is visible only as long as the user doesn't hover over it.
So I tried it to solve similiarly like a JQuery lightbox, namely to put a "background" div over the whole screen and paste the drop down menu in there, and set the onmouseover() there. That would be almost perfect, but the "Freunde" button is also affected from that.
So is there any way to combine an event from different elements? Like
if(cursor is not over Button && cursor is not over DDMenu) set invisible
I marked the desired are in following image

Assuming you're set up as
<ul>
<li></li>
<li></li>
</ul>
You could set up your CSS like this:
#nav ul li ul { display: none; }
#nav ul li.active:hover ul { display: block; }
And then set up your JS like this:
var menuClick = function() {
$(this).toggleClass('active');
menuHover();
};
var menuHover = function() {
$('#nav li.active').hover(function() {
}, function() {
$(this).removeClass('active');
});
});
$('#nav > ul > li').on('click', menuClick);
Granted, this is absolutely gross coding, but I think it should work. (this also assumes you're using the jQuery library).

jQuery on list item hover, show delete button for that individual item

Below is a preview of what I have:
On the right is when I hover. What I want is for the delete icon to only show for that hover item.
<script>
$(document).ready(function(){
$(".removeService").hide();
// Deleting an Individual Service
$("#dashboard ul li span").hover( function() {
$(".removeService").show();
});
});
</script>
This is probably a very simple fix, but if anyone could point me in the right direction I would really appreciate it.
Thanks!

If you want the delete span to show only when hovered over and hidden when the mouse exits, you can use an 'overload' for the .hover() function by providing a second function that hides the delete span.
See this fiddle here for an example.
A very simplified example could look like this:
$(document).ready(function(){
$('.remoteService').hide()
.click(function(){alert('delete!');});
$('#dashboard ul li span').hover(
function(){ //this is fired when the mouse hovers over
$(this).find('.remoteService').show();
},
function(){ //this is fired when the mouse hovers out
$(this).find('.remoteService').hide();
});
});
I hope this helps!

<script>
$(document).ready(function(){
$(".removeService").hide();
// Deleting an Individual Service
$("#dashboard ul li span").hover( function() {
$(this).find(".removeService").show();
});
});
</script>
This assumes that .removeService is nested within #dashboard ul li span. If this is not the case, please provide your html.
In the code this is the actual span which is hovered on. find will search within that span for all elements with the removeService class.

Edit:
Used image tag instead of background-image(see DEMO link at the bottom) to make it click-able.
DEMO here.
Why not use CSS :hover to get the same effect.
DEMO here

You have to do this with jQuery, you can achieve the same behavior with pure CSS:
#dashboard ul li .removeService {
display: none;
}
#dashboard ul li:hover .removeService {
display: inline;
}
Example on jsfiddle

Accessibility of JavaScript drop down menu

I have implemented my own drop down menu and wanted to clarify the accessibility implication of my solution:
http://jsfiddle.net/tpHcv/5/
The piece of code i am interested in for now is:
$('#sub-nav > li ul').each(function(index){
var $this = $(this),
index = index + 1;
$this
.clone()
.appendTo('#main-nav > li:eq(' + index + ')');
});
'sub-nav' is hiddden from everyone via CSS to start. Then it is appended to the relevant 'main-nav' li. Will this approach prevent people using assistive technology from getting to the sub menu items?
Please don't aks why i have done it this way. Suffice to say i have no access to the original markup of the project so cannot just append the sub-menu to the markup in the way that i would like.

For greater accessibility, consider adding keyboard support. When a link has the focus (via tab or whatever), make sure its subnav is visible. Similarly, when a subnav link has focus, make sure it is visible. Some of that you can do with css via :focus.
It's unfortunate you don't have access to the markup. Is there a reason you need to clone the <ul>, or is it ok to just move the original element? Do your dom manipulation with script, but do the show/hide with css via the :hover pseudo-class.
This gets you part of the way there: http://jsfiddle.net/tpHcv/9/ You'll still need some JavaScript to manage tabs and focus on the sub-items.
#main-nav li > ul
{
display: none;
}
#main-nav > li a:focus + ul,
#main-nav > li:hover > ul
{
display:block;
}
Will your #main-nav links go anywhere or are they just for triggering the sub navigation? If they don't go anywhere, to support browsers with JavaScript disabled, consider hiding #main-nav initially with css, and then show it with JavaScript. This way it isn't displayed unless the links will actually do something.