We Keep Coding

addEventListener adds incorrect properties on click - only on 320x480

TL DR it should be display: flex; opacity: 1
I have a menu which works in the following way:
On mouseenter or click, the menu is shown (display: flex, opacity: 1)
On mouseleave or click (outside the menu area) the menu is hidden (display: none, opacity: 0)
The problem occures when I try to "open" the menu in the Dev. Tools on 320x480 resolution.
When I click on the menu area, only #envelope does the transformation. #links (should also transform but don't becouse of the following reasons) which should get display: flex actually gets display: none assigned to it.
Note: It's working in full screen. Something is bothering him with the 320x480 res.
If I can elaborate or provide any additional information, let me know.
Thank you
function hide (){
document.getElementById("links").style.display = "none";
};
function show (){
document.getElementById("links").style.display = "flex";
document.getElementById("links").style.opacity = "1";
};
var menu = document.getElementById("menu");
menu.addEventListener("mouseenter", show);
menu.addEventListener("mouseleave", hide);
menu.addEventListener("click", show);
document.addEventListener("click", function (){
if (this != menu){
document.getElementById("links").style.display="none";
}
});
#menu{
height: 10vh;
background-color: red;
text-align: center;
transition: all 1s ease-out;
padding-top: 5vh;
}
#menu:hover{
color: red;
}
#envelope{
height: 0;
display: block;
background-color: blue;
min-width: 100%;
z-index: 1;
position: absolute;
left: 0;
content: "";
opacity: 0;
transition: all 1.3s ease-out;
}
#links{
height: 0;
display: none;
background-color: pink;
justify-content: center;
z-index: 2;
min-width: 100%;
opacity: 0;
transition: all 1s ease-in;
}
#google{
margin-top: -1vh;
width: 150px;
}
#mysite{
padding-left: 5%;
margin-top: -1vh;
width: 150px;
}
#menu:hover #envelope{
height: 100px;
opacity: 1;
}
#menu:focus #envelope{
height: 100px;
opacity: 1;
}
#menu:hover #links{
opacity: 1;
height: 300px;
}
#menu:focus #links{
opacity: 1;
height: 300px;
}
<div id="menu">Click here to browse the internet.
<div id="envelope">
<div id="links" >
<div><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></div>
<div style="width: 20%;"></div>
<div><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></div>
</div>
</div>
</div>

Don't use transition: all because the browser then need to loop through all properties, and it might cause lag.
Don't use position: absolute unless you have to.
I removed #envelope and inserted the "Click here ..." text in a label (explanation why below).
I arranged classes so I didn't have to repeat code.
Pure CSS solution below.
I made a little CSS hack, where I used a label and a checkbox to simulate a click. So when clicking on the label#menu-toggler, the (hidden) checkbox is checked, which triggers #menu-toggler:checked ~ #links.invisible. I had to add another class to #links, otherwise the low specificity wouldn't trigger the change.
html, body { /* new */
margin: 0px;
padding: 0px;
}
#menu {
height: 15vh; /* changed */
background-color: red;
text-align: center;
margin: 0.5rem; /* new */
}
#menu > input#menu-toggler { /* new */
display: none;
}
#menu > .tagline { /* new */
display: block; /* to get padding to work */
padding: 5vh 0px;
transition: opacity 1s;
}
#menu:hover > .tagline { /* new */
opacity: 0;
}
#menu > .tagline, /* new */
#menu > #links /* new */
{
transition-timing-function: ease-out;
}
#menu > #links {
display: flex;
justify-content: space-around; /* changed */
position: relative; /* changed */
left: -0.5rem; /* changed */
top: -5vh; /* changed */
opacity: 0;
height: 0;
width: 100vw; /* changed */
z-index: 1;
overflow: hidden; /* new */
background-color: pink;
transition-property: height, opacity;
transition-duration: 1.3s;
}
#menu:hover #links,
#menu-toggler:checked ~ #links.invisible { /* new */
height: 150px !important; /* changed */
opacity: 1 !important;
}
#links #google,
#links #mysite
{
width: 150px;
}
<div id="menu">
<input id="menu-toggler" type="checkbox" />
<label for="menu-toggler" class="tagline">Click here to browse the internet.</label>
<div id="links" class="invisible">
<div><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></div>
<div><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></div>
</div>
</div>

