Develop Reference

how do i add active class to these links upon scrolling to the page using javascript?

<div class="navbar">
<nav>
<ul class="navbar__navdiv" >
<li><a class="navbar__navdiv--a " href="#homePage">Home Page</a></li>
<li><a class="navbar__navdiv--a" href="#aboutMe" >About Me</a></li>
<li><a class="navbar__navdiv--a" href="#services" >Services</a></li>
<li><a class="navbar__navdiv--a" href="#projects" >Projects</a></li>
<li><a class="navbar__navdiv--a" href="#contactMe" >Contact Me</a></li>
</ul>
</nav>
</div>

try this
$(document).scroll(function(){
var thisScroll = $(this).scrollTop();
var topOfWindow = $(window).scrollTop();
if (topOfWindow <= $('#homePage').offset().top - 100 ){
$('.navbar__navdiv--a').removeClass("active");
$('.navbar1').addClass("active");
} else if (topOfWindow+100 >= $('#homePage').offset().top && topOfWindow+100 < $('#aboutMe').offset().top ){
$('.navbar__navdiv--a').removeClass("active");
$('.navbar2').addClass("active");
} else if (topOfWindow+100 >= $('#aboutMe').offset().top && topOfWindow+100 < $('#services').offset().top ){
$('.navbar__navdiv--a').removeClass("active");
$('.navbar3').addClass("active");
} else if (topOfWindow+100 >= $('#services').offset().top && topOfWindow+100 < $('#projects').offset().top ){
$('navbar__navdiv--a').removeClass("active");
$('.navbar4').addClass("active");
} else if (topOfWindow+100 >= $('#projects').offset().top ){
$('.navbar__navdiv--a').removeClass("active");
$('.navbar5').addClass("active");
}
})
<nav>
<ul class="navbar__navdiv" >
<li><a class="navbar__navdiv--a navbar1" href="#homePage">Home Page</a></li>
<li><a class="navbar__navdiv--a navbar2" href="#aboutMe" >About Me</a></li>
<li><a class="navbar__navdiv--a navbar3" href="#services" >Services</a></li>
<li><a class="navbar__navdiv--a navbar4" href="#projects" >Projects</a></li>
<li><a class="navbar__navdiv--a navbar5" href="#contactMe" >Contact Me</a></li>
</ul>
</nav>

Check if item have underscore then create a sub-menu using javascript

i'm a new javascript programer and i want to write a script which can create a dropdown menu automatic with underscore before the text from this:
<ul class='prime-nav'>
<li><a href='/'>Home</a></li>
<li><a href='/item-1'>Item1</a></li>
<li><a href='/item-1-1'>_Sub-Item 1</a></li>
<li><a href='/item-1-2'>_Sub-Item 2</a></li>
<li><a href='/item-1-3'>_Sub-Item 3</a></li> <!-- Underscored item -->
<li><a href='/item-2'>Item2</a></li>
<li><a href='/item-3'>Item3</a></li>
<li><a href='/item-4'>Item4</a></li>
<li><a href='/item-4-1'>_Sub-Item 1</a></li>
<li><a href='/item-4-2'>_Sub-Item 2</a></li>
<li><a href='/item-4-3'>_Sub-Item 3</a></li> <!-- Underscored item -->
</ul>
Then using javascript to check the item if it has underscore then create dropdown like this
<ul class='prime-nav'>
<li><a href='/'>Home</a></li>
<li><a href='/item-1'>Item1</a>
<ul class='sub-nav'>
<li><a href='/item-1-1'>Sub-Item 1</a></li>
<li><a href='/item-1-2'>Sub-Item 2</a></li>
<li><a href='/item-1-3'>Sub-Item 3</a></li> <!-- Underscore remove -->
</ul>
</li>
<li><a href='/item-2'>Item2</a></li>
<li><a href='/item-3'>Item3</a></li>
<li><a href='/item-1'>Item4</a>
<ul class='sub-nav'>
<li><a href='/item-4-1'>Sub-Item 1</a></li>
<li><a href='/item-4-2'>Sub-Item 2</a></li>
<li><a href='/item-4-3'>Sub-Item 3</a></li> <!-- Underscore remove -->
</ul>
</li>
</ul>
And i have try something like this
function underScored(){
var a = document.querySelector(".prime-nav"),
b = document.querySelectorAll(".prime-nav>li"),
d = document.createElement("ul");
for(var i = 0 ; i < b.length; i++){
var e = b[i].querySelector("a");
if(e.textContent.indexOf("_")>-1){
d.appendChild(b[i])
}
b[i].appendChild(d)
}
}
underScored()
and it's only group a first item in the list

