We Keep Coding

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

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.

How to fix my header getting cut off on mobile browsers?

I need help with fixing my header I can not find the problem! At the beginning it looks fine but when you scroll down it cuts part of it off. But when you scroll back up it goes normal. I think it is with the hamburger menu because when you click on it, it increases the cut off. Here is the link to the website. https://perfectparadox8400.000webhostapp.com/ and here is a gif of what happens!
Link to the picture of what happens!
I only happens when you are on a phone. I used the inspector tools to test it and I did try it on a phone to.
Here is the header code.
<header id="headerrr" class="fixed-top lode">
<div class="container">
<div id="lode" class="logo float-center">
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <h1 class="text-light"><span>NewBiz</span></h1> -->
<a href="#intro">
<img id="headerr" class="bigg" src="img/l.png" heigth="100%"><div id="lod" class="lod" style=display:inline-block;vertical-align:center> Perfect Paradox's 8400</div></a>
<div id="dlod" class="loder">
<div class="fixx">
<div class="float-center lodbar">Loding...
<div id="barr" class="persent"> </div>
</div>
</div>
</div>
</div>
<script>
var w = 5;
var foo = setInterval(function () {
if(w>109) {cancelInterval(foo)}
w = w + 6.25;
document.getElementById('barr').style.width = w + '%';
}, 1000);
</script>
<nav id="lood" class="lod main-nav float-right d-none d-lg-block header">
<ul>
<li class="drop-down"><a>Home</a>
<ul>
<li>About Us</li>
<li>Portfolio</li>
<li>Team</li>
</ul>
</li>
<li class="drop-down" ><a>FTC</a>
<ul>
<li>FTC Page</li>
<li>
FTC At Home
</li>
<li>About FTC</li>
</ul>
</li>
<li>FLL</li>
<li>Junior FLL</li>
<li class="drop-down"><a>More</a>
<ul>
<li>Old Website
</li>
<li>FLL</li>
<li>Junior FLL</li>
<li>More</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav><!-- .main-nav -->
</div>
</header><!-- #header -->
The css.
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.lode {
height: 100% !important;
transition: all 0.5s;
}
.lod {
display: none !important;
transition: all 0.5s;
}
.bigg {
margin-left: 25% !important;
margin-right: 25% !important;
width: 50% !important;
-webkit-animation-name: rotate;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
transition: all 0.5s;
}
.float-center {
margin-top: 8% !important;
transition: all 0.5s;
}
.loder {
width: 80%;
transition: all 0.5s;
}
.fixx {
position: relative;
}
.lodbar {
width: 125%;
transition: all 0.5s;
background-color: #afb0b3;
height: 0.5%;
}
.persent {
width: 0%;
transition: all 0.5s;
background-color: #5e068a;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#headerrr {
height: 80px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
padding: 0px 0;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3);
transition: all 0.5s;
}
.header {
height: 80px;
transition: all 0.5s;
z-index: 997;
padding: 20px 0;
background: transparent !important;
}
#headerrr.header-scrolledd {
height: 60px;
transition: all 0.5s;
}
#headerr.header-scrolleddd {
width: 76px;
transition: all 0.5s;
}
#headerr {
width: 100px;
transition: all 0.5s;
}
.header.header-scrolled,
.header.header-pages {
height: 60px;
padding: 10px 0;
transition: all 0.5s;
}
#headerrr .logo h1 {
font-size: 36px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
transition: all 0.5s;
}
#headerrr .logo h1 a {
margin: 7px 0;
transition: all 0.5s;
}
#headerrr .logo h1 a:hover {
color: #5e068a;
text-decoration: none;
transition: all 0.5s;
}
#headerrr .logo img{
padding: 0;
margin: 0px 0;
height: 100%;
transition: all 0.5s;
}
The javascript.
(function ($) {
"use strict";
// Preloader (if the #preloader div exists)
$(window).on('load', function () {
if ($('#preloader').length) {
$('#preloader').delay(100).fadeOut('slow', function () {
$(this).remove();
});
}
});
// Back to top button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function(){
$('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
return false;
});
// Initiate the wowjs animation library
new WOW().init();
// Header scroll class
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
} else {
$('.header').removeClass('header-scrolled');
$('#headerrr').removeClass('header-scrolledd');
$('#headerr').removeClass('header-scrolleddd');
}
});
if ($(window).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
}
// Smooth scroll for the navigation and links with .scrollto classes
$('.main-nav a, .mobile-nav a, .scrollto').on('click', function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
if (target.length) {
var top_space = 0;
if ($('#headerrr').length) {
top_space = $('#headerrr').outerHeight();
if (! $('#headerrr').hasClass('header-scrolledd')) {
top_space = top_space - 0;
}
}
$('html, body').animate({
scrollTop: target.offset().top - top_space
}, 1500, 'easeInOutExpo');
if ($(this).parents('.main-nav, .mobile-nav').length) {
$('.main-nav .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Navigation active state on scroll
var nav_sections = $('section');
var main_nav = $('.main-nav, .mobile-nav');
var main_nav_height = $('#headerrr').outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
nav_sections.each(function() {
var top = $(this).offset().top - main_nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
main_nav.find('li').removeClass('active');
main_nav.find('a[href="#'+$(this).attr('id')+'"]').parent('li').addClass('active');
}
});
});
// jQuery counterUp (used in Whu Us section)
$('[data-toggle="counter-up"]').counterUp({
delay: 10,
time: 1000
});
// Porfolio isotope and filter
$(window).on('load', function () {
var portfolioIsotope = $('.portfolio-container').isotope({
itemSelector: '.portfolio-item'
});
$('#portfolio-flters li').on( 'click', function() {
$("#portfolio-flters li").removeClass('filter-active');
$(this).addClass('filter-active');
portfolioIsotope.isotope({ filter: $(this).data('filter') });
});
});
// Testimonials carousel (uses the Owl Carousel library)
$(".testimonials-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
items: 1,
delay: 100
});
})(jQuery);
These are the parts with the header involved!
Please help!
I tried removing the javascript but it did not help!

