Hey everyone I have been struggling with the nav menu and getting it to toggle on and off, it seems to be turning on and off in the dev tools but the li links don't disappear, I have tried rewriting the code, but still can't get it to work, I double checked to make sure i was selecting the right elements, please if anyone can help I would sincerely appreciate it!
Thank You
here is the code:
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if (toggle && nav) {
toggle.addEventListener("click", () => {
nav.classList.toggle("show");
})
}
};
showMenu('nav-toggle', 'nav-menu');
<link rel="stylesheet" href="practice.css">
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
<header class="1-header" id="header">
<nav class="nav bd-grid">
<div class='nav_toggle' id='nav-toggle'>
<i class="bx bxs-grid"></i>
</div>
<!-- Roby -->
Sneaker Warehouse
<div class='nav_menu' id='nav-menu'>
<ul class="nav_list">
<li class="nav_item">Home</li>
<li class="nav_item">Featured</li>
<li class="nav_item">Women</li>
<li class="nav_item">New</li>
<li class="nav_item">Shop</li>
</ul>
</div>
<div class="nav_shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="practice.js"></script>
<script src="https://unpkg.com/boxicons#2.1.1/dist/boxicons.js"></script>
I got it working by reading one of the comments on this post. you forgot to add the css.
html
<link rel="stylesheet" href="practice.css">
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
<header class="1-header" id="header">
<nav class="nav bd-grid">
<div class='nav_toggle' id='nav-toggle'>
<i class="bx bxs-grid"></i>
</div>
<!-- Roby -->
Sneaker Warehouse
<button class='nav_menu' id='nav-menu'>
<ul class="nav_list">
<li class="nav_item">Home</li>
<li class="nav_item">Featured</li>
<li class="nav_item">Women</li>
<li class="nav_item">New</li>
<li class="nav_item">Shop</li>
</ul>
</button>
<div class="nav_shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="practice.js"></script>
<script src="https://unpkg.com/boxicons#2.1.1/dist/boxicons.js"></script>
js
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if (toggle && nav) {
toggle.addEventListener("click", () => {
nav.classList.toggle("show");
toggle.classList.toggle("show");
})
}
};
showMenu('nav-toggle', 'nav-menu');
css
.nav_menu {
display: none;
}
.show {
display: initial;
}
Related
I am trying to build a car configurator app. The premise is as follows:
Images of the car are placed in an array. The user is first presented with a pre-set image of the car. The user has to click on their desired color and rim, triggering a change in [my defined JavaScript] flags for each case thus changing the original car image. A function that returns the specific image, depending on which flags are set via the respective setFlag functions, is called.
I tried numerous ways to retrieve the images, yet no matter what I do, only the original image stays displayed.
My JS code:
const imageArrayWhite=["./Aura_Config_Images/ASFlashBlueW.png","./Aura_Config_Images/ASEurosRedW.png"];
const imageArrayBlack=["./Aura_Config_Images/ASEurosRedB.png"];
document.addEventListener("load",imageChanger);
var WhiteFlag=false;
var BlackFlag=true;
var EurosRedFlag=true;
var FlashBlueFlag=false;
var carImageID=document.getElementById("carImage");
function setEurosRedFlag(){
EurosRedFlag=true;
FlashBlueFlag=false;
}
function setFlashBlueFlag(){
EurosRedFlag=false;
FlashBlueFlag=true;
}
function setWhiteFlag(){
WhiteFlag=true;
BlackFlag=false;
}
function setBlackFlag(){
WhiteFlag=false;
BlackFlag=true;
}
function imageChanger(){
// var runner=true;
// while(runner=true){
for(var imageW of imageArrayWhite){
if(WhiteFlag=="true" && EurosRedFlag=="true"){
imageW=imageArrayWhite[1];
carImageID.src=imageW;
}
if(WhiteFlag=="true" && FlashBlueFlag=="true"){
imageW=imageArrayWhite[0];
carImageID.src=imageW;
}
}
for(var imageB of imageArrayBlack){
if(BlackFlag=="true" && EurosRedFlag=="true"){
imageB=imageArrayBlack[0];
carImageID.src=imageB;
}
}
}
//}
My HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue Automotive - Aura Configurator</title>
<link rel="stylesheet" type="text/css" href="CSS\Vue.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<meta name = 'viewport' content='width=device-width, initial-scale=1'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!-- Upper Logo image -->
<img src="Images/VueLogW7.png" class="headimage">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<hr>
<!-- Upper navigation bar -->
<nav class="nav2">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.php">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">PRODUCTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">CONTACT US</a>
</li>
</ul>
</nav>
<!--Dynamic Image div-->
<div class="exterior_image_div">
<img class="exterior_image" src="Aura_Config_Images\ASEurosRedB.png" id="carImage">
</div>
<!--Ecterior options div-->
<div class="exterior_options_div">
<!--Color div-->
<h2 style="font-family: Ubuntu"> Color </h2>
<div class="grid_container_colors">
<a class="color_link" href="#" onclick="setFlashBlueFlag(), imageChanger()">
<div class="grid_color_1">
<img src="Aura_Config_Images\CFlashBlue.png" class="grid_color_image" id="flashBlue" type="radio">
<p>Flash Blue</p>
</div>
</a>
<a class="color_link" href="#" onclick="setEurosRedFlag(), imageChanger()">
<div class="grid_color_2">
<img src="Aura_Config_Images\CEurosRed.png" href="#" class="grid_color_image" id="eurosRed" type="radio" checked>
<p>Euros Red</p>
</div>
</a>
</div>
<!--Rim div-->
<h2 style="font-family: Ubuntu"> Rim </h2>
<div class="grid_container_colors">
<a class="color_link" href="#" onclick="setWhiteFlag(), imageChanger()">
<div class="grid_color_1">
<img src="Aura_Config_Images\RimW1.png" class="grid_color_image" id="whiteRim" type="radio">
<p>18" Six-Spoke (Silver)</p>
</div>
</a>
<a class="color_link" href="#" onclick="setBlackFlag(), imageChanger()">
<div class="grid_color_2">
<img src="Aura_Config_Images\RimB1.png" href="#" class="grid_color_image" id="blackRim" type="radio" checked>
<p>18" Six-Spoke (Black)</p>
</div>
</div>
</div>
<script type="text/javascript" src="JavaScript/Aura_Config_JS_1.js"></script>
</body>
</html>
I tried accessing the array via different loop types and adding extra functionality to the functions, to no avail.
Image of my webpage:
Any help would greatly be appreciated. Sorry for replying late but I'll be off to bed for tonight.
Maybe you could try refactoring your code changing this
function setFlashBlueFlag(){
EurosRedFlag=false;
FlashBlueFlag=true;
}
to this:
function setFlashBlueFlag(){
EurosRedFlag=false;
FlashBlueFlag=true;
imageChanger();
}
(and the same to the other functions), and this:
onclick="setEurosRedFlag(), imageChanger()"
to this:
onclick="setEurosRedFlag()"
Please check the code below to see why the nav bar won't show up on the index file even after linking it through a class. Thank you in advance for your help!
Here is my templates.js
class MyMenu extends HTMLElement {
connectedCallback() {
this.innerHTML * `
<header>
<nav>
<ul>
<li class="logo">Damian Roiz</li>
<li class="items">Home</li>
<li class="items">About</li>
<li class="items">Services</li>
<li class="items">Blog</li>
<li class="items">Contact</li>
<li class="btn"><i class="fas fa-bars"></i></li>
</ul>
</nav>
<script>
$(document).ready(function(){
$('.btn').click(function(){
$('.items').toggleClass('show');
$('ul li').toggleClass('hide');
});
});
</script>
</header>
`
}
}
customElements.define('my-menu', MyMenu)
Here is my index.html
<head>
<script type='text/javascript' src=js/templates.js></script>
</head>
<body>
<my-menu></my-menu>
</body>
I created a fixed navbar that stays in top when I scroll down after 300 px. however.
What I want to achieve is that when the browser window gets very small the navbar just appears on top from the beginning of the page.
(function($) {
var $navbar = $('.navbar');
var setCss = function() {
if($(window).width() < 600) {
$navbar.css('position', static);
}
};
$(document).ready(function() {
setCss();
$(window).position(setCss);
});
})(jQuery);
#nav_bar {
position: fixed;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav_bar" class="navbar navbar-inverse " data-spy="affix" data-offset-top="300">
<div class="container navbar-inner">
<!-- logo -->
<div class="navbar-header">
</div>
<!-- Menue Item -->
<div>
<ul class="nav navbar-nav">
<li>About us</li>
<li>Contact</li>
{{#if user}}
<li role="presentation">Logout</li>
{{else}}
<li role="presentation">Login</li>
<li role="presentation">Register</li>
{{/if}}
</ul>
</div>
</div>
</nav>
This is what happen when the window gets very small
I need help for my personal website. I want to make a one page site with a fixed top navbar (with transparent background). At the scrolling of the page, the color of the menu elements must change dinamically from black to white on the sections that have a dark background (they have a ".dark-bg" class) and return white on the other sections. All sections are 100vh height (except for the menu, of course). This is the HTML main structure of the site:
<section class="section--menu fixed-header">
<nav class="menu" id="navigation">
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
</nav>
</section>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>
I wrote this jQuery script but it seems to work only for the last section with ".dark-bg" class.
$(document).ready(function() {
$(".dark-bg").each(function() {
detectBg( $(this) );
});
function detectBg(sezione) {
$(window).scroll(function() {
var finestra = $(window).scrollTop();
var sezCurr = sezione.offset().top;
var sezNext = sezione.next().offset().top;
if (finestra >= sezCurr && finestra < sezNext) {
$('.menu__link').css("color", "#ebebeb");
}
else {
$('.menu__link').css("color", "#1c1c1c");
}
});
}
});
Thanks in advance!
You need to handle scroll event of the window, and in that handler, check if any of the dark section is under the menu, if so, then change the color of the menu links. Here is an example of changing the color for all links, but it can be easily extended to do it separately for each link:
$(window).scroll(function() {
var vpHeight = $(window).height();
var isBlack = false;
$(".dark-bg").each(function(i, section) {
if(isBlack) {
return;
}
var offset = $(section).offset().top - $(window).scrollTop();
if(((offset + vpHeight) >= 0) && ((offset + vpHeight) <= vpHeight)) {
isBlack = true;
return;
}
});
$(".menu__link").css("color", isBlack ? "white" : "black");
});
body {
padding: 0;
margin: 0;
}
ul {
position:fixed;
background: orange;
padding: 0;
margin: 0;
list-style-type: none;
}
ul > li {
float: left;
padding: 0 4px;
}
section {
background:red;
height: 100vh;
}
.dark-bg {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>
Ok im working on this website where Id like to have the content of a div change to content based on the menu item clicked. I do not have pages for the different menu items but I have all the different content in divs in the index page. I would like to incorporate JQuery but I just cannot seem to find a way to link the menu item class or id to the corresponding div element. My code below":
<html>
<body>
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about">About Me</li>
<li class="btn" id="gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
</body>
</html>
etc..
as for my JQuery coding so far this is where i am after hours of trying different things out
//Update Content-Container Div
$(document).ready(function(){
var $main = $(".content-container");
var $section = $(".content");
$("#about").click(function(){
$main.empty();
$main.find(".bio");
$(".bio").show();
});
});
Instead of writing individual handlers for each menu item, use a data-* attribute to refer to a particular content which need to be displayed, then in the click handler use that attribute to decide which content has to be displayed
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about" data-target=".bio">About Me</li>
<li class="btn" id="gallery" data-target=".gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact" data-target=".contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
then
$(document).ready(function () {
var $main = $(".content-container");
var $section = $(".content").hide();
$(".navbar li.btn").click(function (e) {
e.preventDefault();
$section.hide();
var target = $(this).data('target');
if(target){
$section.filter(target).show();
}
});
});
Demo: Fiddle
Check out jquery tabs,
I think you need this.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Resume</li>
<li>Contact Me</li>
</ul>
<div id="tabs-1">
<p>Home content</p>
</div>
<div id="tabs-2">
<p>About me content</p>
</div>
<div id="tabs-3">
<p>Gallery content </p>
</div>
<div id="tabs-4">
<p>Resume content </p>
</div>
<div id="tabs-5">
<p>Contact Me content </p>
</div>
</div>
</body>
</html>
Try:
Assuming ids are associated with relevant classes.
HTML:
<li class="btn" id="bio">About Me</li>
JS:
$(".btn").click(function () {
$(".content-container .content").hide();
$(".content-container").find("."+$(this).attr("id")).show();
});
DEMO here.
Here I initially hid everything, then based on what links you click, the page displays the correct content. Note that your about page has the wrong id attribute so it will not work but your contact and gallery pages work. This is roughly how the twitter bootstrap framework works, I do suggest you look at that.
var $main = $(".content-container");
var $section = $(".content");
$section.hide();
$("li.btn").on('click', function() {
var link_id = $(this).attr('id');
var content = $main.find("." + link_id);
$section.hide();
content.show();
})
Working Example
const containers = Array.from(document.querySelectorAll('.content'));
// Slicing for link as it's not related to changing the slide content,
// so we don't want to bind behaviour to it.
const links = Array.from(document.querySelectorAll('.navbar ul .btn a')).slice(1);
$(function() {
hideEls(containers);
});
function hideEls (els) {
if (Array.isArray(els)) {
els.forEach(el => {
el.style.display = 'none';
});
}
return;
}
function showEl (els, i, e) {
e.preventDefault();
hideEls(els);
els[i].style.display = 'block';
}
links.forEach((link, i) => {
link.addEventListener('click', showEl.bind(null, containers, i));
});
Here's a fiddle