What you did is quite weird. I think you should take some time to give some good names to your variable. Letters are not very good to understand what you are handling.
Then, try to understand each line of your code, what did you exactly do.
Here is a solution for your problem, I hope it'll help you:
const underScored = () => {
const lis = [];
// Let's store HTML elements in an array to use them easier later.
for(const item of document.querySelectorAll('li')) {lis.push(item);}
// First, let's build groups of items.
const groupsOfUnderscoreItem = lis.filter(li => li.textContent.startsWith('_')).reduce((acc, item) => {
const href = item.querySelector('a').getAttribute('href');
const root = href.substring(0, href.lastIndexOf('-'));
acc[root] = acc[root] || [];
acc[root].push(item);
return acc;
}, {});
// Then, let's perform the modifications to the HTML DOM.
Object.keys(groupsOfUnderscoreItem).forEach(group => {
const newList = document.createElement("ul");
newList.classList.add('sub-nav');
const rootElt = document.querySelector(`a[href='${group}']`);
groupsOfUnderscoreItem[group].forEach(li => {
newList.appendChild(li);
const a = li.querySelector('a');
a.textContent = a.textContent.substring(1);
});
rootElt.parentNode.appendChild(newList);
});
};
underScored();
<ul class='prime-nav'>
<li><a href='/'>Home</a></li>
<li><a href='/item-1'>Item1</a></li>
<li><a href='/item-1-1'>_Sub-Item 1</a></li>
<li><a href='/item-1-2'>_Sub-Item 2</a></li>
<li><a href='/item-1-3'>_Sub-Item 3</a></li> <!-- Underscored item -->
<li><a href='/item-2'>Item2</a></li>
<li><a href='/item-3'>Item3</a></li>
<li><a href='/item-4'>Item4</a></li>
<li><a href='/item-4-1'>_Sub-Item 1</a></li>
<li><a href='/item-4-2'>_Sub-Item 2</a></li>
<li><a href='/item-4-3'>_Sub-Item 3</a></li> <!-- Underscored item -->
</ul>

Using Javascript Fiddle
var dom = "";
var next = false;
var selected = document.querySelectorAll('.prime-nav li');
var len = selected.length - 1;
selected.forEach(function(elem, index) {
var text = elem.innerText;
if (text.startsWith('_')) {
elem = elem.outerHTML.replace('>_', '>');
var prepend = "";
if (!next)
prepend = "<ul class='sub-nav'>";
dom += prepend+elem;
next = true;
} else {
if (next)
dom += "</ul>";
dom += elem.outerHTML;
next = false;
}
if (next & index == len) {
dom += "</ul>";
}
});
document.getElementsByClassName("prime-nav")[0].innerHTML = dom;
<ul class='prime-nav'>
<li><a href='/'>Home</a></li>
<li><a href='/item-1'>Item1</a></li>
<li><a href='/item-1-1'>_Sub-Item 1</a></li>
<li><a href='/item-1-2'>_Sub-Item 2</a></li>
<li><a href='/item-1-3'>_Sub-Item 3</a></li>
<li><a href='/item-2'>Item2</a></li>
<li><a href='/item-3'>Item3</a></li>
<li><a href='/item-1'>Item4</a></li>
<li><a href='/item-4-1'>_Sub-Item 1</a></li>
<li><a href='/item-4-2'>_Sub-Item 2</a></li>
<li><a href='/item-4-3'>_Sub-Item 3</a></li>
</ul>
Using Jquery
Here is how I did fiddle:
var dom = "";
var next = false;
var len = $('.prime-nav li a').length - 1;
$('.prime-nav li a').each(function(index) {
var text = $(this).text();
var _li = $(this).parents('li');
if (text.startsWith('_')) {
$(this).text(text.replace('_', ''));
var prepend = "";
if (!next)
prepend = "<ul class='sub-nav'>";
dom += prepend + _li[0].outerHTML
_li.remove();
next = true;
} else {
if (next)
dom += "</ul>";
dom += _li[0].outerHTML;
next = false;
}
if (next & index == len) {
dom += "</ul>";
}
});
$('.prime-nav').html(dom);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='prime-nav'>
<li><a href='/'>Home</a></li>
<li><a href='/item-1'>Item1</a></li>
<li><a href='/item-1-1'>_Sub-Item 1</a></li>
<li><a href='/item-1-2'>_Sub-Item 2</a></li>
<li><a href='/item-1-3'>_Sub-Item 3</a></li>
<li><a href='/item-2'>Item2</a></li>
<li><a href='/item-3'>Item3</a></li>
<li><a href='/item-1'>Item4</a></li>
<li><a href='/item-4-1'>_Sub-Item 1</a></li>
<li><a href='/item-4-2'>_Sub-Item 2</a></li>
<li><a href='/item-4-3'>_Sub-Item 3</a></li>
</ul>