How make Javascript code work for each element individually, to create multiple duplicates in HTML with same Javascript code

I have created a simple image carousel that I am using on my site.
It all works well until I only have one but as soon as I try to create a new one it doesn't work properly.
All I need is that all the image sliders I create are independent of each other.
Both of the sliders should work individually.
Any help would be very great.
Here is my code:
//current position
var pos = 0;
//number of slides
var totalSlides = $('.slider-wrap ul li').length;
//get the slide width
var sliderWidth = $('.slider-wrap').width();
$(document).ready(function(){
/*****************
BUILD THE SLIDER
*****************/
//set width to be 'x' times the number of slides
$('.slider-wrap ul.slider').width(sliderWidth*totalSlides);
//next slide
$('.next').click(function(){
slideRight();
});
//previous slide
$('.previous').click(function(){
slideLeft();
});
/*************************
//*> OPTIONAL SETTINGS
************************/
//automatic slider
var autoSlider = setInterval(slideRight, 3000);
//for each slide
$.each($('.slider-wrap ul li'), function() {
//set its color
var c = $(this).attr("data-color");
$(this).css("background",c);
//create a pagination
var li = document.createElement('li');
$('.pagination-wrap ul').append(li);
});
//counter
countSlides();
//pagination
pagination();
//hide/show controls/btns when hover
//pause automatic slide when hover
$('.slider-wrap').hover(
function(){ $(this).addClass('active'); clearInterval(autoSlider); },
function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
);
});//DOCUMENT READY
/***********
SLIDE LEFT
************/
function slideLeft(){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************
SLIDE RIGHT
*************/
function slideRight(){
pos++;
if(pos==totalSlides){ pos = 0; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************************
//*> OPTIONAL SETTINGS
************************/
function countSlides(){
$('.counter').html(pos+1 + ' / ' + totalSlides);
}
function pagination(){
$('.pagination-wrap ul li').removeClass('active');
$('.pagination-wrap ul li:eq('+pos+')').addClass('active');
}
/*GLOBALS*/
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
a:hover {
color: #1bc1a3;
}
body,
hmtl {
background: #ecf0f1;
font-family: 'Anton', sans-serif;
}
.wrapper {
width: 600px;
margin: 50px auto;
height: 400px;
position: relative;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px;
}
.slider-wrap {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.slider-wrap ul.slider {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.slider-wrap ul.slider li {
float: left;
position: relative;
width: 600px;
height: 400px;
}
.slider-wrap ul.slider li > div {
position: absolute;
top: 20px;
left: 35px;
}
.slider-wrap ul.slider li > div h3 {
font-size: 36px;
text-transform: uppercase;
}
.slider-wrap ul.slider li > div span {
font-family: Neucha, Arial, sans serif;
font-size: 21px;
}
.slider-wrap ul.slider li i {
text-align: center;
line-height: 400px;
display: block;
width: 100%;
font-size: 90px;
}
.object-fit_contain {
object-fit: contain;
height: auto;
max-width: 600px;
}
/*btns*/
.btns {
position: absolute;
width: 50px;
height: 60px;
top: 50%;
margin-top: -25px;
line-height: 57px;
text-align: center;
cursor: pointer;
z-index: 100;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.next {
right: -1px;
margin-right: 200px;
}
.previous {
left: -1px;
margin-left: 200px;
}
.counter {}
.slider-wrap.active .next {
right: 0px;
}
.slider-wrap.active .previous {
left: 0px;
}
/*bar*/
.pagination-wrap {
min-width: 20px;
margin-top: 350px;
margin-left: auto;
margin-right: auto;
height: 15px;
position: relative;
text-align: center;
}
.pagination-wrap ul {
width: 100%;
}
.pagination-wrap ul li {
margin: 0 4px;
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #3ab8cb;
opacity: 0.5;
position: relative;
top: 0;
}
.pagination-wrap ul li.active {
width: 12px;
height: 12px;
top: 3px;
opacity: 1;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px;
}
/*Header*/
h1,
h2 {
text-shadow: none;
text-align: center;
}
h1 {
color: #666;
text-transform: uppercase;
font-size: 36px;
}
h2 {
color: #7f8c8d;
font-family: Neucha, Arial, sans serif;
font-size: 18px;
margin-bottom: 30px;
}
/*ANIMATION*/
.slider-wrap ul,
.pagination-wrap ul li {
-webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-o-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
transition: all 0.3s cubic-bezier(1, .01, .32, 1);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ########################### Slider 1 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>
<!-- ########################### Slider 2 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>

You have multiple elements with the same ID. You will need to update your code to work off of class and "closest" related items if you need multiples of these on a single page.
For example, where you click "previous", you might need to change to something like:
//previous slide
$('.previous').click(function(event){
slideLeft(event.target); // to pass the clicked 'previous' button to slideLeft()
});
Then in your slideLeft() function, find the slider by whichever one is ancestrally closest to the clicked button:
function slideLeft(target){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$(target).closest('.slider').css('left', -(sliderWidth*pos)); // only line I changed in your example
//*> optional
countSlides();
pagination();
}
I did not run this fully but the concept of "know which one is clicked, then find what to update from there" is what you're going for I believe.

HTML, Javascript, CSS text menu

enter image description hereI have made a text as a button and want to create a menu with that. What I am trying to do is to change the text. When I click the button, it works as a circular menu and shows me options.
For example, it was L(litter) = 1, when I click the button it shows me other parameters such as mL, gallon, ounce. If I click mL, the text will change from L = 1000 to mL = 1000.
Could you help with me actual coding if possible? This is what I currently have. When I click, I can type a value and it changes the value. I don't need to type the value but it should display one of the values I already stored in depending on what I click on the menu.
var para = document.querySelector('button');
para.addEventListener('click', updateValue);
function updateValue() {
var value = prompt('Enter a new value');
para.textContent = value;
}

If I get you clear so this example is what you need
body {
font-family: Alegreya Sans;
background: #feeded;
}
.menu {
position: relative;
background: #cd3e3d;
width: 3em;
height: 3em;
border-radius: 5em;
margin: auto;
margin-top: 5em;
margin-bottom: 5em;
cursor: pointer;
border: 1em solid #fdaead;
}
.menu:after {
content: "";
position: absolute;
top: 1em;
left: 1em;
width: 1em;
height: 0.2em;
border-top: 0.6em double #fff;
border-bottom: 0.2em solid #fff;
}
.menu ul {
list-style: none;
padding: 0;
}
.menu li {
width: 5em;
height: 1.4em;
padding: 0.2em;
margin-top: 0.2em;
text-align: center;
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
transition: all 1s;
background: #fdaead;
opacity: 0;
z-index: -1;
}
.menu:hover li {
opacity: 1;
}
/**
* Add a pseudo element to cover the space
* between the links. This is so the menu
* does not lose :hover focus and disappear
*/
.menu:hover ul::before {
position: absolute;
content: "";
width: 0;
height: 0;
display: block;
left: 50%;
top: -5.0em;
/**
* The pseudo-element is a semi-circle
* created with CSS. Top, bottom, and right
* borders are 6.5em (left being 0), and then
* a border-radius is added to the two corners
* on the right.
*/
border-width: 6.5em;
border-radius: 0 7.5em 7.5em 0;
border-left: 0;
border-style: solid;
/**
* Have to have a border color for the border
* to be hoverable. I'm using a very light one
* so that it looks invisible.
*/
border-color: rgba(0, 0, 0, 0.01);
/**
* Put the psuedo-element behind the links
* (So they can be clicked on)
*/
z-index: -1;
/**
* Make the cursor default so it looks like
* nothing is there
*/
cursor: default;
}
.menu a {
color: white;
text-decoration: none;
/**
* This is to vertically center the text on the
* little tab-like things that the text is on.
*/
line-height: 1.5em;
}
.menu a {
color: white;
text-decoration: none;
}
.menu ul {
transform: rotate(180deg) translateY(-2em);
transition: 1s all;
}
.menu:hover ul {
transform: rotate(0deg) translateY(-1em);
}
.menu li:hover {
background: #cd3e3d;
z-index: 10;
}
.menu li:nth-of-type(1) {
transform: rotate(-90deg);
position: absolute;
left: -1.2em;
top: -4.2em;
}
.menu li:nth-of-type(2) {
transform: rotate(-45deg);
position: absolute;
left: 2em;
top: -3em;
}
.menu li:nth-of-type(3) {
position: absolute;
left: 3.4em;
top: 0.3em;
}
.menu li:nth-of-type(4) {
transform: rotate(45deg);
position: absolute;
left: 2em;
top: 3.7em;
}
.menu li:nth-of-type(5) {
transform: rotate(90deg);
position: absolute;
left: -1.2em;
top: 5em;
}
.hint {
text-align: center;
}
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,800' rel='stylesheet' type='text/css'>
<nav class="menu">
<ul>
<li>Products</li>
<li>Services</li>
<li>Careers</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>

jQuery function firing only once,

I want to have 2 search box styles, one above 1000px and one below 1000px. I made that available through media queries in CSS, and then I put function on click on my element, but its only firing once, and then I need to refresh the page for it to act again. I am new to all of this, and I've searched for solutions to this problem for eight hours. I think the problem is caused by search-form--active when you click on search-trigger. But I don't know how to disable this function when browsing in under 1000px wide.
I’m working on WordPress, already created theme, called Yuuta.
$(document).on('click', '.search-trigger', function() {
$('.search-overlay').addClass('show');
if ($('.site-header .search-form').hasClass('search-form--active')) {
/* hide search field */
$('.site-header .search-form').removeClass('search-form--active');
} else {
/* show search field */
$('.site-header .search-form').addClass('search-form--active');
/* focus search field */
$('.site-header .search-field').focus();
}
/* show/hide search form via search icon */
if ($('.site-header .search-trigger').hasClass('search-form--active')) {
/* hide search field */
$('.site-header .search-trigger').removeClass('search-form--active');
} else {
/* show search field */
$('.site-header .search-trigger').addClass('search-form--active');
}
});
.search-trigger {
position: absolute;
right: 0.5em;
top: 28px;
width: 40px;
text-align: center;
}
#media screen and (min-width: 40em) {
.search-trigger {
right: 0.8em;
}
}
.search-trigger:before {
width: 100%;
display: block;
font-family: "ElegantIcons";
font-weight: normal;
text-align: center;
content: "\55";
}
.search-trigger:before::after {
clear: both;
content: "";
display: table;
}
.search-trigger.search-form--active:before {
font-size: 1.6em;
line-height: .9em;
content: "\4d";
}
.search-trigger:hover {
color: inherit;
}
.site-header .search-form {
position: absolute;
right: 65px;
bottom: 150px;
width: 90px;
opacity: 0;
}
.site-header .search-form input.search-field {
width: 5em;
font-size: 1em;
border-width: 0;
padding: .4em .4em .4em 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
position: relative;
bottom: 5px;
}
.site-header .search-form .search-submit {
display: none;
}
.site-header .search-form.search-form--active {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
display: block;
top: 28px;
opacity: 1;
}
<a class="search-trigger"></a>
<?php get_search_form(); ?>

How to change hamburger menu icon when clicked?

Okay so I have a hamburger style menu that uses the normal 3 line icon but I'd like it so when you click it the icon changes to a cross. How would I achieve this? How would I structure the JavaScript?
HTML:
<ul class="navigation">
<li class="nav-item">Home</li>
<li class="nav-item">Meet the team</li>
<li class="nav-item">Blog</li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger" onclick="menuChange()" />
<label for="nav-trigger"></label>
CSS:
.navigation {
/* critical sizing and position styles */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
/* non-critical appearance styles */
list-style: none;
background: #000;
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 200px;
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
color: #999999;
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
color: #ffffff;
}
/* Nav Trigger */
.nav-trigger {
/* critical styles - hide the checkbox input */
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/* critical positioning styles */
position: fixed;
left: 15px; top: 15px;
z-index: 2;
/* non-critical apperance styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url(../images/Menu.png);
background-size: contain;
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
Check it out.

I think the better solution is to use an event caused in the collapse menu instead of onclick.
show.bs.collapse - Fired after the show method is called.
shown.bs.collapse - Will wait for CSS transitions to complete
hide.bs.collapse - Fired when the hide instance method has been called.
hidden.bs.collapse - Will wait for CSS transitions to complete
Code look like this:
$('.navigation').on('show.bs.collapse', function() {
// set cross as content of menu button
});
$('.navigation').on('hide.bs.collapse', function() {
// set tree lines as content of menu button
});