Develop Reference

How to achieve level 3 div with javascript and apply styling

Hello I would like to reach a level 3 div and change the style of this div
in my example I would therefore like to be able to apply disply:none on style color red
to make the word Warning invisible
<div id="Zone">
<div class="MR-Widget ">
<div class="Title"> </div>
<div class="Errors" style="display: none"></div>
<div class="Content">
<div class="search"> </div>
<div class="resultat" style="width: 120px;"></div>
<div class="MR" id="Lock" style="display: none;"> </div>
<div style="color: red"> Warning </div>
</div>
</div>
</div>

To select 3rd level div:
document.querySelector('#Zone > div > div > div')
Now the problem is you have 4 div at 3rd level. So needed to select all and check style color. That gives:
const warningNone = () => {
Array.from(document.querySelectorAll('#Zone > div > div > div')).forEach(el => {
if (el) {
if (el.style.color === 'red') {
el.style.display = 'none';
}
}
})
}
window.addEventListener('load', warningNone);
<div id="Zone">
<div class="MR-Widget ">
<div class="Title"> </div>
<div class="Errors" style="display: none"></div>
<div class="Content">
<div class="search"> </div>
<div class="resultat" style="width: 120px;"></div>
<div class="MR" id="Lock" style="display: none;"> </div>
<div style="color: red"> Warning </div>
</div>
</div>
</div>
I modified the snippet to check the >div>div>div existence
By the way, I put the function to be fired when document loaded, otherwise your red will not apply
3...
try to split the query line in 2:
const warningNone = () => {
const els = document.querySelectorAll('#Zone > div > div > div');
els.forEach(el => {
if (el.style.color === 'red') {
el.style.display = 'none';
}
})
}
window.addEventListener('load', warningNone);
now in dev tools check which line fire the error

jQuery Alternative Div Elements

Can someone please help me understand the jQuery code and how it relates to my HTML. The links are going through and hiding all the divs, however I can't figure out why the div isn't showing when it's link is clicked.
HTML:
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="meet-the-team-info">
<div class="conor-div">
<h1>Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm div2</div>
<div class="tracey-div">I'm div3</div>
<div class="frank-div">I'm div4</div>
<div class="rosie-div">I'm div5</div>
</div>
</div>
</div>
</section>
jQuery:
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
$(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target).toggle();
});
});

You just need to change one line of your jQuery.
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
$(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target+"-div").show() //added "-div" and changed toggle to show
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="meet-the-team-info">
<div class="conor-div">
<h1>Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm div2</div>
<div class="tracey-div">I'm div3</div>
<div class="frank-div">I'm div4</div>
<div class="rosie-div">I'm div5</div>
</div>
</div>
</div>
</section>

#natels's solution works and deserves to be the accepted answer. But even his solution can be shortened a little bit:
$(function () {
$("a").click(function () {
$(".meet-the-team-info div:visible").hide(); // first hide all visible team divs,
$("."+this.dataset.target+"-div").show(); // then show the chosen one
}).eq(0).click(); // emulate a click on the first link (index=0)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
<div class="meet-the-team-info">
<div class="conor-div">
<h1>I'm Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm Kyle</div>
<div class="tracey-div">I'm Tracey</div>
<div class="frank-div">I'm Frank</div>
<div class="gwen-div">I'm Gwen</div>
<div class="rosie-div">I'm Rosie</div>
</div>
</div>
</div>
</section>
The code in this snippet does not need to be adjusted if more divs are to be included in the page. The individual class names do not occur in the code any more.

i think you have an extra hide() there. The first hide(), hides all the divs on page load. But then on click you say "hide" and "toggle". They're canceling each other or doing something unexpected. Try just toggle(). And also you're missing the "div" part in your selector.
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
// $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target+"-div").toggle();
});
});

Closing full screen JS menu on a one page website when menu links are clicked

