Adding a 3rd Option to Questionnaire for "Select an Option" - javascript

I have a questionnaire and if the user selects Option 1 or 2 for Select an Option what they select determines the link that is displayed at the end of the questionnaire. Instead of only 2 options, I would like to have 3 options for Select an Option.
Here is the HTML:
<a id="q1_one" class="step_button next" href="javascript:void(0)">option 1</a>
<a id="q1_two" class="step_button next" href="javascript:void(0)">option 2</a>
This is where I would like to add a q1_three but I'm not sure how to get it to work
The Javascript:
function run_loading_run_4(time_delay, q1) {
timeoutID3 = window.setTimeout(
function() {
run_loading_4(q1);
},
time_delay);
}
function run_loading_4(q1) {
$('.run_loading_4, .loading').hide();
$('.li_run_loading_4, li_run_loading_5, .run_loading_5, .show_end').fadeIn();
$('#' + q1).show();
}
$(function () {
var q1;
$(document).on('click', '.next', function (e) {
e.preventDefault();
$(this).parent().hide().next().fadeIn();
if ($(this).attr('id') === "q1_one") {
q1 = "yes";
} else if ($(this).attr('id') === "q1_two") {
q1 = "no";
}
});
$(document).on('click', '.run_loading', function (e) {
e.preventDefault();
$(this).parent().hide().next().fadeIn();
$('.step4 .loading').show();
run_loading_run_1('2000');
run_loading_run_2('4500');
run_loading_run_3('6500');
run_loading_run_4('8900',q1);
});
});
and the answers: that are displayed depending if option 1 or 2 is selected.
<div id="yes">
<a class="step_button" href="http://link1.com">I Agree</a>
</div>
<div id="no">
<a class="step_button" href="http://link2.com">I Agree</a>
</div>
JSFIDDLE: http://jsfiddle.net/8r6eH/

