Expanding a div element onClick always expands the same div element - javascript

I have three divs containing three separate charts on a page and I would like to expand one to fullscreen on click.
I am targeting a class in the div i'd like to expand (.container-expand) and also a class on the button (.toggle_fullscreen) so that no matter which button is clicked that element will expand, example below.
$('.toggle_fullscreen').on('click', function(){
// if already full screen; exit
// else go fullscreen
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
element = $('.container-expand').get(0);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
});
With the button being;
<button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>
And the container being;
<div class="card container-expand" id="chart1">
2 example divs to show layout
<div class="card col-md-6 border container-expand">
<div class="dropdown show ">
<button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>
<a class="btn btn-sm btn-white" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-download"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a style="margin-left: 10px" href="#" id="download1" download="ChartImage1.jpg"></i>save as
image</a>
<button class="dropdown-item" onclick="saveAsPDF1()">save as pdf</button>
<a class="dropdown-item" href="#">export charts as excel</a>
</div>
</div>
<h4 class="chartTitle">This is chart 1</h4>
<canvas class="chart1" id="chart1" width="400" height="200"></canvas>
</div>
<div class="card col-md-6 border container_expand">
<div class="dropdown show">
<button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>
<a class="btn btn-sm btn-white" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-download"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a style="margin-left: 10px" href="#" id="download2" download="ChartImage2.jpg"></i>save as
image</a>
<button class="dropdown-item" onclick="saveAsPDF2();">save as pdf</button>
<a class="dropdown-item" href="#">export charts as excel</a>
</div>
</div>
<h4 class="chartTitle">This is Chart 2</h4>
<canvas class="chart2 container-expand" id="chart2" width="400" height="200"></canvas>
</div>
The outcome i'm getting is that it is always the same div that expands to fullscreen. e.g I click fullscreen on chart 3 and chart 1 will expand. Same for Chart 2.
Prior to pushing to a branch, this worked fine with each chart and it's div expanding to full screen properly and then, didn't, so I think my understanding of what is happening is off.
I'm still learning, and I'm aware i could get this to work by repeating the code and changing the id's so they're unique, but I'd like to learn some understanding from this.
Any help is appreciated.

You could do as follows:
$('.toggle_fullscreen').on('click', function(e){
var element;
// if already full screen; exit
// else go fullscreen
if (document.fullscreenElement || ... ) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
/**
* based on your current event target `e`,
* find the .container-expand belonging to the current .dropdown box
**/
element = $(e).parent().parent().find('.container-expand');
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
});

Related

jQuery sort cards with up/down arrows