I am having a play with a menu idea. I have very little JS knowlege so I want to know if what i am trying to achieve is doable.
I have been playing with a multibox menu from codrops this menu
From the looks of it the menu is designed to link to external pages, what I am trying to do is link to sections within the same page as I would look to build a one page site, so what I need is the menu to close when one of the menu links are clicked, as currently it just stays open.
I have tried to use the same "class" function from the close button in the links but this for some reason makes the close button disappear, not an effective solution.
I have looked at similar questions posted and tried to fix with previous answers but I'm having no luck.
<main>
<div class="frame">
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/GridLayoutScrollableContent/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=36043" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="codrops-header__title">Multibox Menu</h1>
</header>
<p class="info">12 — 24 May 2019 · Bannockburn · Stirling · UK</p>
<a class="github" href="https://github.com/codrops/MultiboxMenu/" title="Find this project on GitHub"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
</div>
<div class="content">
<div class="background" style="background-image: url(img/1.jpg)"></div>
<h2 class="content__title">Carmeca</h2>
<p class="content__tagline">Europe's most immersive LARP experience</p>
</div>
<nav class="menu">
<div class="menu__item menu__item--1" data-direction="bt">
<div class="menu__item-inner">
<div class="mainmenu">
Story
Chronicles
Tour
Contact
</div>
<p class="label label--topleft label--vert-mirror">the important stuff</p>
<p class="label label--bottomright label--vert">made in bannockburn</p>
</div>
</div>
<div class="menu__item menu__item--2" data-direction="lr">
<div class="menu__item-inner">
<div class="menu__item-map"></div>
The location
</div>
</div>
<div class="menu__item menu__item--3" data-direction="bt">
<div class="menu__item-inner">
<div class="sidemenu">
<span class="sidemenu__item-inner">The Gameplay</span>
<span class="sidemenu__item-inner">About LARP</span>
<span class="sidemenu__item-inner">The Rules</span>
<span class="sidemenu__item-inner">History</span>
<span class="sidemenu__item-inner">People</span>
<span class="sidemenu__item-inner">Join</span>
<span class="sidemenu__item-inner">...</span>
</div>
</div>
</div>
<div class="menu__item menu__item--4" data-direction="rl">
<div class="menu__item-inner">
<p class="label label--topleft label--line">Join us now</p>
Learn how to <br> participate
</div>
</div>
<div class="menu__item menu__item--5" data-direction="tb">
<div class="menu__item-inner">
<p class="quote">Hail to thee, our infantry, still brave, beyond the grave</p>
</div>
</div>
<button class="action action--menu"><svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg></button>
<button class="action action--close"><svg class="icon icon--close"><use xlink:href="#icon-close"></use></svg></button>
</nav>
</main>
{
// Class Menu.
class Menu {
constructor(el) {
this.DOM = {el: el};
// Open and close ctls.
this.DOM.openCtrl = this.DOM.el.querySelector('.action--menu');
this.DOM.closeCtrl = this.DOM.el.querySelector('.action--close');
this.DOM.openCtrl.addEventListener('click', () => this.open());
this.DOM.closeCtrl.addEventListener('click', () => this.close());
this.DOM.openCtrl.addEventListener('mouseenter', () => {
allowTilt = false;
tilt.reset()
});
this.DOM.openCtrl.addEventListener('mouseleave', () => {
allowTilt = true;
});
// The menu items.
this.DOM.items = Array.from(this.DOM.el.querySelectorAll('.menu__item'));
// The total number of items.
this.itemsTotal = this.DOM.items.length;
// Custom elements that will be animated.
this.DOM.mainLinks = this.DOM.el.querySelectorAll('.mainmenu > a.mainmenu__item');
this.DOM.sidemenuLinks = this.DOM.el.querySelectorAll('.sidemenu span.sidemenu__item-inner');
this.DOM.menulink = this.DOM.el.querySelector('.menu__item-link');
}
// Open the menu.
open() {
this.toggle('open');
}
// Close the menu.
close() {
this.toggle('close');
}
toggle(action) {
if ( this.isAnimating ) return;
// (dis)allow the main image tilt effect.
allowTilt = action === 'open' ? false : true;
this.isAnimating = true;
// Toggling the open state class.
this.DOM.el.classList[action === 'open' ? 'add' : 'remove']('menu--open');
// After all is animated..
const animationEnd = (pos) => {
if ( pos === this.itemsTotal-1 ) {
this.isAnimating = false;
}
};
I have tried to take this line of code and copy it from th JS file this.DOM.closeCtrl.addEventListener('click', () => this.close()); and change the closeCtrl and replace it with mainLinks however that didnt work and to be totally honest I have absolutely no idea what i'm doing.
I would imagine it's a fairly straightforward fix for someone that understands JS.
Hopefully you can help. Thanks

I found a solution, which i'm sure can be improved, but however it does the job...
HTML (add the item--close classes)
Item1
Item2
Item3
Item4
Item5
JAVASCRIPT (add this code demo.js)
// Open and close ctls.
this.DOM.openCtrl = this.DOM.el.querySelector('.action--menu');
this.DOM.closeCtrl = this.DOM.el.querySelector('.action--close');
this.DOM.ItemcloseCtrl1 = this.DOM.el.querySelector('.item--close1');
this.DOM.ItemcloseCtrl2 = this.DOM.el.querySelector('.item--close2');
this.DOM.ItemcloseCtrl3 = this.DOM.el.querySelector('.item--close3');
this.DOM.ItemcloseCtrl4 = this.DOM.el.querySelector('.item--close4');
this.DOM.ItemcloseCtrl5 = this.DOM.el.querySelector('.item--close5');
this.DOM.openCtrl.addEventListener('click', () => this.open());
this.DOM.closeCtrl.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl1.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl2.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl3.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl4.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl5.addEventListener('click', () => this.close());

Trigger Jquery when user scrolls through it

I want to trigger a JQuery event when the user scrolls across a div for the firs time.
I have tried using waypoint. It is not working. Here is the code, it gives no error.
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
}
})
HTML code:
<body>
<!-- main content -->
<div id="push"></div>
<section class="grey darken-4 valign-wrapper">
<div class="container valign">
<div class="col s12">
<h2 class="center-align white-text">Hey!</h2>
<div class="divider"></div>
<p class="center-align white-text flow-text developer"></p>
</div>
</div>
</div>
</section>
<div id="main">
<div class="container" style="padding-top:8px">
<h2 class="center black-text darken-4">Profile</h2>
<h4 class="center teal-text darken-4">
I love to Code <a class="pulse btn-floating"><i class="material-icons">favorite</i></a>
</h4>
<div class="divider"></div>
<div class="row" style="padding-top:5%">
<div class="col s4">
<h4 class=" teal-text darken-4">About me</h4>
<p class="flow-text me" style="font-size:20px">
</p>
</div>
<div class="col s4">
<img src="Images/Aarth.jpg" alt="" class="circle responsive-img">
</div>
<div class="col s4">
<h4 class="teal-text darken-4" style="padding-left:11%">Details</h4>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Name:</strong>
<span class="name "></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Age:</strong>
<span class="age"></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Location:</strong>
<span class="location"></span>
</p>
</div>
</div>
</div>
</div>
</body>
Here are the approaches I have used till now, but nothing worked
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
Help would be great!

