I have 2 questions
Please help me understand some JavaScript to create an accordion menu I got from W3Schools
css
<style>
button.accordion_f {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 14px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion_f.active, button.accordion_f:hover {
background-color: #ddd;
color: blue;
}
button.accordion_f:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion_f.active:after {
color: blue;
content: "\2796";
}
div.panel {
padding: 0 14px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.3s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 6000px;
}
</style>
JavaScript
<script>
var acc = document.getElementsByClassName("accordion_f");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
Example use
<button class="accordion_f">3rd party compatibility</button>
<div class="panel">
<p>Offers an easy way to connect your Polar training device with 3<sup>rd</sup> party services.</p>
</div>
This works correctly
If I encapsulate this in another class for example in a pill menu it will not expand the menu, the css seems to work, the background shading etc, when I inspect the element I do not see the script, is the parent class affecting document.getElementsByClassName some how?
<ul class="tabs">
<button class="accordion_f">3rd party compatibility</button>
<div class="panel">
<p>Offers an easy way to connect your Polar training device with 3<sup>rd</sup> party services.</p>
</div>
</ul>
How do I put my script into a function and call it with onclick or onmouseover?
I tried:
<button class="accordion_f" onmouseover="accordion_menu()">Activity</button>
<div class="panel">
<p>Tracks your daily activity at five intensity levels for 24 hours a day, seven days a week, and provides a complete picture of all of your activity. It counts your active time, daily burnt calories, steps, distance from steps and sleep.</p>
</div>
function accordion_menu(){
var acc = document.getElementsByClassName("accordion_f");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick.classList.toggle("active");
acc[i].onclick.nextElementSibling.classList.toggle("show");
}
}
This just opened all panels with a class of accordion_f, not just the active one as I would like.
It is working, I.E was in compatibility mode and ie8 had poor support for document.getElementsByClassName
Related
I have an FAQ page on the website I am building right now. I got the faq section from a template. I tried to use Javascript within my NextJs Projekt but it is not working.
var faq = document.getElementsByClassName("faqpage");
var i;
for (i = 0; i < faq.length; i++) {
faq[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var body = this.nextElementSibling;
if (body.style.display === "block") {
body.style.display = "none";
} else {
body.style.display = "block";
}
});
}
var cpt = document.getElementsByClassName("faqbody");
var i;
for (i = 0; i < faq.length; i++) {
cpt[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var body = this.nextElementSibling;
if (body.style.display === "block") {
body.style.display = "none";
} else {
body.style.display = "block";
}
});
}
.Faq {
background-color: rgba(46,40,35,255);
padding-top: 50px;
padding-bottom: 150px;
}
.Faq h2 {
color: white;
text-align: center;
font-size: 4vh;
margin-bottom: 20px;
}
.faqcontainer{
display: flex;
justify-content: center;
flex-direction: column;
}
.hrline{
width: 62%;
margin: auto;
margin-top: 20px;
}
.faqpage {
cursor: pointer;
padding: 30px 20px;
width: 60%;
border: none;
font-size: 25px;
font-weight: 600;
outline: none;
transition: 0.4s;
margin: auto;
color: #EC2628;
}
.faqbody{
margin: auto;
/* text-align: center; */
width: 50%;
line-height: 30px;
font-size: 20px;
padding: 0 18px;
display: none;
overflow: hidden;
padding-bottom: 20px;
}
.faqpage:after {
content: '\002B';
/* Unicode character for "plus" sign (+) */
font-size: 35px;
font-weight: 100;
color: white;
float: right;
transition-duration: 0.5s;
}
.active:after {
transform: rotate(45deg);
/* Unicode character for "minus" sign (-) */
font-weight: 100;
}
<div className={styles.Faq}>
<h2>FAQ</h2>
<div className={styles.faqone}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<div className={styles.faqtwo}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<div className={styles.faqthree}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<div className={styles.faqfour}>
<h1 className={styles.faqpage}>How can I join the community?</h1>
<div className={styles.faqbody}>
<p>We have a very active community and we welcome new members with open arms! Come and chat with us on Discord.</p>
</div>
</div>
<hr className={styles.hrline}/>
<Script src="../components/FAQLOC.js"></Script>
</div>
I thought it has something to do with the classes and that javascript cannot grab the classes from nextjs but I also don't know how to solve this problem.
The Snippet is so that you can see all of my CODE!
Can someone help me?
Components on Nextjs are all server-side by default so you don't have access to the document object. Have you tried importing your component dynamically and setting SSR to false? https://nextjs.org/docs/advanced-features/dynamic-import
I'm new to programming and currently working on my portfolio. I've created a dropdown list that appears when a user hovers over it. Once it appears I want to make the rest of the website darker so the dropdown list can stand out from the rest.
I'm trying to use the body::after pseudo class for that and it works but not when I hover over the dropdown so I must be doing something wrong. Could anyone please help me?
The dropdown list has a class of .dropdown
body::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
background-color: black;
opacity: 0;
z-index: -1;
}
.dropdown:hover body::after {
opacity: 0.5;
}
Link to my project in case that helps:
https://annaxt.github.io/product_landing_page/plant_store.html
Thank you!
You could add the overlay as it's own element and then control the opacity using JavaScript. Everything you would want to show above it would need to have a z-index higher than what you're setting on the overlay and everything that would be affected by the overlay should have a lower z-index (default is 0).
let overlay = document.getElementById("overlay");
function showOverlay() {
overlay.style.zindex = 9;
overlay.style.opacity = 0.3;
}
function hideOverlay() {
overlay.style.zindex = -1;
overlay.style.opacity = 0;
}
#overlay {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: black;
opacity: 0;
z-index: -1;
transition: opacity .8s;
}
.dropdown {
font-size: 50px;
background: #369;
color: white;
font-family: sans-serif;
}
<body>
<div class="dropdown" onmouseout="hideOverlay()" onmouseover="showOverlay()">Hover me</div>
<div id="overlay" />
</body>
I am not sure whether we can do this with css or not. but what you are trying to achieve can be easily done by js.
Below is code to help you.
$(document).ready(function() {
$(".dropdown").mouseenter(function() {
$("body").addClass("open");
});
$(".dropdown").mouseleave(function() {
$("body").removeClass("open");
});
});
.main {
display: flex;
}
.open {
height: 100%;
width: 100%;
background: #232323;
transition:.5s;
}
.dropdown {
background-color: #f5f5f5;
height: 200px;
width: 200px;
margin-right: 15px;
transition:.5s;
}
.main:hover .dropdown{
filter:blur(1px);
}
.main:hover .dropdown:hover {
background-color: red;
filter:blur(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="dropdown">
dropdown1
</div>
<div class="dropdown">
dropdown2
</div>
<div class="dropdown">
dropdown3
</div>
<div class="dropdown">
dropdown4
</div>
</div>
</body>
Good time. There is an accordion menu at this link: https://www.w3schools.com/code/tryit.asp?filename=G3Z0U159KFM3
(to see it, you need to click on the green "Run" button)
This is a simple show / hide menu. How to make the default content was expanded and by clicking could hide it? (i.e. the opposite of the current one)
Dears, please help with this problem.
Well, although the way you described your issue wasn't clear, I think you are trying to do the opposite of the code you provided, so you would like the "contents" menu to be shown by default and when you click on it the menu would collapse back.
First you want to set the .active class by default to the .ContentsAccordion button like so :
<button class="ContentsAccordion active">Contents</button>
And then you want to get the height of your menu and put it into the style element of your .ContentsPanel div with this code :
var pan = document.getElementsByClassName("ContentsPanel");
pan[0].setAttribute('style', 'max-height: ' + pan[0].scrollHeight + 'px;');
and the rest of your code doesn't need any change.
Working example below :
<style>
.ContentsAccordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
}
button.ContentsAccordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.ContentsAccordion.active:after {
content: '\2212';
}
.active, .ContentsAccordion:hover {
background-color: #ccc;
}
.ContentsPanel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
border: 1px #ccc solid;
}
.ContentsAccordionP {
font-size: 16px;
}
</style>
<button class="ContentsAccordion active">Contents</button>
<div class="ContentsPanel">
<p class="ContentsAccordionP">Some text 1</p>
<p class="ContentsAccordionP">Some text 2</p>
<p class="ContentsAccordionP">Some text 3</p>
</div>
<script>
var acc = document.getElementsByClassName("ContentsAccordion");
var i;
var pan = document.getElementsByClassName("ContentsPanel");
pan[0].setAttribute('style', 'max-height: ' + pan[0].scrollHeight + 'px;');
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
This code is the untouched version of a FAQ consisting of three answers that can be shown or hidden when click on it. My task is to modify to show only one answer at a time (the other two must close).
I got a hint to use a for loop to go through the h2 elements in the array and remove the class attribute for all h2 elements that aren’t the one that has been clicked.
Thank you,
"use strict";
var $ = function(id) { return document.getElementById(id); };
// the event handler for the click event of each h2 element
var toggle = function() {
var h2 = this; // clicked h2 tag
var div = h2.nextElementSibling; // h2 tag's sibling div tag
// toggle plus and minus image in h2 elements by adding or removing a class
if (h2.hasAttribute("class")) {
h2.removeAttribute("class");
} else {
h2.setAttribute("class", "minus");
}
// toggle div visibility by adding or removing a class
if (div.hasAttribute("class")) {
div.removeAttribute("class");
} else {
div.setAttribute("class", "open");
}
};
window.onload = function() {
// get the h2 tags
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
// attach event handler for each h2 tag
for (var i = 0; i < h2Elements.length; i++ ) {
h2Elements[i].onclick = toggle;
}
// set focus on first h2 tag's <a> tag
h2Elements[0].firstChild.focus();
};
HTML for the script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQs</title>
<link rel="stylesheet" href="main.css">
<script src="faqs.js"></script>
</head>
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div>
<p>JavaScript is a programming language that's built into the major web browsers.
It makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2>What is jQuery?</h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop web sites.
</p>
</div>
<h2>Why is jQuery becoming so popular?</h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>
</html>
And CSS for the script:
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
padding: 15px 25px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
cursor: pointer;
background: url(images/plus.png) no-repeat left center;
}
h2.minus {
background: url(images/minus.png) no-repeat left center;
}
a {
color: black;
text-decoration: none;
}
a:focus, a:hover {
color: blue;
}
div {
display: none;
}
div.open {
display: block;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .25em;
}
p {
padding-bottom: .25em;
padding-left: 25px;
}
Something like the following might do the trick assuming your existing script/markup is currently working. I can't test my answer without the HTML/CSS.
Essentially it just iterates over the faq items when ones clicked and hides them if they aren't the element that was clicked or shows if it is the element clicked - it won't toggle if the same element is clicked twice - one will always remain open.
"use strict";
var $ = function(id) { return document.getElementById(id); };
// the event handler for the click event of each h2 element
window.onload = function() {
// get the h2 tags
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
function accordionClick(){
var h2;
for(var i=0; i < h2Elements.length; i++){
h2 = h2Elements[i];
if(h2 == this){ // The item we clicked
if(!h2.hasAttribute("class")){ // If it's open
closeItem(h2);
} else{ // If not
openItem(h2);
}
} else{ // Not the item we clicked so it should be closed
closeItem(h2);
}
}
}
function openItem(h2){
var div = h2.nextElementSibling;
h2.removeAttribute("class")
div.setAttribute("class", "open");
}
function closeItem(h2){
var div = h2.nextElementSibling;
h2.setAttribute("class", "minus")
div.removeAttribute("class");
}
// attach event handler for each h2 tag and init classes
for (var i = 0; i < h2Elements.length; i++ ) {
h2Elements[i].onclick = accordionClick;
closeItem(h2Elements[i]);
}
// set focus on first h2 tag's <a> tag
h2Elements[0].firstChild.focus();
};
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
padding: 15px 25px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
cursor: pointer;
background: url(images/plus.png) no-repeat left center;
}
h2.minus {
background: url(images/minus.png) no-repeat left center;
}
a {
color: black;
text-decoration: none;
}
a:focus, a:hover {
color: blue;
}
div {
display: none;
}
div.open {
display: block;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .25em;
}
p {
padding-bottom: .25em;
padding-left: 25px;
}
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div>
<p>JavaScript is a programming language that's built into the major web browsers.
It makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2>What is jQuery?</h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop web sites.
</p>
</div>
<h2>Why is jQuery becoming so popular?</h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
Okay, I change the appearance of links using JavaScript. When I change the content of a hard-coded link, it sticks in that the changed color and underlining remains when the cursor is not hovering above it. However, when the content of a DIV has been changed using JavaScript, the style changes do not stick.
Here is the HTML code:
<!doctype html>
<html>
<head>
<title>Bla bla</title>
<meta charset="UTF-8">
<link href="style/kim.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/Kim.js"></script>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="nav">
<div class="topNav">
<ul>
<li onClick="changeNav('design')">Design</li>
<li onClick="changeNav('code')">Programming</li>
<li onClick="changeNav('science')">Science</li>
<li onClick="changeNav('Kim')">Kim</li>
</ul>
</div>
<div id="subNav">
<script>changeNav("design");</script>
</div>
</div>
<div class="content">
<p id="mainText">Test</p>
</div>
</div>
</div>
</body>
</html>
Here is the JS code:
var topNavNames = ["design", "code", "science", "Kim"];
var subNavCode = ["<ul><li onClick=\"loadPHP('design/websites.php', 'sub0')\">Websites</li><li onClick=\"loadPHP('design/graphics.php', 'sub1')\">Graphics</li><li onClick=\"loadPHP('design/flash.php', 'sub2')\">Flash</li></ul>",
"<ul><li onClick=\"loadPHP('code/interactive.php', 'sub0')\">Interactive applets</li><li onClick=\"loadPHP('code/statistics.php', 'sub1')\">Statistics</li><li onClick=\"loadPHP('code/wings.php', 'sub2')\">Wings</li><li onClick=\"loadPHP('code/3D.php', 'sub3')\">3D</li></ul>",
"<ul><li onClick=\"loadPHP('science/3D.php', 'sub0')\">3D</li><li onClick=\"loadPHP('science/ssd.php', 'sub1')\">Sexual Size Dimorphism</li><li onClick=\"loadPHP('science/shape.php', 'sub2')\">Wing shape</li><li onClick=\"loadPHP('science/phylogenetics.php', 'sub3')\"><i>Drosophila</i> phylogenetics</li><li onClick=\"loadPHP('science/communitygenetics.php', 'sub4')\">Community Genetics</li><li onClick=\"loadPHP('science/biodiversity.php', 'sub5')\">Biodiversity</li></ul>",
"<ul><li onClick=\"loadPHP('Kim.php', 'sub0')\">Who is Kim?</li><li onClick=\"loadPHP('animals/horses.php', 'sub1')\">Horses</li><li onClick=\"loadPHP('animals/birds.php', 'sub2')\">Birds</li><li onClick=\"loadPHP('private/outdoors.php', 'sub3')\">Outdoors</li><li onClick=\"loadPHP('contact.php', 'sub4')\">Contact</li></ul>"];
function changeNav(target) {
for (var i = 0; i<topNavNames.length; i++) {
if (target == topNavNames[i]) {
document.getElementById("subNav").innerHTML=subNavCode[i];
document.getElementById(topNavNames[i]).style.color="#F7EDAA";
document.getElementById(topNavNames[i]).style.borderBottom="thin solid #F7EDAA";
}
else {
document.getElementById(topNavNames[i]).style.color="#EEE";
document.getElementById(topNavNames[i]).style.borderBottom="thin solid #111";
}
}
}
function loadPHP(url, target) {
for (var i = 0; i<10; i++) {
if(document.getElementById(target)!=null) {
if (("sub"+i) == target) {
document.getElementById(target).style.color="#F7EDAA";
document.getElementById(target).style.borderBottom="thin solid #F7EDAA";
}
else {
document.getElementById(target).style.color="#EEE";
document.getElementById(target).style.borderBottom="thin solid #111";
}
}
}
}
if I subsequently remove the:
else {
document.getElementById(target).style.color="#EEE";
document.getElementById(target).style.borderBottom="thin solid #111";
}
from the loadPHP function, it changes the style, but does not reset it when the next link is clicked.
I observed this behavior in FireFox, Internet Exploder and Chrome.
Added: CSS code:
body {
background-color: #111111;
color: #DDD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.wrapper {
overflow: auto;
}
.banner {
float: left;
position: relative;
width: 100px;
}
.main {
position: relative;
width: 80%;
left: 25px;
font-size: 14px;
font-weight: normal;
}
a {
text-decoration: none;
color: #EEE;
}
a:hover {
border-bottom: thin solid #F7EDAA !important;
color: #F7EDAA !important;
}
.topNav {
height: 45px;
position: relative;
left: 100px;
font-size: large;
border: thin solid #111;
}
#subNav {
height: 45px;
position: relative;
left: 100px;
top: 2px;
border: thin solid #111;
}
.topNav li, #subNav li {
float: left;
margin: 10px 15px;
}
.topNav ul, #subNav ul {
list-style: none;
padding: 0px 0px;
margin: 0px 0px;
position: relative;
left: -100px;
}
.content {
position: relative;
left: 15px;
padding: 0px 0px;
margin: 0px 0px;
}
.content p {
padding: 5px 5px;
margin: 10px 15px;
left: -100px;
}
In my opinion you´re using the wrong technology to achieve your goal. What you need to do is to write your styles in a css stylesheet, and then add or remove classes to your elements using js if you want. (You can also do this through something called specificity, a little far ahead from the scope of your question)
Also think that if there is some bug in your script, or a third party script called in your page, JS may break and it won´t process your styling changes.
So, add the basic styling to your elements through css in the initial markup, so you will be sure that your elements will have always a basic styling, and then if you want use the equivalent to .addClass or removeClass jQuery methods.
In that way you will be always sure that your frontend will have always a safe styling, won´t break if js is not loaded, and separation of concerns will be properly implemented.
Regards.
I figured it out. The following code does not do the right thing:
function loadPHP(url, target) {
for (var i = 0; i<subNavNames.length; i++) {
if (target == subNavNames[i]){
document.getElementById(target).className="selected";
} else {
document.getElementById(target).className="notSelected";
}
}
While this code does produce the right result:
function loadPHP(url, target) {
for (var i = 0; i<subNavNames.length; i++) {
if (target == subNavNames[i]) {
document.getElementById(subNavNames[i]).className="selected";
} else {
document.getElementById(subNavNames[i]).className="notSelected";
}
}
The difference is that in the first example, and in the example of the original question, I use the variable passed on in the method (target), to find the element. In the second, I use the appropriate element from a array that I have added to the list. I am not sure WHY this behaves differently, but it does.