I am using Bootstrap cards on a page, where I want those cards to be sorted using up and down arrows. Every card has arrows in its header, to move it up or down in the layout. But of course, when it gets moved to the top, the up arrow should be gone, likewise for when it hits the bottom.
I've tried using if statements in this style:
// Result: Is never executed.
if(!$(card).find('.sort-down')) {}
// Result: Is always executed.
if($(card).not(':has(.sort-down)') {}
Where $(card) is the div containing the complete card that is being moved.
For example, my complete "move down" code block.
$(document).on('click', '.sort-down', function(e) {
e.preventDefault();
let card = $(this).closest('.card');
let sort_id = $(card).attr('data-sort');
let next_sort_id = Number(sort_id) + 1;
$('[data-sort]').each(function(index, value) {
if($(value).attr('data-sort') == next_sort_id) {
$(value).after($(card));
$(value).attr('data-sort', sort_id);
$(card).attr('data-sort', next_sort_id);
// Change buttons
if($(card).attr('data-sort') == sortCount - 1) {
$(card).find('.sort-down').remove();
if(!$(card).find('.sort-up')) {
// Insert up arrow
}
} else {
if(!$(card).find('.sort-up')) {
// Insert up arrow
}
if(!$(card).find('.sort-down')) {
// Insert down arrow
}
}
if($(value).attr('data-sort') == 0) {
$(value).find('.sort-up').remove();
if(!$(value).find('.sort-down')) {
// Insert down arrow
}
} else {
if(!$(value).find('.sort-down')) {
// Insert down arrow
}
if(!$(value).find('.sort-up')) {
// Insert up arrow
}
}
return false;
}
});
});
A little bit of the HTML so you can get an idea what classes/attributes my jQuery is selecting.
<div class="card mb-3" data-sort="0">
<div class="card-header">
Tekstveld
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i data-feather="arrow-down" width="16" height="16"></i></button>
</div>
<div class="card-body p-0">
<div id="editor"></div>
</div>
</div>
As I usually overcomplicate things, and get the result of it not even working, I'm hoping you could help me with either a simple or more advanced working solution of getting this done.
Using data-sort attribute as a sorting index could be more useful for "Global" sorting or filtering. Like when we click on one button to sort them all based on that property value.
But here, a less complicated alternative is to use jQuery default methods like : next(),prev(),closest(),insertAfter(),insertBefore()
$( document ).ready(function() {
setButtons();
$(document).on('click', '.sort-down', function(e) {
var cCard = $(this).closest('.card');
var tCard = cCard.next('.card');
cCard.insertAfter(tCard);
setButtons();
resetSort();
});
$(document).on('click', '.sort-up', function(e) {
var cCard = $(this).closest('.card');
var tCard = cCard.prev('.card');
cCard.insertBefore(tCard);
setButtons();
resetSort();
});
function resetSort(){
var i=0;
$('.card').each(function(){
//$(this).data('sort',i);
$(this).attr("data-sort", i);
i++;
});
}
function setButtons(){
$('button').show();
$('.card:first-child button.sort-up').hide();
$('.card:last-child button.sort-down').hide();
}
function resetSort(){
var i=0;
$('.card').each(function(){
//$(this).data('sort',i);
$(this).attr("data-sort", i);
i++;
});
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="card mb-3" data-sort="0">
<div class="card-header">
Tekstveld
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>
</div>
<div class="card-body p-0">
<div class="editor"></div>
</div>
</div>
<div class="card mb-3" data-sort="1">
<div class="card-header">
Voorbeeld
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>
</div>
<div class="card-body p-0">
<div class="editor"></div>
</div>
</div>
<div class="card mb-3" data-sort="2">
<div class="card-header">
Lorem ipsum
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>
</div>
<div class="card-body p-0">
<div class="editor"></div>
</div>
</div>
</div>
[UPDATE] : The setButtons() function would hide the non functional buttons when the div reach the limit.
Notice that I added another function resetSort() to reorder those data-sort values. Just in case, you need it for global sorting.

Updating window.location with new images based off JS if statements

I’m trying to refactor my already working application. https://besthaircolor.herokuapp.com/
App: When user selects eyeColor and skinTone, a new html results page opens (window.location) and presents them their 3 best hair colors.
Goal: Currently, I have numerous html pages based on every possible result, ex. eyeColor: “Brown” skinTone :“Fair”, Submit, then window.location opens up a separate page of 3 images of best unique hair colors. I’m trying to find a way where there is just ONE html results (window.location)page and the only thing that updates from the dropdown selections are the photos (results).
I’m having a hard time researching what I’m trying to do because adding an img src to window.location wouldn't technically work if it's not clear where the img's will be on the results page correct? I apologize if it’s confusing, I’m still a beginner. If anyone can point me in the right direction or suggest any tutorials for what I’m trying to accomplish that would be helpful.
Unless, my code is perfectly fine the way it currently is but from my studies duplicate/redundant code is never good. If anyone can kindly let me know.
My index.js:
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";
}
}
//Error message if user does not select an item from the dropdown menus
if (!eyeColor){
document.getElementById("error").innerHTML = "<span class='error'>Please choose an eye color</span>";
}
else if (!skinTone){
document.getElementById("error").innerHTML = "<span class='error'>Please choose a skin tone</span>";
}
}
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}`);
});
}
my index.html:
<title>Best Hair Color</title>
<!--Intro-->
<div class="container text-center">
<div class="jumbotron">
<h1 class="display-4" style="font-size: 2.5rem;"><i class="fas fa-user-alt"></i> Your Best Hair Color Is . . .</h1>
<hr class="my-4">
<p class="info">"The most flattering hair color comes when you have "THE PERFECT TRIO". A perfect trio is when your hair color matches your skin tone and eye color. Your perfect hair color will make your eyes POP. Your eyes will appear brighter and bigger. It will also go well with your skin tone. The right hair color will give your skin color, vibrance, and softness." - Salone Envy Chicago</p>
</div>
<!--Drop down Item 1 -->
<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" id="eyeColor">
<a class="dropdown-item" data="brown" ><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
<a class="dropdown-item" data="blue" ><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
<a class="dropdown-item" data="green" ><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
<a class="dropdown-item" data="hazel" ><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
</div>
</div>
</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">
<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;">
Skin Tone
</button>
<div class="dropdown-menu" onchange="selectMenu2" aria-labelledby="dropdownMenuButton" id="skinTone">
<a class="dropdown-item" data="fair"><img src="img/fair.jpg" class="rounded-circle" > Fair</a>
<a class="dropdown-item" data="light"><img src="img/light.jpg" class="rounded-circle" > Light</a>
<a class="dropdown-item" data="medium"><img src="img/medium.jpg" class="rounded-circle" > Medium</a>
<a class="dropdown-item" data="bronze"><img src="img/bronze_dark.jpg" class="rounded-circle" > Bronze</a>
<a class="dropdown-item" data="tan"><img src="img/tan.jpg" class="rounded-circle" > Tan</a>
<a class="dropdown-item" data="rich"><img src="img/dark.jpg" class="rounded-circle" > Rich</a>
</div>
<div class="error" id="error"></div>
</div>
</div>
</div>
<br>
<!--Result Button-->
<label id="error"></label>
<button type="button" class="btn btn-info btn-lg active" title ="Submit" style="background-color: #3e4444;" onclick="validate()"><i class="fas fa-arrow-circle-right fa-lg"></i></button>
<script>
$(".dropdown-menu a ").click(function(){
$(this).parents(".input-group-btn").find('.btn').text($(this).text());
});
</script>
</body>
</html>
There are a lot of ways to improve your code, but if you are specifically looking to clean up your redundancies, you can clean up all your selection functions with something like this:
function getColor (eyeColor, skinTone) {
window.location = eyeColor + "/" + eyeColor + "_" + skinTone + ".html";
}
I can suggest you with two solutions,
With the same set of pages,rather than redirecting the whole page make use you of Iframe to load whatever page you want inside the Iframe
The way I do:
Use image tag and feed it with whatever image source you want as a byte array.
So basically what I was suggesting was something like:
<!--index.html-->
<!--after result-button-->
<div id="brown_fair" style="display:hidden">
<!-- here goes your brown/brown_fair.html content, or what you want of it-->
</div>
<!--one more div for each possible result-->
and in your javascript:
function validate() {
if (eyeColor && skinTone){
// alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
if (eyeColor=="brown" && skinTone=="fair") {
//toggle element visibility
document.getElementById("brown_fair").style.display(desiredDisplay);
}
//...
}
}
If your code is already working, you can replace the redundant code this way:
window.location = `{eyeColor}/{eyeColor}_{skinTone}.html`;

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>

Fix behavior of collapse/expand blocks

I use bootstrap 4 alpha 6 version. I have several blocks in my page. I want expand/collapse these blocks by clicking main button (id='expand-collapse'). Also every button has there own individual buttons which would open/close concrete block. Right know I use next js code and have strange behavior.
For example: I open first block by clicking first button, then I click main button (id='expand-collapse') to open other blocks. But in fact first block closed and other blocks opened. How to fix this problem?
HTML:
<div class="card">
<div class="card-header">
<button id='expand-collapse' type="button" data-parent="#blocks" data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
</div>
<div class="card-block">
<div id="blocks">
<div class="list-group">
<div class="list-group-item">
<a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1">OPEN/CLOSE FIRST</a>
<div class="collapse block" id="block-1">
FIRST BLOCK BLOCK-->
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">OPEN/CLOSE SECOND</a>
<div class="collapse block" id="block-2">
SECOND BLOCK
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">OPEN/CLOSE THIRD</a>
<div class="collapse block" id="block-3">
THIRD BLOCK
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$(function() {
$('#expand-collapse').on('click', function() {
var target = $(this).attr('data-target');
$(target).each(function() {
if ($(this).hasClass('show')) {
$(this).collapse('hide');
} else {
$(this).collapse('show');
}
});
});
});
That kind of behaviour is due to data-toggle attribute. Take that off from the main button and change the script to this-
HTML
<button id='expand-collapse' type="button" data-parent="#blocks" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
JQUERY:
$(function() {
var showAll = false;
$('#expand-collapse').on('click', function() {
var target = $(this).attr('data-target');
//console.log('showAll=' + showAll);
$(target).each(function() {
if(showAll === false) {
$(this).collapse('show');
}
else {
$(this).collapse('hide');
}
});
if(showAll === false) {
showAll = true;
}
else {
showAll = false;
}
//console.log('showAll=' + showAll);
});
});

Change class on span tag onClick inside Button tag

<button class="btn btn-primary" onclick="wavesurfer.playPause()" type="button">
<span class="glyphicon glyphicon-play"></span></button>
When I press this button I want the span class to change:
From: class="glyphicon glyphicon-play"
To: class="glyphicon glyphicon-pause"
http://jsfiddle.net/fnfNm/35/ Ive looked att this example but it doesnt have a class before it changes.
Please give me jsfiddle example.
I solved it like this:
HTML
<button class="btn btn-primary playPauseBtn" onclick="myFunction()" type="button">
<span id="playPauseSpanId" class="glyphicon glyphicon-play"></span>
</button>
Javascript
function myFunction(){
wavesurfer.playPause();
if(wavesurfer.isPlaying() == true){
document.getElementById("playPauseSpanId").className ="glyphicon glyphicon-pause"
}else {
document.getElementById("playPauseSpanId").className ="glyphicon glyphicon-play"
}
}
Here small algorithm for change class.
var playPauseBtn = document.querySelector('.playPauseBtn');
if(playPauseBtn){
var span = document.querySelector('.playPauseBtn .glyphicon');
playPauseBtn.addEventListener('click', function(){
if (span) {
if (span.classList.contains('glyphicon-play')) {
span.classList.remove('glyphicon-play');
span.classList.add('glyphicon-pause');
} else {
span.classList.remove('glyphicon-pause');
span.classList.add('glyphicon-play');
}
}
},false);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary playPauseBtn" onclick="wavesurfer.playPause()" type="button">
<span class="glyphicon glyphicon-play"></span>
</button>

Categories