You adding the on scroll shrink effect to the header
There is two ways to solve this
removing header-scrolled css or change the height of header-scrolled to according to main height mentioned in headerrr css
#headerrr.header-scrolledd {
height: 60px;
transition: all 0.5s;
}
The main height of the header is 80px you adding the header-scrolledcss onscroll in javascript the header-scrolled height of is 66px so when you scroll down the screen get shrink so change the height of header-scrolled to 80px to avoid shrink
second way is to remove the javascript for header
// Header scroll class
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
} else {
$('.header').removeClass('header-scrolled');
$('#headerrr').removeClass('header-scrolledd');
$('#headerr').removeClass('header-scrolleddd');
}
});
if ($(window).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
}
remove this code block it will remove the onscroll function for header removig this will leads to your header will not shrink on scroll
you can choose any one way
my suggestion to remove both header-scrolled and javascript code

I added this: html, body {width: auto!important; overflow-x: hidden!important} and it fixed the problem.

solution for use button with HREF scrolling or modify <a> link to a button

i have 5 button i wanna use them to scroll to section
for the first i make button, i customize button with css , and after when i try to make a scroll , i got problem, dosent work
i try to use a link , the problem is setting button on css dont work very good , the text is on TOP left
i try to use now on css scroll slow with JS ? or HTML with #link
thanks
HTML ( many version of boutton i make for u ONLY FORT TESTING )
<section id="jour">
<div class="container20">
Dimanche
<button onclick="window.location.href='#Lundi'"class="btn1">Lundi</br><b>13</b></button>
<button onclick="window.location.href='#Mardi'"class="btn1">Mardi</br><b>12</b></button>
<button onclick="scrollTo.location.href='#Mercredi'"class="btn1">Mercredi</br><b>13</b></button>
<button onclick="scrollTo.location.href='#Jeudi'"class="btn1">Jeudi</br><b>14</b></button>
<button class="btn1">Dimanche</br><b>12</b></button>
</div>
</section>
CSS :
.container20 {
display: flex;
justify-content: center;
}
.btn1 {
display: block;
height: 80px;
width: 80px;
color : #262552;
font-family: "Montserrat", sans-serif;
font-weight: 900;
font-size: 12px;
letter-spacing: 0.6px;
padding: 1px 1px;
border-radius: 3px;
transition: 0.3s;
margin: 30px 1px ;
background: #9FEDD7;
border: 3px solid #f7ee6f;
}
#jour .btn1:hover {
background-color:#f7ee6f;
border: 2px solid #f7ee6f;
color : #262552 ;
}

// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
});
body {
height: 6000px;
font-family: Helvetica, Arial;
}
#top-menu {
position: fixed;
z-index: 1;
background: white;
left: 0;
right: 0;
top: 0;
}
#top-menu li {
float: left;
}
#top-menu a {
display: block;
padding: 5px 25px 7px 25px;
width: 4em;
text-align: center;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
border-top: 3px solid white;
color: #aaa;
text-decoration: none;
}
#top-menu a:hover {
color: #000;
}
#top-menu li.active a {
border-top: 3px solid #333;
color: #333;
}
#foo {
position: absolute;
top: 400px;
}
#bar {
position: absolute;
top: 800px;
}
#baz {
position: absolute;
top: 1200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<ul id="top-menu">
<li class="active">
Top
</li>
<li>
Foo
</li>
<li>
Bar
</li>
<li>
Baz
</li>
</ul>
<a id="foo">Foo</a>
<a id="bar">Bar</a>
<a id="baz">Baz</a>

