jQuery to Javascript converted but not working in html [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I use HTML5, CSS, and vanilla JavaScript.
I want converted this jQuery code, and change it.
But I don't know what problem in after Code.
Originally there is a small triangular icon at the top, and it should also fill the entire screen with the menu bar. However, this code doesn't fire the event after clicking what the icon at the top would be able to create.
Before Code is this,
$(document).ready(function(){
$('.menubars').on('click', function(){
if($('.menu').hasClass('active')) {
closeMenu();
} else {
openMenu();
}
});
function openMenu() {
$('.menu').toggleClass('active');
$('.menubackground').css('left', '0');
$('.menubackground').css('top', '-810px');
$('.top').css('top', '10px');
$('.bottom').css('top', '10px');
$('.menu ul').css('visibility','visible');
$('.top').css('transform', 'rotate(45deg)');
$('.bottom').css('transform', 'rotate(-45deg)');
$('.middle').css('transform', 'rotate(45deg)');
}
function closeMenu() {
$('.menu').toggleClass('active');
$('.menu ul').css('visibility','hidden');
$('.top').css('top', '0px');
$('.bottom').css('top', '20px');
$('.top').css('transform', 'rotate(0deg)');
$('.middle').css('transform', 'rotate(0deg)');
$('.bottom').css('transform', 'rotate(0deg)');
$('.menubackground').css('left', '-2240px');
$('.menubackground').css('top', '-2240px');
}
});
and my code is like this
var menu = document.getElementsByClassName('menu');
document.onload = function () {
document
.getElementsByClassName('menubars')
.addEventListener('click', function () {
if (document.getElementsByClassName('menu').classList.contains('active')) {
closeMenu();
} else {
openMenu();
}
});
function openMenu() {
var clicked = 0;
menu.onClick() = function () {
if (clicked) {
menu.classList.add('active');
} else {
menu.classList.remove('active');
}
}
document
.getElementsByClassName('menubackground')
.style
.left = '0px';
document
.getElementsByClassName('menubackground')
.style
.top = '-810px';
document
.getElementsByClassName('top')
.style
.top = '10px';
document
.getElementsByClassName('bottom')
.style
.top = '10px';
document
.querySelectorAll('.menu ul')
.visibility = 'visible';
document
.getElementsByClassName('top')
.style
.transform = 'rotate(45deg)';
document
.getElementsByClassName('bottom')
.style
.transform = 'rotate(-45deg)';
document
.getElementsByClassName('middle')
.style
.transform = 'rotate(45deg)';
}
function closeMenu() {
menu.onClick() = function () {
if (clicked) {
menu.classList.add('active');
} else {
menu.classList.remove('active');
}
}
document
.querySelectorAll('.menu ul')
.visibility = 'hidden';
document
.getElementsByClassName('top')
.style
.top = '0px';
document
.getElementsByClassName('bottom')
.style
.top = '20px';
document
.getElementsByClassName('top')
.style
.transform = 'rotate(0deg)';
document
.getElementsByClassName('bottom')
.style
.transform = 'rotate(0deg)';
document
.getElementsByClassName('middle')
.style
.transform = 'rotate(deg)';
document
.querySelectorAll('.menubackground')
.style
.left = '-2240px';
document
.querySelectorAll('.menubackground')
.style
.top = '-2240px';
}
}
Html
<div class="menu">
<div class="menubars">
<div class="menubar top"></div>
<div class="menubar middle"></div>
<div class="menubar bottom"></div>
</div>
<div class="menubackground">
</div>
<ul class="menulinks">
<li>Home</li>
<li>About us</li>
<li>Portfolio</li>
<li>Contact us</li>
</ul>
</div>
css
*{
margin: 0;
padding: 0;
}
p{
position: absolute;
color: #222;
text-decoration: none;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
p a{
text-decoration: none;
color: purple;
}
.menu{
background-color: red;
width: 100%;
height: 100%;
}
.menubackground
{width: 2700px;
height: 2700px;
position: fixed;
left: -2240px;
z-index: 10;
top: -2240px;
transform: rotate(-45deg);
background-color: #28eca4;
transition : all 700ms ease-in;
}
.menulinks{
position: absolute;
z-index: 20;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
list-style-type: none;
}
.menulinks li a{
text-decoration: none;
text-transform: uppercase;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 3rem;
}
.menubars{
position: absolute;
left: 20px;
top: 20px;
cursor: pointer;
width: 50px;
height: 50px;
z-index: 20;
}
.menubars .menubar{
height: 5px;
transition : all 200ms ease-out;
position: absolute;
z-index: 30;
width: 30px;
background-color: #fff;
}
.top{
top: 0;
}
.middle{
top: 10px;
}
.bottom{
top: 20px;}
but it doesn't work. I wanna know what I fix it.
ThankYou.

First, .getElementsByClassName() returns a node list and you can't attach an event handler to a node list, you'd have to loop through the elements within the list and add the event handler to each and node lists won't have a .classList property either. Second, .getElementsByClassName() should be avoided and .querySelectorAll() should be used instead.
So, in short, you are treating the collection returned from .getElementsByClassName() as if it was an element, when it's not. You have to loop through the collection and interact with the individual elements that are in it.

Related

How can I dim the content with a semitransparent overlay when hovering a dropdown menu?

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>

Toggle Button To Expanding Navigation Menu On Click

When I click on the menu anchor element it takes me back to the top of the page. As I scroll through the site I would like the menu to stay at the section that I have scrolled to when I click the menu anchor. I would like the menu anchor to only act as an open and close function of the expanding nav. [
function openMenu() {
document.getElementById('menu').style.width = "608px"
document.getElementById('content').style.marginLeft = "608px"
}
function closeMenu() {
document.getElementById('menu').style.width = "0px"
document.getElementById('content').style.marginLeft = "0px"
}
:root {
--main-color: #FEFF66;
--second-color: #000000;
--third-color: #FFFFFF;
}
* {
margin: 0;
padding: 0;
}
.slide {
margin: 18px;
font-size: 25px;
position: fixed;
}
.slide a {
text-decoration: none;
color: var(--second-color);
writing-mode: vertical-rl;
transform: rotate(-180deg);
}
.help a {
text-decoration: none;
color: var(--second-color);
}
.help {
display: flex;
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: var(--third-color);
color: var(--second-color);
overflow: hidden;
}
.links {
font-size: 40px;
line-height: 60px;
padding-top: 14px;
}
.header-menu {
writing-mode: vertical-rl;
transform: rotate(-180deg);
margin: 18px;
font-size: 25px;
padding-left: 55px;
}
<section id="header">
<span class="slide">
MENU
</span>
<div id="menu" class="help">
<div><a class="header-menu" href="#" onclick="closeMenu()">MENU</a></div>
<div class="links">
OUR STORY<br>
ROOMS + BOOK<br>
THE NEIGHBOURHOOD<br>
THE ART<br>
FAQ
</div>
</div>
</section>
]1
On your click listener pass in the event received as follow:
<div><a class="header-menu" href="#" onclick="closeMenu($event)">MENU</a></div>
The $event in the template has a special meaning in this case.
Then, on your closeMenu function adjust accordingly and prevent the default behavior of browser for anchor elements.
// Here, the function parameter can be named whatever you like,
// I named it "event" but anything else would work.
function closeMenu(event) {
// The line below will prevent the default behavior of the browser
// for this element and event, which means, it scroll to anywhere
// in this case, nor redirect to another page in case you had a URL
// in the href attribute.
event.preventDefault();
// Your code ...
}
Add event.preventDefault(); inside your javascript.
function openMenu(event) {
event.preventDefault();
document.getElementById('menu').style.width = "608px"
document.getElementById('content').style.marginLeft = "608px"
}
This prevent default actions of object you clicked, in this case anchor tag.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault?retiredLocale=it

Go-to-top button completely dissapears on scroll

I'm trying to put go-to-top button in the bottom right angle of the screen. It should appear on scroll function, a disappear when I go back to top.
The button exists, but when I scroll down, it stays with "home page", so as I scroll more, it is not visible anymore. How to fix the problem? You can see my codes down here. Thanks a lot in advance!
window.onscroll = function(){goTop()};
let goTop = function() {
var rocket = document.querySelector(".go-to-top");
var scrollExt = document.body.scrollTop;
if(document.body.scrollTop > 500 || document.documentElement.scrollTop > 500){
rocket.style.display = "block";
} else{
rocket.style.position = "none";
}
};
let rocketClick = function() {
document.documentElement.scrollTop = 0;
}
.go-to-top{
display: none;
z-index: 10;
position: fixed;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
transform: rotate(-45deg);
color: black;
padding: 10px;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.go-to-top i{
font-size: 50px;
}
.go-to-top:hover{
cursor: pointer;
text-decoration: none;
}
<!--the rest of markup-->
<div class="rocket">
<a href="#" class="go-to-top">
<i class="fas fa-rocket"></i>
</a>
</div>
<script src="script.js"></script>
<!--closing markup-->
rocket.style.position:none would give your element the css style of position:none. none is not a valid value for the position property.
You can see the position values here -> CSS position
By the look of your code you would need to use display instead of position.
Also, you make a variable scrollExt and you do not use it. Plus, you make a rocketClick function but you do not call it on your element.
window.onscroll = function() {
goTop();
};
const goTop = function() {
const rocket = document.querySelector('.go-to-top');
const scrollExt = document.body.scrollTop;
if (scrollExt > 500 || document.documentElement.scrollTop > 500) {
rocket.style.display = 'block';
} else {
rocket.style.display = 'none';
}
};
const rocketClick = function() {
document.documentElement.scrollTop = 0;
};
main {
height:1500px;
background:red;
}
.go-to-top{
display: none;
z-index: 10;
position: fixed;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
transform: rotate(-45deg);
color: black;
padding: 10px;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.go-to-top i{
font-size: 50px;
}
.go-to-top:hover{
cursor: pointer;
text-decoration: none;
}
<main></main>
<div class="rocket" onclick=rocketClick()>
<a href="#" class="go-to-top">
rocket icon
</a>
</div>
Suggestions :
Keep using let and const. Do not use var. Also, use const for your functions. You do not change the content of the functions anywhere so you can use const instead of let.
Add an animation(transition) to the scrollTop.

target .class:after:hover in jQuery

I need to target this :after in jQuery:
.a1 {
position: relative;
}
.a1:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #3f92c3;
transition: width .4s linear;
-webkit-transition: width .4s linear;
}
.a1:hover:after {
width: 100%;
left: 0;
background: #3f92c3;
}
The scroll code looks like this (example):
$(function() {
var header = $("#header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.addClass("scrolled");
} else {}
});
});
HTML:
<li><a class="a1" href="#">Portfolio</a></li>
<li><a class="a1" href="#">Services</a></li>
<li><a class="a1" href="#">Contact</a></li>
I found this out after searching alot and it worked byt i don't know how the underline can keep the hover color after i mouseleave .a1 :
$('#menuwrapper').mouseenter(function() {
if ($('#pseudo').length) {
$('#pseudo').remove();
} else {
var css = '<style id="pseudo">.a1::after{background: red !important;}</style>';
document.head.insertAdjacentHTML('beforeEnd', css);
};
});
I tried mouseleave but it didn't work.
So i just want that if i scroll (that i know how it works) that the underline under the menu .a1 stay's black , because if i leave the underline hover it goes back to
.a1:after {
background: #3f92c3;
}
I want it to stay black.
pseudo elements like :before and :after are not the part of DOM because they are not real elements as called pseudo...so you can't target them using jQuery
As you are adding class scrolled on scroll, so better to use this class in css like
.scrolled .a1:after{
background: black;
}
$(function() {
var header = $("#header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
});
});
body {
margin-top: 150px;
font: 13px Verdana;
height: 500px
}
#header {
list-style: none;
padding: 0;
display: flex;
}
#header li {
margin: 0 10px;
}
.a1 {
position: relative;
font-weight: bold;
text-decoration: none;
}
.a1:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #3f92c3;
transition: width .4s linear;
-webkit-transition: width .4s linear;
}
.a1:hover:after {
width: 100%;
left: 0;
}
.scrolled .a1:after {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="header">
<li><a class="a1" href="#">Portfolio</a></li>
<li><a class="a1" href="#">Services</a></li>
<li><a class="a1" href="#">Contact</a></li>
</ul>
try to use jQuery hover method, but also you cant touch :after :before elements from jQuery
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");});

Translating jQuery to Vanilla JS issue

I was watching a tutorial that used jQuery and wanted to turn it into JS, but my code is broken - was hoping someone could help me with this:
Tutorial JS:
$(function() {
var btn = $('button');
var progressBar = $('.progressbar');
btn.click(function() {
progressBar.find('li.active').next().addClass('active');
})
})
Taken from URL:http://www.kodhus.com/kodity/codify/kod/mGXAtb
Here is my failed attempt at rewriting the jQuery using JavaScript DOM:
var btn1 = document.getElementsByTagName('BUTTON');
var progBar = document.getElementsByClassName('progressbar');
function clickMe1() {
var elm = progBar.querySelectorAll("li");
var emlClass = elm.querySelector(".active");
return emlClass.nextElementSibling.addClass('active');
}
btn1.addEventListener("click", clickMe1, false);
where did I go wrong?
Working fiddle.
Your code will work after several changes check the notes below :
You've missed addClass() there it's a jQuery function, for vanilla JS use .classList.add() instead:
return emlClass.nextElementSibling.classList.add("active");
querySelectorAll(); will return a list of nodes you have to loop through them and add class, use :
var emlClass = progBar.querySelectorAll("li.active");
Instead of :
var elm = progBar.querySelectorAll("li");
var emlClass = elm.querySelector(".active");
Then loop and add active class:
for(var i=0;i<emlClass.length;i++){
emlClass[i].nextElementSibling.classList.add("active");
}
getElementsByTagName() and getElementsByClassName() will also returns a list of nodes with given name, you have to specify which one you want to pick (selecting the first in my example) :
var btn1 = document.getElementsByTagName('BUTTON')[0];
var progBar = document.getElementsByClassName('progressbar')[0];
Hope this helps.
var btn1 = document.getElementsByTagName('BUTTON')[0];
var progBar = document.getElementsByClassName('progressbar')[0];
function clickMe1() {
var emlClass = progBar.querySelectorAll("li.active");
for(var i=0;i<emlClass.length;i++){
emlClass[i].nextElementSibling.classList.add("active");
}
}
btn1.addEventListener("click", clickMe1, false);
.container {
width: 100%;
}
.progressbar {
counter-reset: step;
margin: 0;
margin-top: 50px;
padding: 0;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: green;
}
.progressbar li.active + li:after {
background-color: green;
}
button {
position: relative;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 2px;
left: 50%;
margin-top: 30px;
transform: translate(-50%);
cursor: pointer;
outline: none;
}
button:hover {
opacity: 0.8;
}
<div class="container">
<ul class="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
<button>Next step</button>
.querySelectorAll("li") will return an array (or an array-like object) with one or more <li> tags. So you need to either:
loop through every <li> in that list and do the rest,
or just take the first item from that list if you don't want to worry about there being more than one li in the page,
or use .querySelector (not .querySelectorAll) to just take the first <li> for you.
MDN

Categories