We Keep Coding

Smooth scrolling jQuery doesn't work - Cannot read property 'top' of undefined

I have spent hours trying to figure why it doesn't work. Basically I just want the scrolling on my page to be smooth.
Here is my code:
$(document).ready(function() {
var scrollLink = $('.option-name');
scrollLink.click(function(e){
e.preventDefault();
let linkRef = $(this).attr('href');
let position = $(linkRef).offset().top;
$('html, body').animate({
scrollTop : position
}, 500)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="my-name-header">
<img src="people.png" class="astro-man-header">
<h2>Itzik Shaoulian</h2>
</div>
<div class="nav-options">
<nav>
<ul class="list-options">
<li class="option-name">Home</li>
<li class="option-name">About</li>
<li class="option-name">Portfolio</li>
<li class="option-name">Skills</li>
<li class="option-name">Contact</li>
<li class="option-name">Resume</li>
</ul>
</nav>
</div>
</header>

You need to get the href from the <a> tag, not the <li> tag.
You can achive this with the find() function
let linkRef = $(this).find('a').attr('href');
I assume this will scroll down to another html element. But i dont know, might be wrong, sorry
Hope this helps :)
$(document).ready(function() {
var scrollLink = $('.option-name');
scrollLink.click(function(e){
e.preventDefault();
let linkRef = $(this).find('a').attr('href');
console.log(linkRef);//Log href
//From this point, the full HTML is needed for operation
// let position = $(linkRef).offset().top;
//$('html, body').animate({
//scrollTop : position
//}, 500)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="my-name-header">
<img src="people.png" class="astro-man-header">
<h2>Itzik Shaoulian</h2>
</div>
<div class="nav-options">
<nav>
<ul class="list-options">
<li class="option-name">Home</li>
<li class="option-name">About</li>
<li class="option-name">Portfolio</li>
<li class="option-name">Skills</li>
<li class="option-name">Contact</li>
<li class="option-name">Resume</li>
</ul>
</nav>
</div>
</header>

Common scroll top function for all menu

I want to write common function for all scroll function.Now It is working with separate function for all 'li'.If I write the script directly in on click event it is working.But It is not working if I try to call the function.
function myFunction(a) {
$(document).ready(function() {
$('html, body').animate({scrollTop: $('a').offset().top-40}, 1000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navMenu">
<!-- <li class="test1" onclick="$('html, body').animate({scrollTop: $('#consulting').offset().top-40}, 1000);" >Consulting & Solutions</li> -->
<li class="test1" onclick="myFunction(#consulting)" >Consulting & Solutions</li>
<li class="test2" onclick="$('html, body').animate({scrollTop: $('#segments').offset().top-40}, 1000);" >Segments</li>
</ul>
<div id="consulting">
1st div
</div>
<div id="segments">
2nd div
</div>

try this
function myFunction(a) {
$('html, body').animate({scrollTop: $('a').offset().top-40}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navMenu">
<!-- <li class="test1" onclick="$('html, body').animate({scrollTop: $('#consulting').offset().top-40}, 1000);" >Consulting & Solutions</li> -->
<li class="test1" onclick="myFunction(#consulting)" >Consulting & Solutions</li>
<li class="test2" onclick="myFunction(#segments)" >Segments</li>
</ul>
<div id="consulting">
1st div
</div>
<div id="segments">
2nd div
</div>

$(document).ready(function() {
function myFunction(a) {
$('html, body').animate({scrollTop: $('a').offset().top-40}, 1000);
}
});
Try this

JQuery LightSlider inside Bootstrap pills

I'm using jQuery lightSlider as image slider. I want to have sliders inside bootstrap pills (one slider per pill). Nevertheless, I have found the following situation: In the first pill the slider is OK. In the second pill the slider content is not displayed (resizing the window brings up the slider content!). I don't see how to solve this problem. Any help will be sincerely appreciated.
My (simplified) html:
<div>
<ul class="nav nav-pills">
<li class="active"> <a data-toggle="pill" id="pill1" href="#s1">Pill 1</a>
</li>
<li> <a data-toggle="pill" id="pill2" href="#s2">Pill 2</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="col-md-12 tab-pane fade in active" id="s1">
<ul id="slider-1">
<li>
<p>one</p>
</li>
<li>
<p>two</p>
</li>
<li>
<p>tree</p>
</li>
</ul>
</div>
<div class="col-md-12 tab-pane fade active" id="s2">
<ul id="slider-2">
<li>
<p>uno</p>
</li>
<li>
<p>dos</p>
</li>
<li>
<p>tres</p>
</li>
</ul>
</div>
</div>
The javascript:
function initSlider(sliderId) {
$('#'+sliderId).lightSlider({
item:2,
loop:false,
slideMove:1
});
}
initSlider('slider-1');
initSlider('slider-2');
And the Jsfiddle reproducing the problem: https://jsfiddle.net/sedtjchs/4/
Thank you for your help!

Problem: You are trying to call lightSlider on the content(#s2) which was already hidden so plugin can not calculate height, width(and etc) on that element.
Add active class to the second .panel-pane.
Jsfiddle

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#slider-2').lightSlider({
item:4,
loop:false,
slideMove:2,
pager: false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
}).refresh();
});

I have the same problem, but the Alex's solution doesn't work for me as my tab wrapper doesn't have a fixed height so it will show blank gap under the 1st tab at the first load.
The Thành Nguyễn's solution is working for me. Basically it's refreshing the slider everytime you click on the tab navigation, so then LightSlider will be able to calculate the active container height.
Here's the complete script :
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#slider-2').lightSlider({
item:4,
loop:false,
slideMove:2,
pager: false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
}).refresh();
});
});

Close all open ul when another ul is toggled by click event

I've got a vertical dropdown menu for which I'm using jQuery toggle to open/close the submenus.
It's working fine when the user clicks the parent item (for example 'About' the submenu opens and when they click it again the submenu closes again. However, if they don't click the parent item ('About') a second time to close it but click on a different parent item (let's say 'Industry') to open the submenu both submenus ('About' and 'Industry') are visble.
So I need it to work that 'About' automatically closes when 'Industry' is clicked.
Here is the code :
<nav>
<ul id="nav-list">
<li class="nav-list_item nav-about>About
<div id="about-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-industry">Industry
<div id="industry-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-application">Application
<div id="application-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
And the JavaScript:
$('li.nav-about').click(function () {
$(this).find('ul').toggle();
});
$(' li.nav-industry').click(function () {
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
$('li.nav-application').click(function () {
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
I've tried different things I found on stackoverflow already but could'nt get it to work. Any suggestions?

$('#nav-list li').on('click', function() {
$('#nav-list li').not(this).find('div').hide();
$(this).find('div').toggle();
});
.nav-list_item > div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-list">
<li class="nav-list_item nav-about">About
<div id="about-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-industry">Industry
<div id="industry-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-application">Application
<div id="application-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
No need for so convoluted handlers.

demo
$('li.nav-about').click(function () {
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
$(' li.nav-industry').click(function () {
$("html, body").animate({
scrollTop: 0
}, "fast");
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
$('li.nav-application').click(function () {
$("html, body").animate({
scrollTop: 0
}, "fast");
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
Just hide the other div when one is click.

I think you can remove redundant code like this:
$('li.nav-list_item').click(function () {
$('li.nav-list_item').find('ul').hide();
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
You can substitute your js with this.

how to manipulate ul brackets

hy all, I am creating an accordion menu that when i press the " UNIT " tab, it opens up a list of " Chapters " tab, and when i press on any one of those chapters, a list of lessons opens up. Till now, i have managed to create all the appropriate lists, but in default, lessons and chapters are opened automatically, and the lessons elements when pressed do not scroll back up to the chapters parents. My html5 file:
<script type="text/javascript" src="jqueryjs.js"></script>
<script type="text/javascript" src="jqueryuiaccor.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion();
});
</script>
<div id="container">
<div id="content">
<div id="sidebar">
<ul id="accordion">
<li>
Unit 1
<ul id="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
<li>
Unit 2
<ul id="accordion">
<li> Chapter 1 </li>
<ul id="accordion">
<li> Chapter 2
<ul id="accordion">
<li> Lesson 1 </li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
My acorjs.js file:
$(document).ready(function() {
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul#accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});
Any ideas??
My new edited file :
<div id="container">
<div id="content">
<div id="sidebar">
<ul class="accordion">
<li>
Unit 1
<ul class="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
<li>
Unit 2
<ul class="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
my JS file :
$(document).ready(function() {
$('ul.accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul.accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});
Please help everything stopped working

Try giving the ul elements unique ids. The ul for both Units and Chapters have "accordion" as the id. If the ids are not unique, the event function may be bound only to the first or last, but not all
Alternately, make "accordion" a class and not an id. Your jquery will then need to change to use "ul.accordion" instead of "ul#accordion".
Here's a snippet of the HTML showing the change:
<ul class="accordion">
<li>
Unit 1
<ul class="accordion">
<li> Chapter 1 </li>
<ul id="accordion2">
<li> Lesson 1 </li>
And then the change to the javascript code:
$(document).ready(function() {
$('ul.accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul.accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});