toggling innerHTML in Javascript

toggling innerHTML in Javascript - javascript

I want to toggle between two icons by clicking on .switch and apply the style of .nightTextNight to .nightText, my JavaScript code works everywhere except here.
And can anyone suggest me any other way to make it simpler?
Because, for every little change I need to create two class and give it an id.
var nightBtn = document.getElementById("switch");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var nightText = document.getElementById("nightText");
function nightMode() {
nightBtn.classList.toggle("switchNight");
body.classList.toggle("night");
navbar.classList.toggle("navbarNight");
nightText.classList.toggle("nightTextNight");
if(nightText.className = "nightTextNight") {
nightText.innerHTML = "<i class='fa fa-sun-o' aria-hidden='true'></i>";
} else {
nightText.innerHTML = "<i class='fa fa-moon-o' aria-hidden='true'></i>";
};
}
body {
background-color: white;
transition: background-color ease 0.3s;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.night {
background-color: #3f4b5e;
transition: background-color ease 1s;
}
.switch {
height: 35px;
width: 35px;
border-radius: 50%;
background-color: #092d30;
border: 3px solid wheat;
float: right;
z-index: 4;
transition: background-color ease 1s;
margin-top: 12px;
margin-right: 4px;
cursor: pointer;
text-align: center;
line-height: 17.5px;
position: relative;
}
.switchNight {
background-color: wheat;
border: 3px solid #092d30;
z-index: 4;
transition: background-color ease 1s;
}
.textNight {
color: white;
}
.switch:hover {
background-color: #4d5e77;
transition: background-color ease 1s;
}
.switchNight:hover {
background-color: #fff2d8;
transition: background-color ease 1s;
}
/* --------------------- NAV BAR ------------------ */
.navbar {
width: 100%;
height: auto;
background: #f4f7f9;
position: fixed;
margin-top: 0;
padding: 0;
border-bottom: 3px solid #2fb3f9;
}
.navbar li {
list-style-type: none;
display: inline;
height: auto;
}
.navbar li a {
padding: 20px 25px;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: bolder;
color: #516f7f;
}
.navbar li a:hover {
color: #ff9d00;
transition: color ease 0.3s;
}
.navbarNight {
background-color: #556bb5;
border-bottom: 3px solid white;
}
.navbarNight li a {
color: white;
}
.nightText {
position: absolute;
color: white;
font-weight: bolder;
top: 9px;
right: 12px;
}
.nightTextNight {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Night Mode - TEST</title>
</head>
<body id="body">
<div id="container">
<div id="nav">
<ul id="navbar" class="navbar">
<li>Home</li>
<li>About me</li>
<li><div id="switch" class="switch" onclick="nightMode()"><span id="nightText" class="nightText"><i class="fa fa-moon-o" aria-hidden="true"></i></span></div></li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

It wasn't working because you've got two classes:
nightText nightTextNight
So you need to check:
if(nightText.className === "nightText nightTextNight")
var nightBtn = document.getElementById("switch");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var nightText = document.getElementById("nightText");
function nightMode() {
nightBtn.classList.toggle("switchNight");
body.classList.toggle("night");
navbar.classList.toggle("navbarNight");
nightText.classList.toggle("nightTextNight");
if(nightText.className === "nightText nightTextNight") {
nightText.innerHTML = "<i class='fa fa-sun-o' aria-hidden='true'></i>";
} else {
nightText.innerHTML = "<i class='fa fa-moon-o' aria-hidden='true'></i>";
};
console.log(nightText.className);
}
body {
background-color: white;
transition: background-color ease 0.3s;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.night {
background-color: #3f4b5e;
transition: background-color ease 1s;
}
.switch {
height: 35px;
width: 35px;
border-radius: 50%;
background-color: #092d30;
border: 3px solid wheat;
float: right;
z-index: 4;
transition: background-color ease 1s;
margin-top: 12px;
margin-right: 4px;
cursor: pointer;
text-align: center;
line-height: 17.5px;
position: relative;
}
.switchNight {
background-color: wheat;
border: 3px solid #092d30;
z-index: 4;
transition: background-color ease 1s;
}
.textNight {
color: white;
}
.switch:hover {
background-color: #4d5e77;
transition: background-color ease 1s;
}
.switchNight:hover {
background-color: #fff2d8;
transition: background-color ease 1s;
}
/* --------------------- NAV BAR ------------------ */
.navbar {
width: 100%;
height: auto;
background: #f4f7f9;
position: fixed;
margin-top: 0;
padding: 0;
border-bottom: 3px solid #2fb3f9;
}
.navbar li {
list-style-type: none;
display: inline;
height: auto;
}
.navbar li a {
padding: 20px 25px;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: bolder;
color: #516f7f;
}
.navbar li a:hover {
color: #ff9d00;
transition: color ease 0.3s;
}
.navbarNight {
background-color: #556bb5;
border-bottom: 3px solid white;
}
.navbarNight li a {
color: white;
}
.nightText {
position: absolute;
color: white;
font-weight: bolder;
top: 9px;
right: 12px;
}
.nightTextNight {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Night Mode - TEST</title>
</head>
<body id="body">
<div id="container">
<div id="nav">
<ul id="navbar" class="navbar">
<li>Home</li>
<li>About me</li>
<li><div id="switch" class="switch" onclick="nightMode()"><span id="nightText" class="nightText"><i class="fa fa-moon-o" aria-hidden="true"></i></span></div></li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
PD: I added console.log(nightText.className); to show the classes, you can remove it.

You can just toggle the icon class instead of changing the entire i tag
var nightBtn = document.getElementById("switch");
var nightBtnIcon = document.getElementById("switch-icon");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
function nightMode() {
nightBtn.classList.toggle("switchNight");
body.classList.toggle("night");
navbar.classList.toggle("navbarNight");
nightBtnIcon.classList.toggle("fa-sun-o");
nightBtnIcon.classList.toggle("fa-moon-o");
}
HTML:
<ul id="navbar" class="navbar">
<li>Home</li>
<li>About me</li>
<li><div id="switch" class="switch" onclick="nightMode()"><i class="icon fa fa-moon-o" aria-hidden="true" id=“switch-icon”></i></span></div></li>
</ul>

What about wrapping all of the elements that might have a night style different in a div, or even in the body, and then just apply a night class to that wrapper.
You could then add different styles to your elements along the lines of:
.night .navbar {
... just night-related style differences ...
}
Then, your toggle would only have to add or remove the class from the wrapping element. You would still have to add new classes for those things that you want to change, but it would only be for the properties you want to change on them.

The best way to ignore the id to use an Attribute and loop like data-mode
see this example :
var modes={
day:{
switch:"switch", body:"day", navbar:"navbar",icon:"fa fa-moon-o"
},
night:{
switch:"switchNight switch", body:"night day", navbar:"navbarNight navbar",icon:"fa fa-sun-o"
}
}
function changeMode(arg){
window.mode=arg;
var elem=document.querySelectorAll('[data-mode]');
for (var i=0; i<elem.length; i++){
var key=elem[i].getAttribute("data-mode");
elem[i].classList=modes[arg][key];
}
}
window.mode="day";
body {
background-color: white;
transition: background-color ease 0.3s;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.night {
background-color: #3f4b5e;
transition: background-color ease 1s;
}
.switch {
height: 35px;
width: 35px;
border-radius: 50%;
background-color: #092d30;
border: 3px solid wheat;
float: right;
z-index: 4;
transition: background-color ease 1s;
margin-top: 12px;
margin-right: 4px;
cursor: pointer;
text-align: center;
line-height: 17.5px;
position: relative;
}
.switchNight {
background-color: wheat;
border: 3px solid #092d30;
z-index: 4;
transition: background-color ease 1s;
}
.textNight {
color: white;
}
.switch:hover {
background-color: #4d5e77;
transition: background-color ease 1s;
}
.switchNight:hover {
background-color: #fff2d8;
transition: background-color ease 1s;
}
/* --------------------- NAV BAR ------------------ */
.navbar {
width: 100%;
height: auto;
background: #f4f7f9;
position: fixed;
margin-top: 0;
padding: 0;
border-bottom: 3px solid #2fb3f9;
}
.navbar li {
list-style-type: none;
display: inline;
height: auto;
}
.navbar li a {
padding: 20px 25px;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: bolder;
color: #516f7f;
}
.navbar li a:hover {
color: #ff9d00;
transition: color ease 0.3s;
}
.navbarNight {
background-color: #556bb5;
border-bottom: 3px solid white;
}
.navbarNight li a {
color: white;
}
.nightText {
position: absolute;
color: white;
font-weight: bolder;
top: 9px;
right: 12px;
}
.nightTextNight {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Night Mode - TEST</title>
</head>
<body data-mode="body">
<div>
<div>
<ul class="navbar" data-mode="navbar">
<li>Home</li>
<li>About me</li>
<li><div class="switch" data-mode="switch" onclick="changeMode(mode=='night'?'day':'night');">
<span class="nightText">
<i class="fa fa-moon-o" data-mode="icon"></i>
</span>
</div>
</li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Related

How to change the showing section with javascript

i am trying to develop a "dashboard" style website, using php, javascript, html and css. After i made the sidebar, i am trying to change the "page", like, the user is in the home page, after he clicks in any icon of the sidebar, he would change the section (it was hidden, now it is show, for example), without changing the page. I am using a script that i used in another website that i made, but can't figure it out to work in this project, i don't know if it is because i am using php (in the other project, i didn't), or i am messing up the code. If anyone can help, i would appreciate ;)
!(function($) {
"use strict";
// Nav Menu
$(document).on('click', '.nav-menu a, .mobile-nav a', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var hash = this.hash;
var target = $(hash);
if (target.length) {
e.preventDefault();
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if (hash == '#home') {
$('#home').removeClass('home-top');
$("section").removeClass('section-show');
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return;
}
if (!$('#home').hasClass('home-top')) {
$('#home').addClass('home-top');
setTimeout(function() {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}, 350);
} else {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}
$('html, body').animate({
scrollTop: 0
}, 350);
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Activate/show sections on load with hash links
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
$('#home').addClass('home-top');
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$('.nav-menu, .mobile-nav').find('a[href="' + initial_nav + '"]').parent('li').addClass('active');
setTimeout(function() {
$("section").removeClass('section-show');
$(initial_nav).addClass('section-show');
}, 350);
}
}
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
})(jQuery);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 14px;
line-height: 1.3;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
background: #2d2d2d;
display: flex;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
color: white;
padding: 16px;
}
.sidebar{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #0f0f0f;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open{
width: 250px;
}
.sidebar .logo-details{
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon{
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
opacity: 1;
padding-left: 20px;
}
.sidebar .logo-details #btn{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn{
text-align: right;
}
.sidebar i{
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list{
margin-top: 20px;
height: 100%;
}
.sidebar li{
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar li:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip{
display: none;
}
.sidebar input{
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #0f0f0f;
}
.sidebar.open input{
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #0f0f0f;
color: #FFF;
}
.sidebar.open .bx-search:hover{
background: #0f0f0f;
color: #FFF;
}
.sidebar .bx-search:hover{
background: #FFF;
color: #2d2d2d;
}
.sidebar li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #0f0f0f;
}
.sidebar li a:hover{
background: #FFF;
}
.sidebar li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name{
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i{
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i{
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile{
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #0f0f0f;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile{
width: 250px;
}
.sidebar li .profile-details{
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job{
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job{
font-size: 12px;
}
.sidebar .profile #log_out{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #0f0f0f;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
width: 50px;
background: none;
right: 40%;
}
.home-section{
position: relative;
background: #E4E9F7;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open ~ .home-section{
left: 250px;
width: calc(100% - 250px);
}
.home-section .text{
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip{
display: none;
}
}
.main {
background-color: #0f0f0f;
width: 100%;
padding: 50px;
margin-left: 110px;
margin-top: 60px;
margin-bottom: 60px;
margin-right: 60px;
border-radius: 50px;
display: flex;
}
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
transition: ease-in-out 0.4s;
z-index: 2;
}
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
padding-bottom: 45px;
}
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/painel.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<title>Prosw Treinamentos</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<div class="logo_name">Prosw Cursos</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<nav>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li class="active">
<a href="#home">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Videos</span>
</a>
<span class="tooltip">Videos</span>
</li>
<li>
<a href="#duvidas">
<i class='bx bx-chat' ></i>
<span class="links_name">Duvidas</span>
</a>
<span class="tooltip">Duvidas</span>
</li>
<li>
<a href="#tutorial">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Tutorial de uso</span>
</a>
<span class="tooltip">Tutorial</span>
</li>
<li>
<a href="#settings">
<i class='bx bx-cog' ></i>
<span class="links_name">Configurações</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</nav>
</div>
<div class="main">
<section id="home" class="home-top">
<div class="content">
<header>
<h1>Treinamentos</h1>
</header>
</div>
</section>
<section id="duvidas">
<div class="content">
<header>
<h1>Dúvidas</h1>
</header>
</div>
</section>
<section id="tutorial">
<div class="content">
<header>
<h1>Tutorial</h1>
</header>
</div>
</section>
<section id="settings">
<div class="content">
<header>
<h1>Configurações</h1>
</header>
</div>
</section>
</div>
<script>
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
</script>
<script src="js/main.js"></script>
</body>
</html>

You have not added the jquery library
add this
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Clicking on the options of an active filter does not work

I am trying to create a filter like the one here.
I have written some code in an HTML file and the aspect is identical, but the JavaScript does not work, meaning that if I click on a different option that the one active by default then nothing happens.
$(document).ready(function() {
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target"));
});
})
body {
background-color: #eee;
margin: 0;
padding: 0;
font-family: Tahoma;
}
h2 {
text-align: center;
}
#filter-bar {
width: 100%;
margin: 0;
padding: 0;
height: 36px;
display: inline-flex;
}
#wrapper-filter {
background-color: #fff;
width: 570px;
height: auto;
margin: 30px auto;
border-radius: 30px;
box-sizing: border-box;
}
#filter-bar li {
width: 190px;
background-color: transparent;
text-align: center;
list-style-type: none;
z-index: 10;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-weight: 100;
font-size: 15px;
line-height: 36px;
}
.pill {
position: absolute;
width: 190px;
height: 38px;
background-color: #39c;
border-radius: 30px;
color: #444;
z-index: 10;
border: 5px solid #eee;
box-sizing: border-box;
}
.filter-option {
transition: color 500ms;
}
#filter-bar.option-1 .pill {
margin-left: 0px;
transition: margin-left 200ms ease;
}
#filter-bar.option-2 .pill {
margin-left: 187px;
transition: margin-left 200ms ease;
}
#filter-bar.option-3 .pill {
margin-left: 380px;
transition: margin-left 200ms ease;
}
.option-1.active,
.option-2.active,
.option-3.active {
color: #fff;
transition: color 200ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Animated filter selector</h2>
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option option-1 active" data-target="option-1">Books</li>
<li class="filter-option option-2" data-target="option-2">Shoes</li>
<li class="filter-option option-3" data-target="option-3">Toys</li>
</ul>
</div>
So, what I think is that the Javascript script is not visible at all, so what it should do, does not happen at all.
Did I place it wrongly? I am a front-end beginner, so I am not sure what is wrong.
Can anyone help me?

Your code works fine, you just missed adding jQuery, add this to the head section in your html file <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This will add the jQuery library to your project, jQuery will add a bunch of new features. Take a look at the docs here
$(document).ready(function() {
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target"));
});
})
body {
background-color: #eee;
margin: 0;
padding: 0;
font-family: Tahoma;
}
h2 {
text-align: center;
}
#filter-bar {
width: 100%;
margin: 0;
padding: 0;
height: 36px;
display: inline-flex;
}
#wrapper-filter {
background-color: #fff;
width: 570px;
height: auto;
margin: 30px auto;
border-radius: 30px;
box-sizing: border-box;
}
#filter-bar li {
width: 190px;
background-color: transparent;
text-align: center;
list-style-type: none;
z-index: 10;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-weight: 100;
font-size: 15px;
line-height: 36px;
}
.pill {
position: absolute;
width: 190px;
height: 38px;
background-color: #39c;
border-radius: 30px;
color: #444;
z-index: 10;
border: 5px solid #eee;
box-sizing: border-box;
}
.filter-option {
transition: color 500ms;
}
#filter-bar.option-1 .pill {
margin-left: 0px;
transition: margin-left 200ms ease;
}
#filter-bar.option-2 .pill {
margin-left: 187px;
transition: margin-left 200ms ease;
}
#filter-bar.option-3 .pill {
margin-left: 380px;
transition: margin-left 200ms ease;
}
.option-1.active,
.option-2.active,
.option-3.active {
color: #fff;
transition: color 200ms;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>Animated filter selector</h2>
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option option-1 active" data-target="option-1">Books</li>
<li class="filter-option option-2" data-target="option-2">Shoes</li>
<li class="filter-option option-3" data-target="option-3">Toys</li>
</ul>
</div>
</body>
</html>

making javascript push menu scrollable (no scrollbar)

I've got a push menu (left to right) that slides out from the left of the page sliding the page to the right. I'm trying to add a safeguard to it to where if the links exceed the page height, the menu is scrollable. Right now, it doesn't work and links get hidden. Can someone help me figure out how to make the menu scrollable.
I've tried adding scroll-y: scroll to a couple of the css elements but that didn't seem to make any difference. I'd like for the scroll feature to work on phones as well with scrolling via touch.
And also, I'd like to see how to disable scroll on the "body" when the menu is open.
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
.pushmenu {
background: #444;
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
width: 300px;
height: 100%;
top: 0;
z-index: 1000;
position: fixed;
}
.pushmenu h3 {
color: #f1f1f1;
font-size: 1.3em;
font-weight: 400;
padding: 15px 25px;
margin: 0;
background: #333;
height: 16px;
}
.links {
list-style-type: none;
padding: 0;
margin: 0 0 0 25%;
width: 50%;
}
.links li { margin-top: 30px; }
.links li a {
position: relative;
display: block;
color: #f1f1f1;
font-size: 1.3em;
font-weight: 400;
text-decoration: none;
padding: 14px;
}
.links li a:after {
content: '';
display: block;
position: absolute;
left: 20px;
bottom: -5px;
width: 0;
height: 4px;
background-color: #f1f1f1;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
transition: width 0.3s ease;
}
.links li a:hover:after { width: 70%; }
.links li a:active { color: #dbdbdb; }
.pushmenu-left { left: -300px; }
.pushmenu-left.pushmenu-open { left: 0; }
.pushmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.pushmenu-push-toright { left: 300px; }
.pushmenu, .pushmenu-push {
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
}
<body class="pushmenu-push">
<nav class="pushmenu pushmenu-left">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</nav>
</body>

There's a CSS property called overflow which controls the contents when it exceeds the available space. Setting it to auto automatically adds a scrollbar.
pushmenu {
background: #444;
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
width: 300px;
height: 100%;
top: 0;
z-index: 1000;
position: fixed;
overflow: auto;
}

I ended up finding a way to do what I wanted with no scrollbar by adding an inner container and using overflow's on both.
.pushmenu {
background: #444;
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
width: 300px;
height: 100%;
top: 0;
z-index: 1000;
position: fixed;
overflow: hidden;
}
.pushmenu_inner{
width: 100%;
height: 99%;
overflow: auto;
padding-right: 15px;
}

You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>demo</title>
<style type="text/css">
body {
margin: 0;
}
.pushmenu {
background: #444;
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
width: 300px;
height: 100%;
top: 0;
z-index: 1000;
position: fixed;
overflow: hidden;
}
.main {
width: 100%;
height: 100%;
overflow: auto;
}
.pushmenu h3 {
color: #f1f1f1;
font-size: 1.3em;
font-weight: 400;
padding: 15px 25px;
margin: 0;
background: #333;
height: 16px;
}
.links {
list-style-type: none;
padding: 0;
margin: 0 0 0 25%;
width: 50%;
}
.links li {
margin-top: 30px;
}
.links li a {
position: relative;
display: block;
color: #f1f1f1;
font-size: 1.3em;
font-weight: 400;
text-decoration: none;
padding: 14px;
}
.links li a:after {
content: '';
display: block;
position: absolute;
left: 20px;
bottom: -5px;
width: 0;
height: 4px;
background-color: #f1f1f1;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
transition: width 0.3s ease;
}
.links li a:hover:after {
width: 70%;
}
.links li a:active {
color: #dbdbdb;
}
.pushmenu-left {
left: -150px;
}
.pushmenu-left.pushmenu-open {
left: 0;
}
.pushmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.pushmenu-push-toright {
left: 300px;
}
.pushmenu,
.pushmenu-push {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
</head>
<body class="pushmenu-push">
<nav class="pushmenu pushmenu-left main">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
</script>
</body>
</html>

Appending element not working as expected

I don't know what i am doing wrong or where the code is breaking,i am trying to append a new div into the locationBox div,but every time i click on the button(green button that says enter) to add the new div,it momentarily adds the div and it disappears,can someone explain what i'm doing wrong and why the code breaks?Thanks
var menuBtn = document.querySelector("#menuBtn button");
var sideMenu = document.querySelector(".sideMenu");
var addCity = document.querySelector("#addCityBtn");
var cityForm = document.querySelector("#cityForm");
var cityContainer = document.querySelector(".cities");
var formClose = document.querySelector("#cityForm p");
var enterBtn = document.querySelector("#enter");
var locationBox = document.querySelector(".locationBox");
var btn = document.querySelector("#btn");
/*=============================================
= FUNCTIONS =
=============================================*/
/*===== OPEN MENU ======*/
menuBtn.addEventListener("click", function() {
menuBtn.style.marginLeft = "0px";
if (sideMenu.style.marginLeft === "0px") {
menuBtn.style.transition = "all .5s linear";
sideMenu.style.marginLeft = "-320px";
sideMenu.style.transition = "all .5s linear";
} else {
menuBtn.style.marginLeft = "320px";
menuBtn.style.transition = "all .5s linear";
sideMenu.style.marginLeft = "0px";
sideMenu.style.transition = "all .5s linear";
}
});
/*===== ADD NEW DIV TO LOCATION BOX ======*/
function newDiv() {
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "city");
locationBox.appendChild(newDiv);
}
/*===== ADD NEW CITY ======*/
function newCity() {
if (cityForm.style.display === "block") {
cityForm.style.transition = "all .7s linear";
cityForm.style.display = "none";
} else {
cityForm.style.transition = "all .7s linear";
cityForm.style.display = "block";
}
}
/*===== FORM CLOSE ======*/
formClose.addEventListener("click", function() {
cityForm.style.display = "none";
});
/*=============================================
= EVENT LISTENERS =
=============================================*/
addCity.addEventListener("click", newCity);
enterBtn.addEventListener("click", newDiv);
body {
padding: 0;
margin: 0;
background-color: blanchedalmond;
}
#menuBtn button {
position: fixed;
padding: 2px 0;
width: 40px;
background-color: black;
z-index: 3;
border-radius: 0px;
margin: 0;
color: #ffffff;
font-size: 20px;
font-weight: bold;
border: none;
cursor: pointer;
}
#menuBtn button:hover {
color: black;
background-color: white;
transition: all .3s linear;
}
.sideMenu {
height: 100vw;
width: 320px;
background-color: steelblue;
position: absolute;
z-index: 2;
margin-left: -320px;
}
.sideMenu li {
margin-left: 10px;
list-style-type: none;
border-bottom: 2px solid #0752a2;
padding: 10px;
}
.sideMenu li:hover {
background: white;
transition: all .3s linear;
}
.sideMenu li:hover a {
color: red;
transition: all .3s linear;
}
.sideMenu li a {
text-decoration: none;
color: black;
font-size: 18px;
}
#topContainer {
padding: 0;
margin: 0;
height: 280px;
width: 100%;
background-image: url("./images/sunnyBg.jpeg");
background-size: cover;
background-position: center;
position: absolute;
}
#topContainer h2 {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -1%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 38px;
text-transform: uppercase;
}
/*=============================================
= LOCATION BOX RULES =
=============================================*/
.locationBox {
position: absolute;
top: 40%;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: .2fr 1fr;
justify-content: center;
align-content: center;
width: 100%;
height: 550px;
}
.locationBox h3 {
color: blue;
text-align: center;
font-size: 28px;
}
.weatherDetails {
color: #fffafa;
text-align: left;
margin: 0 10px;
font-size: 17px;
padding: 0;
text-transform: uppercase;
}
.cities {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
}
.city {
width: 320px;
height: 320px;
background-color: cadetblue;
border-bottom: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.city h3 {
text-align: center;
text-transform: uppercase;
font-size: 20px;
border-bottom: 2px solid black;
color: white;
padding-bottom: 3px;
}
.cities form {
display: none;
height: 230px;
width: 530px;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #002fa7;
border-radius: 10px;
padding: 5px;
color: white;
font-size: 22px;
letter-spacing: 2px;
text-align: center;
z-index: 4;
transition: .7s all linear;
}
.cities label {
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%);
}
.cities input {
color: black;
font-style: italic;
font-weight: bolder;
padding: 5px;
display: block;
margin: 90px auto;
font-size: 18px;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.cities form button {
width: 140px;
padding: 5px;
font-size: 16px;
font-weight: bold;
border-radius: 3px;
border: none;
background-color: #ff007f;
color: #ffffff;
position: absolute;
top: 70%;
transform: translate(-50%);
}
.cities form button:hover {
content: " ";
border: none;
background-color: #98ff98;
color: #000000;
transition: background-color .3s linear;
}
#cityForm p {
position: absolute;
top: 0;
left: 90%;
font-size: x-small;
font-weight: bold;
color: #fffafa;
cursor: pointer;
}
#addCityBtn {
width: 120px;
padding: 5px;
background: #23297a;
border: 1.5px solid #000000;
border-radius: 4.5px;
font-size: 17px;
color: #ffffff;
cursor: pointer;
}
#addCityBtn:hover {
color: #23297a;
background-color: #fffafa;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Weather App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="icon" href="/Weather App/images/cloudy.png">
</head>
<body>
<div id="menuBtn">
<button>X</button>
</div>
<div class="sideMenu">
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
</div>
<div id="topContainer">
<h2>Weather</h2>
</div>
<div class="locationBox">
<div class="location">
<h3>LOCATIONS</h3>
</div>
<div class="cities">
<form id="cityForm">
<p>close</p>
<label for="cityInput">City</label>
<input type="text" id="cityInput" placeholder="Enter city">
<button id="enter">Enter</button>
</form>
<div class="city">
<h3>Copenhagen</h3>
<div class="weatherDetails">
<p>Current Weather:40 degrees</p>
<p>Condition:Cloudy</p>
<p>Wind:10mph</p>
<p>Overcast:None</p>
</div>
</div>
<div id="addCityContainer">
<button id="addCityBtn">Add city</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