jQuery show next image on click doesn't work with .first

I'm trying to fade into view the next image toggleImg() is called from an onClick, however when we get to the end of the list and I start from the beginning again the fade effect doesn't work.
I assume it has something to do with the way the HTML is loaded in the dom and that the last image tag has a higher priority (as its further down the dom).
Do you know why the fade effect doesn't work when we reach the bottom of the list and start from the beginning again?
$('.next').click( function() {
toggleImg();
});
function toggleImg() {
//Setup vars
var current = $('ul#feature-image li.current');
var next = current.next();
//tag this guy to be deleted later
current.addClass('old');
//check if were at the end of the list
if (next.length != 1) {
current = $('ul#feature-image li').first();
current.addClass('current imgFadeIn');
} else {
current.next().addClass('current imgFadeIn');
}
//delete the last guy now the animation is complete
setTimeout(function() {
$('ul#feature-image li.old').removeClass('current old imgFadeIn');
}, 700);
}
.next{
position:absolute;
top: 0;
left: 0;
background: pink;
padding: 10px 20px;
z-index: 9999;
}
.imgFadeIn {
animation-name: imgFadeIn;
animation-duration: 400ms;
animation-fill-mode: forwards;
}
#keyframes imgFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
ul#feature-image {
padding: 0px 0px;
margin: 0px 0px;
}
ul#feature-image li {
width: 100%;
height: auto;
min-height: 700px;
display: none;
position: absolute;
}
ul#feature-image li img {
width: 100%;
height: auto;
min-height: 100%;
z-index: 0;
position: absolute;
}
ul#feature-image li.current {
z-index: 99;
display: block;
}
ul#feature-image li.current img {
z-index: 50;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="feature-image">
<li class="current"><img src="http://via.placeholder.com/350x200" alt="img"></li>
<li><img src="http://via.placeholder.com/300x230" alt="img"></li>
<li><img src="http://via.placeholder.com/320x100" alt="img"></li>
<li><img src="http://via.placeholder.com/400x250" alt="img"></li>
</ul>
<div class="next">next</div>
As requested JSFiddle - https://jsfiddle.net/Lm99d6f0/1/
* Notice the fade, until the last list item

You need to add z-index to .old element.
ul#feature-image li.old {
z-index: 98;
}
https://jsfiddle.net/Lm99d6f0/2/

Why is my JQuery running slow?

I am extremely new to JQuery, I just started looking into it today. I have searched all around for what might be causing this bit of code to not work. When you scroll down, I want the h1 to move to the side and a menu button to appear. That works, but when I scroll back up again, it takes an extremely long time to reverse itself. I have tried to fine anything that might be causing it like a delay or something, but as far as I can see, there isn't any problems.
Link to website: http://www.dragonmath.net/rockets
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<title>Rockets</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<header>
<img id="menu" src="images/menu1.png" />
<div id="headerdiv">
<h1>Rockets</h1>
<img id="logo" src="images/logo1.png" />
</div>
</header>
<nav>
<ul>
<li>
<a>Space Race</a>
</li>
<li>
<a>SpaceX</a>
</li>
</ul>
</nav>
<script>
$( document ).ready(function() {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
$(window).on('scroll', function () {
if ($(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.delay(800).slideDown(800);
$nav.addClass('testnav');
}
if ($(window).scrollTop() < 40) {
$menu.slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
}
});
});
</script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
color: #00AAFF;
font-family: Arial;
}
body {
height: 800px;
}
header {
position: fixed;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: #333;
z-index: 1;
}
div#headerdiv {
display: inline;
transition: all 1s;
}
h1 {
display: inline;
margin-left: 40px;
font-size: 40px;
}
header > img#menu {
position: fixed;
top: 20px;
left: 40px;
width: 40px;
height: 40px;
display: none;
}
header > div > img#logo {
display: inline;
width: 60px;
height: 60px;
position: relative;
top: 18px;
left: 20px;
transition: height 1s, width 1s;
}
nav {
position: relative;
top: 100px;
height: 40px;
width: 100%;
background-color: #333;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
height: 40px;
width: 200px;
text-align: center;
border-right: 1px solid #00AAFF;
}
nav > ul > li > a {
position: relative;
top: 6px;
}
.testheaderdiv {
margin-left: 80px;
transition: all 1s;
}
.testnav {
display: none;
}

The main problem I could see with the code is how scroll is handled, for every scroll event you are adding delay to the menu element.
So try
$(document).ready(function () {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
var flag;
$(window).on('scroll', function () {
if (flag !== 1 && $(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.stop(true, true).delay(800).slideDown(800);
$nav.addClass('testnav');
flag = 1;
}
if (flag !== 2 && $(window).scrollTop() < 40) {
$menu.stop(true, true).slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
flag = 2;
}
});
});