We Keep Coding

hover on dynamically created list

I have a menu with a list of items created dynamically using javascript.
They have different colour and country attributes created using setAttribute.
$("#menuList a").hover(
function() {
var countryName = $(this).attr('country');
var fruitColour = $(this).attr('colour');
$('#toshow').append($("countryName \n fruitColour"));
},
function() {}
);
.toshow {
display: none;
}
#menuList a:hover div.toshow {
top: 0;
right: 0;
display: block;
position: absolute;
z-index: 99999;
background: red;
width: 200px;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menubar" id="menuList">
<li>Watermelon</li>
<li>Grapes</li>
<li>Strawberry</li>
<li>Blueberry</li>
</ul>
<div class="toshow" id="toshow"></div>
Here, I want to have a separated hidden div (display at top right of the page or next to the menuList) that does not have any content until any of the <a> tag being hovered, and show its responding two attributes until no more mouse hovered.
The code does not have errors. But I don't see anything in red when the mouse hovered through the list. Is it possible to achieve what I am looking for?

You can use the mouseout event to hide the toshow div with hide as you leave a list element. And at each hover event, you can change the html of toshow to the values of the li element which the user is hovering over and use show to display it.
Also make sure you attach the event handlers after you've inserted the html of the dynamically generated list.:
function displayGeneratedList() {
$('#menuList').html(`
<li>Watermelon</li>
<li>Grapes</li>
<li>Strawberry</li>
<li>Blueberry</li>
`);
$("#menuList a").hover(function() {
var countryName = $(this).attr('country');
var fruitColour = $(this).attr('colour');
$('#toshow').html(`${countryName}<br>${fruitColour}`).show();
});
$('#menuList a').mouseout(function() {
$('#toshow').hide();
});
}
$(document).ready(function() {
displayGeneratedList();
});
#menuList {
display: inline-block;
}
.toshow {
display: none;
float: right;
background: maroon;
width: 200px;
height: 100px;
padding: 5px;
color: white
}
<ul class="menubar" id="menuList">
</ul>
<div class="toshow" id="toshow"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to animate clicked li from its current position to top position and hide all li

