We Keep Coding

change height on an element with the height on another element

I'm trying that a div takes the height of another one when mouse enter but jQuery(this) doesn't work.
I've the following code:
jQuery(".laynav.primary ul li").mouseenter(function(){
jQuery(".navbar").css('height', '350px');
});
jQuery(".laynav.primary ul li").mouseleave(function(){
jQuery(".navbar").css('height', '60px');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to change jQuery(".navbar").css('height', '350px'); for $(this).ul height's but i don't know how.
If i put .laynav.primary ul li ul directly in the .css it's been applied everywhere and i only want it in the ones that's being hovered.
Thanks

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

Is it possible to determine whether you are in the last row of a css-defined column?

I am using the new css-style column to break a single ul into multiple columns. I wish to select the last element in each column with javascript or CSS.
html:
<ul>
<li />
<li />
<li><h4 /></li>
...
</ul>
css:
ul{
column-count: 6;
}
Sometimes the line-items with h4:s in them end up as the last item of the row, being orphans. I would like to solve this, and have been looking at two alternatives.
Using the css orphan property, but due to the markup I don't think it will work at all and It is not unsupported in Firefox and Safari, support is not a must but would be nice.
Adding some top-margin/padding to any h4 that is at the end of a column, but I don't know how to select them, either with css or javascript/jquery. I would prefer keeping the markup, as it is, but if it's not possible, I can change it.

Columns in CSS aren't content aware. The only two properties related to columns which can help you in a way are column-fill (which only works in firefox) and break-inside.
Column-fill will distribute the contents through the columns based on the height of the container.
Page-break will do for columns what clear does for floats, stopping elements from getting stuck between columns. It has different syntaxes across browsers.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
But anyway, columns are more helpful when you have a container with text and want to divide it in columns without any extra markup. Since you are using li and don't have just a text inside a div, I would suggest you to use floats to achieve the multi column layout you are looking for.

You question is unclear.
If you want to know if your element (ex. h4) is in the last li than use CSS:
ul li:last-of-type h4
If you want to know this in JS but withou use of pseudoselector than you can use:
$(function () {
var $li = $('ul > li'),
count = $li.length - 1,
cssClass = 'last';
$li.eq(count).addClass(cssClass);;
});
And from here use CSS ul li.last h4
Working fiddle: http://jsfiddle.net/Lwuzgm08/2/

You could use the :last-child selector for selecting the last LI element.
li:last-child{color:red;}

Yes you can remove the orphan h4 tag from your html. Below is the simple scripts that does the same.
$('h4').each(function() {
var $this = $(this);
if($this.html().replace(/\s| /g, '').length == 0)
$this.remove();
});

If you want to select last element in each column (assuming li is an column) you can use following CSS
ul > li h4:last-of-type
or jQuery:
$('ul > li h4:last-of-type')
Providing fiddle: http://jsfiddle.net/pqse3er1/1/

Z-index in IE: li element disappeared when over on it

In JS code I declare that when over on the LI element in the vertical Menu all the li elements get style: z-index:5 except the current over li element and li element with class="selected" that the style is: z-index: 10.
In chrome, FF it works well but in IE when I over the li element of the menu it disappeared.
The follow is the JS code:
var mainMenu_li = document.getElementById('mainMenu').getElementsByTagName('li');
for(i = 0; i < mainMenu_li.length; i++)
if(mainMenu_li[i].className != "selected")
mainMenu_li[i].style.zIndex = '5';
$('#' + curObjID).parent().css('z-index','10');
How can you help me?

First of all read this series of articles: https://developer.mozilla.org/en/Understanding_CSS_z-index
If you trying to use z-index in IE7 - it have problems with it - try to build menu based on "Stacking without z-index". For example - without hover position:static, with hover position:relative.
Also try to set without hover position:relative; (without z-index) and on hover position:relative;z-index:2
It will better if you put your styles to classes and manipulate with jquery through classes: addClass('class') and removeClass('class')

jQuery - show only current ul

im new to jQuery and have a slight issue with the following navigation:
http://jsfiddle.net/6Dh8j/7/
Essentially, I love the navigation in the Creative Production section of this lovely site: http://www.gainsburyandwhiting.com > see Portfolio > Fashion Show etc...
I need to hide the current ul and show a fresh one in its place. At the moment, they show until I un-click the parent.
Any thoughts?
Thanks,
Red

You need to hide all the ul elements that are descendant of the siblings of the current ul e.g.
$(this).siblings().find('ul').fadeOut('fast');
This finds each sibling of the clicked ul (all of which are ul in the example) and finds all the ul elements that are withing their bounds and fades them out.
In the context of your code:
$("nav ul li").find("ul").hide().end()
.click(function(e) {
if (this == e.target) {
$(this).siblings().find('ul').fadeOut('fast');
$(this).children('ul').fadeToggle('fast');
}
});