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()"
Related
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;
}
I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!
``` <head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```
```<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='gem 4-3.jpg'>
</div>
</div>
</div>```
```<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-3.jpg');">
<img class="img-thumb" src="gem 4-3.jpg">
</a>
</li>
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-4.jpg');">
<img class="img-thumb" src="gem 4-4.jpg">
</a>
</li>
</ul>
</div>
<body>```
From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.
The issue is happening because of the a tag must be reloading the page on click.
Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
</div>
</div>
</div>
<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
<img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
</li>
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
<img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
</li>
</ul>
</div>
I want the navbar button hover drop-down effect to only activate once one of the navbar buttons is clicked. After that once clicked outside like body hover again should be disabled. At the moment hover is working where if I move the mouse around it activate (hence hover effect) but this can be annoying if user meant to not use navbar.
So normally when hovering the navbar, buttons shouldn't drop down any list. But once any of the navbar button is clicked, till you click out side, like the body all navbar buttons should be hovering like normally. I tried some jQuery but wasn't successful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>BAPTIST</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./headerAndFooter.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav top-nav pull-right">
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
</ul>
</div>
</div>
</nav>
</body>
</html>
I was having trouble with getting your navbar to work without all the css you have, so I used the generic Bootstrap 3 navbar from the site to show you.
What the code below does is this:
Anytime a link tag inside the nav is clicked, it will set the variable allowHover to true.
Anytime the users mouse enters the div with class of "content", allowHover is set to false.
I believe the other two functions are self explanatory, but if they require explanation, let me know.
let allowHover = false
$('nav a').click(function() {
allowHover = true
})
$('.content').mouseenter(function() {
allowHover = false
})
$('ul.nav .dropdown').hover(function() {
if(allowHover)
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn('fast');
})
$('ul.nav .dropdown').mouseleave(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut('fast');
})
Check out the codepen. Make sure you when you click a regular link in the nav, don't move your mouse outside of the navbar, or the dropdown won't work.
This is a close example to what you asked for, but I think its quite sufficient in getting you where you need to be to get your own rendition working.
I use ZURB Foundation 5's tabs. When I click on a tab the hash in the URL is changed.
I would like to prevent this behaviour because I use hash to handle the page load.
I was trying to use preventDefault but nothing happened.
Does anybody know how to achieve this?
Second try it's really work. But not work on loaded content from Ajax
this is my index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cẩm nang Dịch Lý beta 2.0.0</title>
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body >
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<!-- <a class="left-off-canvas-toggle menu-icon" href="#">
<span></span>
</a> -->
<a class="left-off-canvas-toggle icon-menu" href="#">
<span></span>
</a>
</section>
<section class="middle tab-bar-section">
<h1 class="title ">titke</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><a href="#home" >xxxx</a></li>
<li><label></label></li>
<li>xxxx</li>
</ul>
</aside>
<section class="main-section" >
<!-- content goes here -->
<div id="main"></div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
This is my app.js
page_manager();
$(window).on('hashchange', function(event) {
page = $(this).attr('href');
page_manager(page);
});
$(document).foundation({
offcanvas : {
open_method: 'move',
close_on_click : true
}
});
function page_manager(page){
var hash = window.location.hash;
if(!page){
var page = hash.split('/')[0];
}
var input = hash.split('/')[1];
off_canvas();
switch(page) {
case'':
case'undefined':
case'#home':
$( "#main" ).load( "pages/home.html", function() {
page_home();
});
break;
case '#solar':
$( "#main" ).load( "pages/solar.html", function() {
page_solar(input);
});
break;
}
And this is my solar.html
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational" >Chủ</li>
<li class="tab-title" role="presentational" >Hỗ</li>
<li class="tab-title" role="presentational">Biến</li>
</ul>
<div class="tabs-content" data-section data-options="deep_linking: false">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
<h2>First panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
<h2>Second panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
<h2>Third panel content goes here...</h2>
</section>
</div>
From the Docs
Deep Linking
Set deep-linking to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching data-slug on the content section that the hash should point to, without the pound (#) sign.
So if you mean you want to disable the hash change you may want to try to set it to false and remove the data-slug for the tabs..
<div data-section data-options="deep_linking: false">
I haven't used foundation before but this may help..
Edit
Include properly your Foundation dependencies
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation.min.js"></script>
Now try this, leave your tab sections empty and add an event to load content via AJAX, then call
HTML
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational">
Chủ
</li>
<li class="tab-title" role="presentational">
Hỗ
</li>
<li class="tab-title" role="presentational">
Biến
</li>
<div class="tabs-content" data-section data-options="deep_linking: false">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1" data-options="deep_linking: false">
<h2>Here perhaps add something because it is the active tab</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2" data-options="deep_linking: false">
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3" data-options="deep_linking: false">
</section>
</div>
JavaScript
$(document).ready(function () {
$(document).foundation(); // Init Foundation
// When first Tab is clicked get AJAX content
$("a[href='#panel2-1']").bind("click", function (e) {
e.preventDefault();
$("#panel2-1").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow'); // or $(document).foundation('tab', 'reflow');
});
});
// Second anchor
$("a[href='#panel2-2']").bind("click", function (e) {
e.preventDefault();
$("#panel2-2").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow');
});
});
// and so on
$("a[href='#panel2-3']").bind("click", function (e) {
e.preventDefault();
$("#panel2-3").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow');
});
});
});
See the DOCS for more information about $(document).foundation('reflow'); it is useful to call this function after your AJAX is completed and successful.
If your first tab is active by default you may want to load the content via AJAX on DOM ready or add the content manually for this tab. I tried this on my end and works fine.
I am really stuck on this. I have a dropdown menu called "Example" that contains 2 submenus "submenu1" and "submenu2". When either of the 2 is clicked, it will contain an image thumb which will be displayed in lightbox style. But as of now both thumbs are displayed and this is not what I want because the final web page will contain hundreds of images. Is there a way to make the images appear only when one sub-menu is clicked, according to the code below. Thanks
<!DOCTYPE html>
<head>
</head>
<body>
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">CATEGORIES</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle"
>BAPTISM
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
BOY CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".boy" tabindex="-1">Clothing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
GIRL CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".girl" tabindex="-1">Clothing</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</nav>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- gallery starts here -->
<li class="item-thumbs span3 boy"><!-- Fancybox - Gallery Enabled
- Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="boy"
title="" href="_include/img/work/full/boy_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/boy_clothing.jpg" alt="">
</li>
<li class="item-thumbs span3 girl">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="girl"
title="" href="_include/img/work/full/girl_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/girl_clothing.jpg"
alt="">
</li>
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</body>
</html>
WOW I can't believe I found the solution after so many days by adding just a simple word. Didn't have to mess with javascript at all. Actually in the external .js file of the website I was told by a code developer to add the following: filter: '.foobar' See the final result below $container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
filter: '.foobar',
layoutMode : 'fitRows'
});
Here is what I would do:
I try and keep the logic simple, then you can just use something similar on your site :)
(Please S.O. Correct me if I am wrong here!)
CSS:
Give your submenus an ID
JavaScript:
// 2 event listeners that will run a function when the submenu is clicked:
var sub_menu_1 = document.getElementById( "submenu1" );
sub_menu_1.addEventListener("click", DISPLAY_menu_1 , false);
var sub_menu_2 = document.getElementById( "submenu2" );
sub_menu_2.addEventListener("click", DISPLAY_menu_1 , false);
function DISPLAY_menu_1 () {
// Do whatever CSS you need here, I simply make the entire DIV 'visible':
sub_menu_1.style.visibility = 'visible';
// For good measures, lets make submenu2 'invisible':
sub_menu_2.style.visibility = 'hidden';
}
function DISPLAY_menu_2 () {
// Same in Reverse
sub_menu_2.style.visibility = 'visible';
sub_menu_1.style.visibility = 'hidden';
}
EDIT:
Whew! This took a while.. Sorry about that!
Check out this example:
I basically made 3 versions for you to try out.
Simply click the Edit this Pen button to check the code!
Example