I have list of different list items so when i click on specific item from list it should move from its current position to top position using jquery animate and at the same time hide remaining list items using jquery.
$(document).ready(function() {
$(".menu").click(function() {
$("li").animate({
top: '2px'
}, 'slow');
});
});
ul>li {
list-style-type: none;
line-height: 34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li>Account</li>
<li>Profile</li>
<li>History</li>
</ul>

You can show click element by adding addClass and css to added class and simultaneously you can hide others li by jquery hide(). Hope it helps. I'm just adding the animation to it.
$(document).ready(function() {
$("li").click(function() {
$(this).addClass('top');
$('li').hide();
});
});
ul>li {
list-style-type: none;
line-height: 34px;
}
.top{
display:inline-block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Account</li>
<li>Profile</li>
<li>History</li>
</ul>

Inorder to animate top the element has to be able to take the css property top. So far I made the element to be capable enough to take the property top and I animated it to top while reducing the opacity using transition. These jquery this are done for the sibling li elements of the clicked one.
$(document).ready(function() {
$(".menu li").click(function() {
$(this).siblings('li').animate({
top: '-60px'
}, 'fast');
$(this).siblings('li').css({
'opacity': '0'
});
});
});
ul>li {
list-style-type: none;
line-height: 34px;
position: relative;
top: 10px;
transition: all 2s ease;
}
.menu {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li>Account</li>
<li>Profile</li>
<li>History</li>
</ul>

Mouse hover using jQuery keeps bouncing

I am trying to make a show content on mouseover and make it stay visible while the mouse is hovered on the list since I am planning to put a button there, but when I do hover, hidden content kept bouncing for some reason.
jQuery code
$('li.employers').mouseover(function () {
$('.employer_content').show("slow");
$(this).addClass("bluehover");
});
$('li.employers').mouseout(function () {
$('.employer_content').hide("fast");
$(this).removeClass("bluehover");
});
HTML
<li class="employers">
<div>employer</div>
<div class="employer_content">some content.</div>
</li>
<li class="court">
<div>court</div>
<div class="court_content">some content.</div>
</li>
http://jsfiddle.net/zLdnnxnh/3/

You can use only CSS to show/hide the contents.
You can take advantage of :hover class in CSS.
Demo using CSS only
.whatwedo {
padding: 20px;
color: #fff;
max-width: 480px;
margin: 0 auto;
}
ul li {
list-style-type: none;
}
ul > li {
background-color: #08588c;
display: inline-block;
width: 100%;
cursor: pointer;
float: left;
max-width: 100px;
padding: 10px;
}
.whatwedo {} ul.wwd_list {
padding: 0;
margin: 0;
}
.employer_content,
.court_content,
.companies_content,
.labor_content {
display: none;
clear: right;
}
.bluehover {
background-color: #01395d;
}
.content {
padding-top: 10px;
display: none;
}
.wwd_list li:hover .content {
display: block;
}
<div class="whatwedo">
<ul class="wwd_list">
<li class="employers">
<div>employer</div>
<div class="content">some content.</div>
</li>
<li class="court">
<div>court</div>
<div class="content">some content.</div>
</li>
<li class="companies">
<div>companies</div>
<div class="content">some content.</div>
</li>
<li class="laborunion">
<div>labour union</div>
<div class="content">some content.</div>
</li>
</ul>
</div>
CSS Demo with Animation
If you still want to use jQuery:
You are using mouseover event that is causing the handler to run when the mouse is moved over the element, use mousein instead
Use hover instead of mousein and mouseout
Your code is not flexible, you can optimize your code as follow
Use stop() to stop the previous animations
Demo
$('.wwd_list li').hover(function() {
$(this).find('div.content').stop().show("slow");
$(this).addClass("bluehover");
}, function() {
$(this).find('div.content').stop().hide("slow");
$(this).removeClass("bluehover");
});
.whatwedo {
padding: 20px;
color: #fff;
max-width: 480px;
margin: 0 auto;
}
ul li {
list-style-type: none;
}
ul > li {
background-color: #08588c;
display: inline-block;
width: 100%;
cursor: pointer;
float: left;
max-width: 100px;
padding: 10px;
}
.whatwedo {} ul.wwd_list {
padding: 0;
margin: 0;
}
.employer_content,
.court_content,
.companies_content,
.labor_content {
display: none;
clear: right;
}
.bluehover {
background-color: #01395d;
}
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="whatwedo">
<ul class="wwd_list">
<li class="employers">
<div>employer</div>
<div class="content">some content.</div>
</li>
<li class="court">
<div>court</div>
<div class="content">some content.</div>
</li>
<li class="companies">
<div>companies</div>
<div class="content">some content.</div>
</li>
<li class="laborunion">
<div>labour union</div>
<div class="content">some content.</div>
</li>
</ul>
</div>

You can use hover instead of mouseover and mouseout. Something like this:
$('li.employers').hover(function () {
$('.employer_content').show("slow");
$(this).addClass( "bluehover" );
console.log('mouse in');
}, function() {
$('.employer_content').hide("slow");
$(this).removeClass( "bluehover" );
console.log('mouse out');
});
Here's an example

How about this?
You can use stop() to stop the animation and continue the new animation from where it has stopped
$('.employer_content').stop().show("slow");
$('.employer_content').stop().hide("slow");
As recommended by others, use mouseenter than mouseover

Replace mouseover function with mouseenter and mouseout with mouseleave.
You can see this fiddle is working.
http://jsfiddle.net/ebilgin/zLdnnxnh/7/

Try using mouseenter and mouseleave instead:
From https://api.jquery.com/mouseover/:
This event type can cause many headaches due to event bubbling. For
instance, when the mouse pointer moves over the Inner element in this
example, a mouseover event will be sent to that, then trickle up to
Outer. This can trigger our bound mouseover handler at inopportune
times. See the discussion for .mouseenter() for a useful alternative.
$('li.employers').mouseenter(function () {
$('.employer_content').show("slow");
$(this).addClass("bluehover");
});
$('li.employers').mouseleave(function () {
$('.employer_content').hide("fast");
$(this).removeClass("bluehover");
});
http://jsfiddle.net/zLdnnxnh/5/

Just remove fast from your hide function. It is WORKING. Check this fiddle: http://jsfiddle.net/zp3jr43u/
The JavaScript code should like the following.
$('li.employers').mouseover(function () {
$('.employer_content').show("slow");
$(this).addClass("bluehover");
});
$('li.employers').mouseout(function () {
$('.employer_content').hide();
$(this).removeClass("bluehover");
});

Somehow the mouseover event gets triggered multiple times. I got it working by using the .stop() method before toggling the element.
http://jsfiddle.net/zLdnnxnh/4/

There's no need to have separate classes for each list item you have. Even with these separate classes the code below should get you up and running with ease.
$('.wwd_list li').hover(function () {
$('div:last-child',this).show("slow");
$(this).addClass( "bluehover" );
}, function(){
$('div:last-child',this).hide("slow");
$(this).removeClass( "bluehover" );
});
Note the fact that you only need to use one hover function instead of mouse in and mouse out. This works because you have two divs in the wwd_lsit class and the last one just so happens to be the one you want to target. So be careful with this if you ever want to change something!

Replace mouseover with mouseenter and mouseout with mouseleave.
See a more factorised form :
$('li').on({
mouseenter: function() {
jQuery("div.content", this).show('slow');
$(this).addClass( "bluehover" );
},
mouseleave: function() {
jQuery("div.content", this).hide('fast');
$(this).removeClass( "bluehover" );
}
});
(content class has been added to each content divs)
See the updated fiddle

Problems calculating absolute div

i have created vertical Menu with fixed width and absolute position ul
.categories ul.sub {
position: absolute;
right: -191px;
top: 0;
background: #fff;
width: 190px;}
but the problem is that i dont want to use fixed width and right. I want to calculate the width and the right of a ul depending of h2 class width inside ul with js. example : how is now: http://prntscr.com/rzcvx , how i need: http://prntscr.com/rzd3t
html example:
<div class="categories">
<ul class="maincats">
<li>
<a class="first"><img/><span>Category Name</span></a>
<ul class="sub first">
<li><h2>H2 Title</h2></li>
<li>Title</li>
<li>Title</li>
<li>Title</li>
<li>Title</li>
</ul>
</li>
</ul></div>
i have nothing tried yet, i only use this js
$(".categories li a").hover(
function () {
$(this).addClass("hover");
$(this).next('ul.sub').show();
},
function () {
$(this).removeClass("hover");
$(this).next('ul.sub').hide();
}
);
$(".categories ul.sub").hover(
function () {
$(this).prev().addClass("hover");
$(this).show();
},
function () {
$(this).prev().removeClass("hover");
$(this).hide();
}
);
$(function () {
var zIndexNumber = 10;
// Put your target element(s) in the selector below!
$(".categories ul.sub").each(function () {
$(this).css('zIndex', zIndexNumber);
});
});
Please help me i have basic js skils :)

You may want to try this:
.categories ul.sub {
position: absolute;
right: -100%; /* Not sure if this works, can't test without your html */
top: 0;
background: #fff;
white-space: nowrap; /* Prevent spaces from wrapping when text's overflowing. */
}

Displaying menu over an image

I have a sliding menu that should be displayed over an image, actually a logo. However, when it does, it is shifted as if the text of the menu wanted to avoid touching the image.
See :
the problem in image http://fruityhotchocolate.com/m.png
(note: the website is in french)
I deal with the event as follows:
$("nav>#menu>ul>li").hover(function(e) {
$("ul",this).css("display","block");
});
Thanks.

You don't need javascript, you can do it with CSS:
Add the following code:
#menu>ul>li>ul {
display: none;
list-style: none;
}
#menu>ul>li:hover>ul {
display: block;
}
Moreover, you should use child selectors (>) instead of descendant selectors:
#menu>ul
#menu>ul>li>ul
#menu>ul>li>ul>li
#menu>ul>li>ul>li>a
#menu>ul>li>a, #menu>ul>li>a:hover, #menu>ul>li>a:visited

Basically, what happens is that the li expands to the same width as the ul because it does not have a fixed width. Try:
$(document).ready(function() {
$('#menu ul').children('li').each(function () {
$(this).css('width', $(this).css('width'));
});
});

Try it with CSS:
<div class="content">
<img src="https://www.google.com.br/images/srpr/logo3w.png​​​​​​​​​​" />
<ul class="menu">
<li>Item 1</li>
</ul>
</div>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
CSS:
.content {
position: relative;
}
.content:hover .menu {
display: block;
}
.menu {
position: absolute;
display: none;
}
Demo: http://jsfiddle.net/nfKc4/