changing plus sign to minus when collapsed while keeping link

I'm pretty new to jQuery, so I admit I don't fully know what I'm doing. The top menu item is just text and not it's own link, but it has a dropdown. I'm trying to add a plus and minus sign before the text that toggles while keeping the original content clickable.
HTML
<div class="menu-clinical-materials">
<ul>
<li class="menu-item-has-children"><a>Clinical Studies & Articles</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a>Counseling Sheets</a>
<ul class="sub-menu" style="display: none;">
<li><a target="_blank" href="">Link 1</a></li>
<li><a target="_blank" href="">Link 2</a></li>
<li><a target="_blank" href="">Link 3</a></li>
<li><a target="_blank" href="">Link 4</a></li>
<li><a target="_blank" href="">Link 5</a></li>
</ul>
</li>
</ul>
JS
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".Expander").click(function () {
jQuery(this).html(jQuery(this).html() == "+" ? "-" : "+");
jQuery(this).toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).addClass("Expanded").end().slice(1).siblings("ul").hide();
});
So I want "Clinical Studies & Articles" clickable, not just the +/- sign.
Here's what I have so far
EDIT
I was able to get it to work the way I wanted but using a different method. I'd still like to know how to do this with the .click function instead of toggle though. I'd appreciate it. Here's the fiddle with my workaround
Fiddle
Here is the changed JS
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"plus-minus\">+</span>");
jQuery(".sub-menu").addClass('expander').hide();
jQuery('.menu-item-has-children').parent().toggle(function () {
jQuery(".plus-minus").text("-");
jQuery(".expander").slideDown();
}, function () {
jQuery(".plus-minus").text("+");
jQuery(".expander").slideUp();
})
});

Improved demo. Use event.stopPropagation() to prevent click on inner links to bubble and close the whole block.
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");
jQuery(".menu-item-has-children").click(function () {
buttonText = jQuery(this).children('.Expander').html() == "+" ? "-" : "+";
jQuery(this).children('.Expander').html(buttonText);
jQuery(this).children('.Expander')
.toggleClass("Expanded").siblings("ul").slideToggle();
return false;
}).eq(0).slice(1).siblings("ul").hide();
});
//Prevent close on click of inner links.
jQuery(".sub-menu > li").click(function (e) {
e.stopPropagation();
});
//]]>

Click on li list is not Firing any Event

Can you please take a look at this demo and let me know why click on list is not firing any function to page?
<ul id="slider">
<li class="expandOnClick">
One
</li>
<li class="expandOnClick">
Two
<ul class="musthidden">
<li><a class="prevent" href="#">Two _ 1</a></li>
<li><a class="prevent" href="#">Two _ 2</a></li>
<li><a class="prevent" href="#">Two _ 3</a></li>
<li><a class="prevent" href="#">Two _ 4</a></li>
</ul>
</li>
<li class="expandOnClick">
Three
<ul class="musthidden">
<li><a class="prevent" href="#">Three _ 1</a></li>
<li><a class="prevent" href="#">Three _ 2</a></li>
<li><a class="prevent" href="#">Three _ 3</a></li>
<li><a class="prevent" href="#">Three _ 4</a></li>
</ul>
</li>
<li class="expandOnClick">
Four
</li>
</ul
Style:
.musthidden {
display:none;
}
ul
{
list-style-type:none;
}
li{
background-color:#2d2d2d;
}
li:hover{
background-color:#ccc;
}
Script:
$(".expandOnClick").click(function (e) {
e.preventDefault();
$(".musthidden").slideUp();
$(this).parent("li").each(function () {
if ($('.musthidden', this).css('display') == 'none') {
$(".musthidden", this).slideDown();
}
});
});
Thanks
1