To use waypoints, bear in mind there needs to be enough scroll room for the top of the "main" div to hit the top of the viewport. This will vary depending on the size of the browser window the user has open. You can set a % offset from the top of the viewport to make it trigger when the element is a certain distance from the top.
If your "main" div is the last element, you can also use the special "bottom-in-view" offset to make it work once the scroll hits the bottom of the page, even if the top of "main" can't reach the top of the viewport:
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
},
offset: "bottom-in-view"
});
All of this information is available in the documentation. See http://imakewebthings.com/waypoints/api/offset-option/ for more details

jQuery - Show and Hid div's with different based on class

Hey all,
I am trying to make a portfolio page for my new website that will display portfolio items in a grid. The functionality of it seems simple but I can't seem to nail down the jQuery. Here is how I need it to work.
By default I want all items to be shown.
On a specific catagory button click I want it to show the respective divs and hide the rest.
These divs have overlapping classes(some items fit into more then one category). Those divs should be shown when either of their respective class buttons are clicked.
Here is what I was trying to use to make it work(it seems bulky, but I'm a jQuery noob):
$(document).ready(function(){
$('#showall').click(function(){
$(".item").show("fast");
})
$('#webtrigger').click(function(){
if ($('.web').is(':visible')) {
$('.web').show('fast');
} else {
$('.illustration.print.logo').hide('fast');
}
return false;
})
$('#logotrigger').click(function(){
if ($(".logo").is(":visible")) {
$(".logo").show("fast");
} else {
$(".illustration.print.web").hide("fast");
}
return false;
})
});
show all<br/>
web<br/>
illustration<br/>
print<br/>
logo<br />
<div id="wrapper">
<div class="item web">web</div>
<div class="item illustration">illustration</div>
<div class="item print">print</div>
<div class="item logo">logo</div>
<div class="item web logo">web logo</div>
<div class="item print illustration ">illustration print</div>
<div class="item illustration logo">illustration logo</div>
</div>
Any help would be greatly appreciated.
Thanks!

I'd remove the 'trigger' from the various control ids, and add a 'control' class to give:
show all<br/>
web<br/>
illustration<br/>
print<br/>
logo<br />
Then use the jQuery:
$('a.control').click(
function(){
var show = this.id;
$('#wrapper > div.' + show).show();
$('#wrapper > div:not(".'+show+'")').hide();
return false;
});
JS Fiddle demo.

Give this a shot.
$('#webtrigger').click(function(){
var shown = $('.web').show('fast').get();
$('#wrapper > item').not(shown).hide('fast');
return false;
});
It stores the ones you're showing in a variable, then uses not()(docs) to exclude them from the ones being hidden.

I would make something like this :
$('#webtrigger').click(function(){
$(".item").hide();
$('.web').show('fast');
});
You hide all items instantaneously, and then show with animation the divs you are interested in.
Of course, it's the same for all triggers you have.

Something like this should work when you have to pick through the items:
funciton tagClicked(e)
{
var ClassName=$(this).text();
if(ClassName="show all")
{
}
else
{
$.each($('.item'), function(idx,value)
{
if(value.hasClass(ClassName))
{value.show();}
else{ value.hide();}
};
}
}

jQuery:
$(document).ready(function(){
$('#showall').click(function()
{
$(".item").show("fast");
return false;
})
$('.trigger').click(function()
{
var triggerType = $(this).attr("id");
$(".item").hide("fast");
$('.'+triggerType).show('fast');
return false;
});
});
HTML:
<a href="#" id="showall">show all
<a href="#" id="web" class="trigger">web
<a href="#" id="illustration" class="trigger">illustration
<a href="#" id="print" class="trigger">print
<a href="#" id="logo" class="trigger">logo
<div id="wrapper">
<div class="item web">web</div>
<div class="item illustration">illustration</div>
<div class="item print">print</div>
<div class="item logo">logo</div>
<div class="item web logo">web logo</div>
<div class="item print illustration ">illustration print</div>
<div class="item illustration logo">illustration logo</div>
</div>

I would do a trick and use the id of the link to trigger the class of the content:
show all<br/>
web<br/>
illustration<br/>
print<br/>
logo<br />
<div id="wrapper">
<div class="item web">web</div>
<div class="item illustration">illustration</div>
<div class="item print">print</div>
<div class="item logo">logo</div>
<div class="item web logo">web logo</div>
<div class="item print illustration ">illustration print</div>
<div class="item illustration logo">illustration logo</div>
</div>
To show them all by default, use css
.item { display:block; }
Then jquery to display them:
$(document).ready(function(){
$(".showall").click(function(){$(".item").fadeIn(300);});
$(".trigger").click(function(){
var contentToDisplay = $("."+this.id);
if (contentToDisplay.is(":visible")) return;
$(".item").fadeOut(300); // I prefer this to hide effect
contentToDisplay.fadeIn(500);
});
});