The default type of button is submit which causes the submission of the form.
To solve the issue either use Event.preventDefault() or change the type of the button to button like the following:
<button type="button" id="addCityBtn">Add city</button>

Issue with trying to get desired effect

I'm trying to create some minimal designs for my sites future administration panel. And if you look here, that's the working version of my current code. What I have is the navigation on the left side that slides out and pushes the rest of the pages content towards the right and hides the overflow. Where you enter post content, a textarea, is where I'm encountering my problem. If You enter a enough text that the page scrolls since I have the title and tag input fields set to absolute they stay where they are. Setting them as fixed and adding some margins does make it so they scroll with the page and look nice like that, but if you slide out the navigation the fixed elements won't move. In order to get them to do that I have to move them along with the actual main container, then a scroll bar appears on the x-axis and trying to set overflow-x: hidden; on various elements pertaining to those elements does nothing. Here are my html and css
<!DOCTYPE html>
<html>
<head>
<title>New Post</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
<link href="css/create-post.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="css/jquery.tagsinput.css" rel="stylesheet">
</head>
<body class="main">
<section>
<nav class="menu">
<ul>
<li class="logo">Lithium CMS</li>
<div class="links">
<li>Dashboard</li>
<li>Messages</li>
<li>Posts</li>
<li>Pages</li>
</div>
</ul>
</nav>
</section>
<section class="content">
<form>
<input type="text" name="post-title" class="post-title" placeholder="Title...">
<div class="post-content-container">
<textarea name="post-content" class="post-content" placeholder="What you waiting for, start typing!"></textarea>
</div>
<div class="post-tags-container">
<input name="post-tags" class="post-tags">
</div>
</form>
<section>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.autogrow-textarea.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script>
$(function() {
$('.menu-toggle').bind('click', function() {
$('.main').toggleClass('menu-open');
return false;
});
$('.post-content').autogrow();
$('.post-tags').tagsInput({
'width': '100%',
'height': '',
});
});
</script>
</body>
</html>
Here's my CSS
html,
body {
height: 100%;
}
.main {
overflow-x: hidden;
position: relative;
left: 0;
}
.menu-toggle {
background-color: #333333;
border-right: 1px solid #111111;
border-bottom: 1px solid #111111;
color: #ffffff;
text-decoration: none;
padding: 10px;
padding-right: 11px;
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.menu-open .menu-toggle {
left: 210px;
z-index: 4;
}
.menu-open {
left: 210px;
}
.menu-open .menu {
left: 0;
}
.menu,
.menu-toggle,
.main {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu {
background-color: #333333;
border-right: 1px solid #111111;
color: #ffffff;
position: fixed;
top: 0;
left: -210px;
z-index: 3;
height: 100%;
width: 210px;
}
.menu li.logo {
color: #666;
text-shadow: 1px 0px 1px #000000;
font-size: 16px;
font-weight: bolder;
padding: 10px;
border-bottom: 1px solid #2f2f2f;
}
.menu a {
color: #eaeaea;
text-shadow: 1px 0px 1px #555555;
text-decoration: none;
font-weight: bolder;
font-size: 18px;
}
.menu a li {
border-bottom: 1px solid #2a2a2a;
padding: 10px;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
.menu .links li:hover {
background-color: #2f2f2f;
}
.content {
position: relative;
height: 100%;
}
.post-title,
.post-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
outline: none;
width: 100%;
}
.post-content {
resize: none;
}
.post-title {
background-color: #eaeaea;
font-size: 24px;
padding-left: 50px;
}
.post-content-container {
max-height: 90%;
}
.post-tags-container {
position: absolute;
bottom: 0;
width: 100%;
}
div.tagsinput { border:0px; background: #eaeaea; padding:15px; overflow-y: auto;}
div.tagsinput span.tag { border: 1px solid #888888; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cccccc; color: #333333; margin-right: 5px; margin-bottom:5px; font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; color: #333333; text-decoration:none; font-size: 11px; }
div.tagsinput input { width:80px; margin:0px; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #333333; outline:0px; margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; }
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: #FBD8DB !important; color: #90111A !important;}

You can avoid this problem quite easy. Just put .post-tags-container right before the end of the body (right before </body>).

Develop Reference

JavaScript is the programming language of the Web.

toggling innerHTML in Javascript - javascript

Related

How to change the showing section with javascript

Clicking on the options of an active filter does not work

making javascript push menu scrollable (no scrollbar)

Appending element not working as expected

Issue with trying to get desired effect

Categories

Resources