i Think this is what you are trying to do http://jsfiddle.net/f27bp/11/ Use prevent default at the end of the function and use jquery.children to apply the function on children.
$(".expandOnClick").click(function (e) {
$(this).siblings().children(".musthidden").slideUp();
$(this).children(".musthidden").slideDown();
e.preventDefault();
});

How do I change the css of a child of $(this)

I have a page of search results, each of which has an icon to add each result to a group (listed on the page in a hidden UL element: display:none;).
Right now it works... but when I click on the icon for one result listing... the UL appears under every single result.
I need it to only show up for the result listing that I am clicking the icon on... not all the listings...
Currently the onload code is this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
I tried to change it to this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).children("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$(this).children("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
But, yeh.. the icon is highlighted as "current" or active, but the UL does not appear...
Any help would be greatly appreciated.
OOPs. Sorry! Here is the HTML:
<li class='vcard'>
<a href='profile.php?id=1288'><img class='user-photo' src='profile_images/sq_avatar.png' alt='Paul Dietzel' /></a>
<div class='user-info'>
<a class='fn url name' href='profile.php?id=1288'>Paul Dietzel</a>
<ul class='attributes'>
<li class='adr'><span class='locality'>Los Angeles</span>, <abbr class='region' title='California'>CA</abbr></li>
</ul>
</div>
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a></li>
<ul class="quicklist_menu"><li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp">Manage Groups »</li>
</ul>
</ul>
</li>

You need to correct your markup by moving that <ul> to be a sibling of the anchor, not outside the <li></li> but inside (<ul> can't be a child of a <ul>, it's invalid HTML). Like this:
<ul class='options'>
<li><a class='view-profile' href='profile.php?id=1288'>View profile</a></li>
<li><abbr title="Add/Remove Favorite"><button class="favorite ICON" id="1288">Remove Favorite</button></abbr></li>
<li><a class='add-to-group' href='#newgrp'>Add to group</a>
<ul class="quicklist_menu">
<li><a href='#addgrp' id='1147' rel='1988'>Test 3</a></li>
<li><a href='#addgrp' id='1147' rel='1989'>Test 4</a></li>
<li><a href='#addgrp' id='1147' rel='1990'>Test 5</a></li>
<li><a href='#addgrp' id='1147' rel='1991'>Test 7</a></li>
<li><a href='#addgrp' id='1147' rel='1129'>Lou Herthum Acting Class</a></li>
<li><a href='#addgrp' id='1147' rel='1967'>test group</a></li>
<li class="mgrp">Manage Groups »</li>
</ul>
</li>
</ul>
Then you can use .next() like this:
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current").next("ul.quicklist_menu").show();
},
function(){
$(this).removeClass("current").next("ul.quicklist_menu").hide();
});
This uses the .show() and .hide() shortcuts to apply the display as well. Alternatively, you can use .click() to toggle using .toggleClass() and .toggle(), like this:
$("a.quicklist, a[href=#newgrp]").click(function() {
$(this).toggleClass("current").next("ul.quicklist_menu").toggle();
});

use .closest() and .next()
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).closest('li').next("ul.quicklist_menu").css('display','block');
$(this).addClass("current");
},
function(){
$(this).closest('li').next("ul.quicklist_menu").css('display','none');
$(this).removeClass("current");
});
or you may also try like this,
$("a.quicklist, a[href=#newgrp]").toggle(
function(){
$(this).addClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','block');
},
function(){
$(this).removeClass("current")
.closest('ul.options')
.children("ul.quicklist_menu")
.css('display','none');
});