Add option by add following lines:
HTML(line#5 and #37);
<h2>Select An Option</h2>
<a id="q1_one" class="step_button next" href="javascript:void(0)">Option 1</a>
<a id="q1_two" class="step_button next" href="javascript:void(0)">Option 2</a>
<a id="q1_three" class="step_button next" href="javascript:void(0)">Option 3</a>
<div id="yes">
<a class="step_button" href="http://link2.com">IF QUESTION 1 = Option 1</a>
</div>
<div id="no">
<a class="step_button" href="http://link1.com">IF QUESTION 1 = Option 2</a>
</div>
<div id="3rd_option">
<a class="step_button" href="http://link1.com">IF QUESTION 1 = Option 3</a>
</div>
and javascript(line#57):
if ($(this).attr('id') === "q1_one") {
q1 = "yes";
} else if ($(this).attr('id') === "q1_two") {
q1 = "no";
} else if ($(this).attr('id') === "q1_three") {
q1 = "3rd_option";
}
jsFiddle

Related

Toggle menu by changing styles in Javascript

I am trying to add a toggle function to a menu.
I'm trying to do this by changing the style of the the menu in Javascript like below.
It seems to work when I click to open the menu but it doesn't work for closing the menu.
let toogleNavStatus = false;
let toogleNav = function(){
let getSidebar = document.querySelector(".nav-links");
if (toogleNavStatus === false) {
getSidebar.style.visibility = "visible";
toogleNavStatus === true;
}
else if (toogleNavStatus === true) {
getSidebar.style.visibility = "hidden";
toogleNavStatus === false;
}
}
Can someone help me figure out what the problem is with this code?
Below is the HTML
<nav class="nav-bar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="logo" />
</a>
<button type="button" class="btn nav-btn">
<i class="fas fa-bars" onclick="toogleNav()"></i>
</button>
</div>
<div class="nav-links">
Home
All
Contacts
<div class="nav-link nav-social">
<a href="https://www.instagram.com/">
<i class="fab fa-instagram"></i
></a>
</div>
</div>
</div>
</nav>
Thank you
You are not assigning a new state for toogleNavStatus in your JS.
It should be
toogleNavStatus = true;
toogleNavStatus = false;
not
toogleNavStatus === true;
toogleNavStatus === false;
= assigns the value, == and === compares them.

Using jQuery to find the next div and show/hide it

I'm working on an application that lists products/sub products. I'm trying to show the sub products when I click on the chevron. For some reason, I can't get this to work. I've been able to get the flipping of the chevron to work.
Here is my code:
<div class="item">
Product 1
<div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"></i></div>
<div class="sub-item-list" style="display: none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>
function expand(event) {
if ($(event).hasClass("fa-chevron-down")){
setTimeout(function () {///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
$(event).closest('div').next().find("sub-item-list").css('display', 'inherit');
} else {
setTimeout(function () {///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
$(event).closest('div').next().find("sub-item-list").css('display', 'none');
}
};
Can someone tell me that the issue is?
You can use .closest('div.item') to get the closest div and then use .find(".sub-item-list") to find the div which you need to display .
Demo Code :
function expand(event) {
if ($(event).hasClass("fa-chevron-down")) {
setTimeout(function() { ///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
//get closest div with class item -> find class
$(event).closest('div.item').find(".sub-item-list").css('display', 'inherit');
} else {
setTimeout(function() { ///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
//get closest div with class item -> find class
$(event).closest('div.item').find(".sub-item-list").css('display', 'none');
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
Product 1
<div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"> >> </i></div>
<div class="sub-item-list" style="display: none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>
As you are setting onclick event on <i> tag you can also call parent().next() method instead of closest() to get subitem/product.
Try this example:
function expand(event)
{
if ($(event).hasClass("fa-chevron-down"))
{
setTimeout(function()
{///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
$(event).parent().next().css("display", "block");
}
else
{
setTimeout(function ()
{///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
$(event).parent().next().css('display', 'none');
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
Product 1
<div style="float: right;">
<i class="fas fa-fw fa-chevron-down" onclick="expand(this, event)">Toggle Chevron</i>
</div>
<div class="sub-item-list" style="display:none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>

How display selected item from Bootstrap 4 drop-down item menu

I'm trying to display what the user selects once they click on an item from the Boostrap 4 drop down menu.
Ex. "What is your eye color" User selects : Blue - Blue is displayed after click.
Ex. "What is your skin tone" User selects: Fair- Fair is displayed after click.
I have done research and jQuery seems to be the best bet however all of the solutions are for older bootstrap versions. I'm using Boostrap 4 and there are no li tags in the bootstrap 4 code, it's all a class tags so I'm not sure how to fit that into the jQuery option below. Also, I have (2) dropdown menus - please see pic. I'm not sure if this makes it more tricky. Any assistance or direction would be great.
jQuery:
$(document).ready (function(){
$('#selectmenu1 a').click(function){
}
HTML:
<!--Drop down Item 1 -->
<h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Eye Color
</button>
<div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data="brown"><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
<a class="dropdown-item" href="#" data="blue"><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
<a class="dropdown-item" href="#" data="green"><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
<a class="dropdown-item" href="#" data="hazel"><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
</div>
</div>
<!--Drop down Item 2-->
<h3 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h3>
<div id="menu2" class="dropdown">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Skin Tone
</button>
<div class="dropdown-menu" onchange="selectMenu2" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data="fair"><img src="img/fair.jpg" class="rounded-circle" > Fair (porcelain)</a>
<a class="dropdown-item" href="#" data="light"><img src="img/light.jpg" class="rounded-circle" > Light (fair to light)</a>
<a class="dropdown-item" href="#" data="medium"><img src="img/medium.jpg" class="rounded-circle" > Medium (light to medium)</a>
<a class="dropdown-item" href="#" data="bronze"><img src="img/bronze_dark.jpg" class="rounded-circle" > Bronze dark (deep tan)</a>
<a class="dropdown-item" href="#" data="tan"><img src="img/tan.jpg" class="rounded-circle" > Tan (warm to medium)</a>
<a class="dropdown-item" href="#" data="rich"><img src="img/dark.jpg" class="rounded-circle" > Rich (deep)</a>
</div>
</div>
<script>
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
initApplication();
}
}
var eyeColor = null;
function selectMenu1(value){
eyeColor = value;
}
var skinTone = null;
function selectMenu2(value){
skinTone = value;
}
function validate() {
if (eyeColor && skinTone){
// alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
if (eyeColor=="brown" && skinTone=="fair"){
window.location = "brown/brown_fair.html";
} else if (eyeColor=="brown" && skinTone=="light"){
window.location = "brown/brown_light.html";
} else if (eyeColor=="brown" && skinTone=="medium"){
window.location = "brown/brown_medium.html";
} else if (eyeColor=="brown" && skinTone=="bronze"){
window.location = "brown/brown_bronze.html";
} else if (eyeColor=="brown" && skinTone=="tan"){
window.location = "brown/brown_tan.html";
} else if (eyeColor=="brown" && skinTone=="rich"){
window.location = "brown/brown_rich.html";
}
if (eyeColor=="blue" && skinTone=="fair"){
window.location = "blue/blue_fair.html";
} else if (eyeColor =="blue" && skinTone=="light"){
window.location = "blue/blue_light.html";
} else if (eyeColor =="blue" && skinTone=="medium"){
window.location = "blue/blue_medium.html";
} else if (eyeColor =="blue" && skinTone=="bronze"){
window.location = "blue/blue_bronze.html";
} else if (eyeColor=="blue" && skinTone=="tan"){
window.location = "blue/blue_tan.html";
} else if (eyeColor=="blue" && skinTone=="rich"){
window.location = "blue/blue_rich.html";
}
if (eyeColor=="green" && skinTone=="fair"){
window.location = "green/green_fair.html";
} else if (eyeColor == "green" && skinTone=="light"){
window.location= "green/green_light.html";
} else if (eyeColor== "green" && skinTone=="medium"){
window.location="green/green_medium.html";
} else if (eyeColor=="green" && skinTone=="bronze"){
window.location="green/green_bronze.html";
} else if (eyeColor=="green" && skinTone=="tan"){
window.location="green/green_tan.html";
} else if (eyeColor=="green" && skinTone=="rich"){
window.location="green/green_rich.html";
}
if (eyeColor=="hazel" && skinTone=="fair"){
window.location = "hazel/hazel_fair.html";
} else if (eyeColor=="hazel" && skinTone=="light"){
window.location="hazel/hazel_light.html";
} else if (eyeColor=="hazel" && skinTone=="medium"){
window.location="hazel/hazel_medium.html";
} else if (eyeColor=="hazel" && skinTone=="bronze"){
window.location="hazel/hazel_bronze.html";
} else if (eyeColor=="hazel" && skinTone=="tan"){
window.location="hazel/hazel_tan.html";
} else if (eyeColor=="hazel" && skinTone=="rich"){
window.location="hazel/hazel_rich.html";
}
}
else if (!eyeColor){
alert("Please pick an eye colour");
} else if (!skinTone){
alert("Please pick a skin tone");
}
}
function initApplication(){
//setup dropdown menu selection events
Array.from(document.querySelectorAll(".dropdown-menu")).forEach((menu,idx)=>{
const menuCallbackName = menu.attributes.onchange.value;
const fetchedCallback = window[menuCallbackName] || null;
if (fetchedCallback){
Array.from(menu.children).forEach((child)=>{
const callbackValue = child.attributes.data ? child.attributes.data.value : null;
if (callbackValue) child.onclick = () => fetchedCallback(callbackValue);
});
} else console.error(`No callback function named ${menuCallbackName} for menu ${idx}`);
});
}
</script>
And if even easier
<script>
$(".dropdown-menu a ").click(function () {
let x = $(this).text();
alert(x);
});
</script>
Works with this HTML below. No input-group needed and jQuery short enough.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" data-toggle="modal" href="#myModal">Navbar</a>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
id="dropdownMenuButton" style="width:4rem"
data-toggle="dropdown">en
</button>
<div class="dropdown-menu" id="dropDownMenu" aria-
labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">en</a>
<a class="dropdown-item" href="#">de</a>
</div>
</div>
</nav>
You can access the data using jQuery's "attr()" function.
$('#selectmenu1 a').click(
function( event ){
// Prevents browser from treating like normal anchor tag
event.preventDefault()
// Retrieves data in anchor tag
let data = $(this).attr('data')
}
)
Side note, it is possible to use list tags for this in Bootstrap. Bootstrap is really flexible and robust. Also, in my opinion, it would be most semantically correct to use "select".
I found the solution:
I included input-group into my html, as well as included jQuery:
HTML:
<h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
<div class="input-group justify-content-center">
<div class="input-group-btn">
<button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
Eye Color
</button>
<div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data="brown" ><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
<a class="dropdown-item" href="#" data="blue" ><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
<a class="dropdown-item" href="#" data="green" ><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
<a class="dropdown-item" href="#" data="hazel" ><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
</div>
</div>
</div>
</div>
<script>
$(".dropdown-menu a ").click(function(){
$(this).parents(".input-group-btn").find('.btn').text($(this).text());
});
</script>

Check if a element is visible

I want to check if an element is visible and play a song only when it is, using: a trigger('click') event handler.
Unfortunately, I can't get it working as expected.
What am I doing wrong and how can I fix it?
Here is my JavaScript code (jQuery):
$('.overlay').on('click', function () {
if ($('a.icon-play').is(':hidden') == false) {
$('#stop').trigger('click');
} else {
$('#play').trigger('click');
}
});
Below is my HTML code:
<div class="info">
<div class="player-home-video">
<audio id="yourownlullaby-audio" src="uploads/downloads/Buenas%20%20Noches%20%3C?php%20echo%20$_POST['name'];%20?%3E.mp3"></audio>
</div>
<div class="thumbnail-home-video">
<a href="#" id="play">
<span class="icon-play preview-icon" id="play"></span>
</a>
<a href="#" id="stop">
<span class="icon-pause preview-icon" id="stop"></span>
</a>
<img class="info" src="img/thumbnail-home-video.png" />
<div class="overlay"></div>
</div>
</div>
$('.overlay').on('click', function () {
if ($('a .icon-play').is(':hidden') == true) {
$('#stop').trigger('click');
}
else
{
$('#play').trigger('click');
} });
Your​ if should be the other way.

Change CSS of li tag which is inside div and ul tag : jQuery or JavaScript

This is my menu. I am using Metro UI template.
<div id="divMenu" class="fluent-menu" data-role="fluentmenu" data-on-special-click="specialClick">
<ul class="tabs-holder">
<li id="litabhome" class="active">Home</li>
<li id="litabmailings" class="">Mailing</li>
<li id="litabfolder" class="">Folder</li>
<li id="litabview" class="">View</li>
<li id="limasters" class="active">Masters</li>
</ul>
<div class="tabs-content">
<div class="tab-panel" id="tab_home" style="display: block;">
<div class="tab-panel-group">
<div class="tab-group-content">
<button class="fluent-big-button">
<span class="icon mif-envelop"></span>
Create<br />
message
</button>
<div class="tab-content-segment">
<button class="fluent-big-button dropdown-toggle">
<span class="icon mif-file-picture"></span>
<span class="label">Create<br />
element</span>
</button>
<ul class="d-menu" data-role="dropdown" style="display: none;">
<li>Message</li>
<li>Event</li>
<li>Meeting</li>
<li>Contact</li>
</ul>
</div>
<div class="tab-content-segment">
<button class="fluent-big-button">
<span class="mif-cancel"></span>
<span class="label">Delete</span>
</button>
</div>
</div>
<div class="tab-group-caption">Clipboard</div>
</div>
<div class="tab-panel-group">
<div class="tab-group-content">
<div class="tab-content-segment">
<button class="fluent-button"><span class="mif-loop"></span>Replay</button>
<button class="fluent-button"><span class="mif-infinite"></span>Replay all</button>
<button class="fluent-button"><span class="mif-loop2"></span>Forward</button>
</div>
<div class="tab-content-segment">
<button class="fluent-tool-button">
<img src="MetroCSS/docs/images/Notebook-Save.png" /></button>
<button class="fluent-tool-button">
<img src="MetroCSS/docs/images/Folder-Rename.png" /></button>
<button class="fluent-tool-button">
<img src="MetroCSS/docs/images/Calendar-Next.png" /></button>
</div>
</div>
<div class="tab-group-caption">Reply</div>
</div>
<div class="tab-panel-group">
<div class="tab-group-content">
<div class="input-control text">
<input type="text" />
<button class="button"><span class="mif-search"></span></button>
</div>
<button class="fluent-button"><span class="icon-book on-left"></span>Address Book</button>
<div class="tab-content-segment">
<button class="fluent-button dropdown-toggle">
<span class="mif-filter on-left"></span>
<span class="label">Mail Filters</span>
</button>
<ul class="d-menu" data-role="dropdown">
<li>Unread messages</li>
<li>Has attachments</li>
<li class="divider"></li>
<li>Important</li>
<li>Broken</li>
</ul>
</div>
</div>
<div class="tab-group-caption">Search</div>
</div>
</div>
<div class="tab-panel" id="tab_masters" style="display: none;">
<div class="tab-panel-group">
<div class="tab-group-content">
<button class="fluent-big-button" id="btnStoreMaster">
<span class="icon mif-envelop"></span>
Store Master
</button>
</div>
</div>
</div>
</div>
</div>
When page loads, by default "Home" menu is showing with its content tab "tab_home".
Here, I have a tab content called "tab_masters" which has a button called 'btnStoreMaster". When user clicks this button, then it will be redirected to StoreMaster.aspx page.
Its redirecting, but its corresponding menu "Masters" is not highlighting. Again it shows the Home menu tab contents. How to make the focus in the clicked menu using JQuery or JavaScript?
This is my jQuery function,
$("#btnStoreMaster").click(function () {
$("#divMenu ul li").each(function () {
//alert($(this).attr("id"));
if ($(this).attr("id") == "limasters") {
$(this).addClass("active");
}
else
$(this).removeClass("active");
})
$("#divMenu div").each(function () {
alert(this.value);
if ($(this).attr("id") == "tab_masters")
$(this).css("display", "block");
else
$(this).css("display", "none");
})
});
Here, the menu css has changed, But I could not change its corresponding tab content display to block.
use this jQuery code:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('#divMenu a').each(function () {
// and test its normalized href against the url pathname regexp
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});});
its take the location of current page and for each a tag if href equals location set active class
but you can already use this:
$(function () {
$("#btnStoreMaster").click(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#divMenu a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
$("#divMenu div").each(function () {
alert(this.value);
if ($(this).attr("id") == "tab_masters"){
$(this).css("display", "block");
}
else{
$(this).css("display", "none");
}
})
}
})
})
i just adjudge you need
$("#divMenu div").each(function () {
alert(this.value);
if ($(this).attr("id") == "tab_masters"){
$(this).css("display", "block");
}
else{
$(this).css("display", "none");
}
})
to do something.
this new cod will executing when clicking on tab, take the location or current page(StoreMaster.aspx) ,set active class and do what you want!
hope it work for you.
I achieved this by using the below code:
$("#divMenu > ul li").each(function () {
if ($(this).attr("id") == "limasters") {
$(this).addClass("active");
}
else {
$(this).removeClass("active");}
})
$("#divMenu > div > .tab-panel").each(function () {
if ($(this).attr("id") == "tab_masters") {
$(this).css("display", "block");
}
else {
$(this).css("display", "none");
}
})

Categories