Make "continue" button appear when items selected and disappear when items unselected - javascript

My question is abou make "continue" button appear when items selected and disappear when items unselected using JavaScript.
var typpro = document.getElementsByClassName("typpro"),
continubutton = document.getElementsByClassName("continue");
var w;
for (w = 0; w < typpro.length; w++) {
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if (this.classList.contains("active")) {
continubutton[0].style.height = "100px";
} else {
continubutton[0].style.height = "0px";
}
};
}
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Volume Button</button>
</div>
</div>
<div class=" col-xs-12">
<div class="typpro">
<button style="width:98%">Other</button>
</div>
</div>
<div class=" col-xs-12">
<div class="inputpro">
<input type="text" placeholder="your Problem">
</div>
</div>
<div class=" col-xs-12">
<div class="continue">
<button>Continue</button>
</div>
</div>
</div>
</div>

So, you've got a couple of things working against you with your code as it stands.
Firstly, you need to actually define your continubutton variable, like so:
HTML
<button id="continubutton" style="display: none;">Continue</button>
JS:
var continubutton = document.getElementById('continubutton');
Then, you also need to define your typpro variable, like so:
JS:
var typpro = document.getElementsByClassName('typpro');
For what you're trying to do, I went with display: inline and display: none, instead of the height change because there would be a fair amount of additional CSS you would need to do to accomplish this. But here is the final result:
HTML:
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Screnen</button>
</div>
</div>
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Battery</button>
</div>
</div>
<button id="continubutton" style="display: none;">Continue</button>
</div>
And the JS:
var w;
var typpro = document.getElementsByClassName('typpro');
var continubutton = document.getElementById('continubutton');
for (w = 0; w < typpro.length; w++){
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if(this.classList.contains("active")){
continubutton[0].style.display = "inline";
} else {
continubutton[0].style.display = "none";
}
};
}
EDIT: Since using height seems to be the route we need to go, here is updated code:
var w;
var typpro = document.getElementsByClassName('typpro');
var continubutton = document.getElementsByClassName('continue');
for (w = 0; w < typpro.length; w++){
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if(this.classList.contains("active")){
continubutton[0].style.height = "100px";
} else {
continubutton[0].style.height = "0px";
}
};
}
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Screnen</button>
</div>
</div>
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Battery</button>
</div>
</div>
<div class="continue" style="height: 0;overflow:hidden;">
<button id="continubutton">Continue</button>
</div>
</div>
It's important that you set the initial height on your <div class="continue"></div> container, and that you set it to overflow: hidden; so anything that falls outside of the bounding box is hidden from view. This will allow you to animate the height so the button appears "hidden" until an option is selected.

the solution is
for (let btn of typpro) {
btn.addEventListener('click', function() {
let token = 0;
this.classList.toggle('active');
for (let i = 0; i < typpro.length; i += 1) {
if (typpro[i].classList.contains('active')) {
token += 1;
}
}
if (token > 0) {
continubutton[0].style.height = '100px';
} else {
continubutton[0].style.height = '0';
}
});
}

Related

hide div blocks and show expansion button on menu using cookie

I need some help implementing jQuery cookies.
I made a masonry grid in codepen where you can minimize and maximize the div blocks.
<div class="container">
<br>
<div class="row">
<div id="panel1" class="col-xs-6 col-lg-4">
<div id="title"><b>Block 1</b>
<div class="button" onclick="Close1()">-</div>
</div>
1</div>
<div id="panel2" class="col-xs-6 col-lg-4 tall">
<div id="title"><b>Block 2</b>
<div class="button" onclick="Close2()">-</div>
</div>
2</div>
<div class="col-xs-6 col-lg-4">3</div>
<div class="col-xs-6 col-lg-4 tall">4</div>
<div class="col-xs-6 col-lg-4 taller">5</div>
<div class="col-xs-6 col-lg-4">6</div>
<div class="col-xs-6 col-lg-4 tall">7</div>
<div class="col-xs-6 col-lg-4">8</div>
<div class="col-xs-6 col-lg-4">9</div>
<div class="col-xs-6 col-lg-4 taller">10</div>
</div>
</div>
<div id="footer">
<div id="icon1" class="icon" onclick="Open1()">Open 1</div>
<div id="icon2" class="icon" onclick="Open2()">Open 2</div>
</div
$('.row').masonry({
itemSelector : '.col-xs-6'
});
"use strict";
// End of what's configurable.
var clicked = null;
var pane = document.getElementById('panel1');
function Close1() {
document.getElementById("panel1").style.opacity = "0";
document.getElementById("panel1").style.display = "none";
document.getElementById("icon1").style.display = "inline-block";
}
function Open1() {
document.getElementById("panel1").style.opacity = "1";
document.getElementById("panel1").style.display = "block";
document.getElementById("icon1").style.display = "none";
}
function Close2() {
document.getElementById("panel2").style.opacity = "0";
document.getElementById("panel2").style.display = "none";
document.getElementById("icon2").style.display = "inline-block";
}
function Open2() {
document.getElementById("panel2").style.opacity = "1";
document.getElementById("panel2").style.display = "block";
document.getElementById("icon2").style.display = "none";
}
https://codepen.io/ariellbell/pen/bQMyOX
I want to be able to store these settings using jquery cookies (and/or html web storage) and after the user clicks on the button maybe add an (ajax) refresh setting to reorganize the div blocks in the masonray.
I am new to using jquery (and also cookie settings).
So i have difficulty implementing this in the code.
Any help is appreciated!
Thanks
So i made a new pen with cleaned up jquery functions and added the cookies. However the cookies work partly. I have trouble setting it for multiple divs.
What goes wrong?
if(Cookies.get("cohide")=="Enabled"){
$(".block1").addClass('minimalize');
$(".icon").addClass('inline');
}
if(Cookies.get("coshow")=="Enabled"){
$(".block1").removeClass('minimalize');
$(".icon").removeClass('inline');
}
"use strict";
// End of what's configurable.
//var clicked = null;
$('.block1').click(function(){
// remove set darkmode cookie, add lightmode cookie
Cookies.remove('coshow');
Cookies.set('cohide', 'Enabled');
$(this).addClass('minimalize');
var id1 = $(this).data().value;
//var y = document.getElementById(id1);
document.getElementById(id1).classList.add("inline");
console.log("Setted Cookie cohide");
});
$('.icon').click(function(){
Cookies.remove('cohide');
Cookies.set('coshow', 'Enabled');
$(this).removeClass('inline');
var id2 = $(this).data().value;
document.getElementById(id2).classList.remove("minimalize");
// document.getElementById(id1).style.display = "inline";
console.log("Setted Cookie coshow");
});
https://codepen.io/ariellbell/pen/jQKYaz

Resize panel to col-md-6

I'm fairly new at learning to code and I'm just playing around with something. I have a panel and I have a button above it to resize the panel.
Here is my code:
var panel = document.getElementById("panel");
function panelResize() {
if (panel.style.width >= "75%") {
panel.style.width = "50%";
} else {
panel.style.width = "75%";
}
}
<button style="margin:10px" onclick="panelResize()">button</button>
<div class="col-md-12">
<div class="col-md-6" id="panel">
<div class="panel panel-default">
<div class="panel-heading">
<p>panel heading</p>
</div>
<div class="panel-body">
<p>panel body</p>
</div>
</div>
</div>
</div>
I know this code may not be 100% so I apologize.
I would like the button to be able to increase the width of the panel to col-md-8 for example, then to return back to col-md-6 with the same button if possible.
You can do this
var panel = document.getElementById("panel");
if(panel.classList.contains('col-md-6')){
panel.classList.remove('col-md-6');
panel.classList.add('col-md-8');
} else {
panel.classList.remove('col-md-8');
panel.classList.add('col-md-6');
}

Double onclick events not working

I have a tab menu on my website and the code used for it works perfectly. JavaScript:
function openTab(tabName) {
var i;
var x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "flex";
}
HTML:
<div class="col-md-4">
<div onclick="openTab('tab-1')" class="tab-button">
<h5>IT Problems</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-2')" class="tab-button">
<h5>Save Time</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-3')" class="tab-button">
<h5>Cost Effective</h5>
</div>
</div>
And then obviously I applied the IDs ("tab-[1/2/3]") and classes ("tab") to the divs I want as tabs. However, when I replicate the exact same code to have a tab button highlighted for the current tab open, it doesn't work. JavaScript:
function selectedTab(selectName) {
var i;
var x = document.getElementsByClassName("select");
for (i = 0; i < x.length; i++) {
x[i].style.border-bottom-color = "#dbdbdb";
}
document.getElementById(selectName).style.border-bottom-color = "#25a7df";
}
HTML:
<div class="col-md-4">
<div onclick="openTab('tab-1'); selectedTab('select-1')" class="tab-button">
<h5 id="select-1" class="select">IT Problems</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-2'); selectedTab('select-2')" class="tab-button">
<h5 id="select-2" class="select">Save Time</h5>
</div>
</div>
<div class="col-md-4">
<div onclick="openTab('tab-3'); selectedTab('select-3')" class="tab-button">
<h5 id="select-3" class="select">Cost Effective</h5>
</div>
</div>
I've looked literally everywhere online and had multiple people look at this and nobody can find a solution. Can anyone help?
border-bottom-color is not a valid style property, you need to replace hyphen case with camel case
You need to use the borderBottomColor property of style in selectTab method
function selectedTab(selectName) {
var x = document.getElementsByClassName("select");
for (var i = 0; i < x.length; i++) {
x[i].style.borderBottomColor = "#dbdbdb"; //observe style property Change
}
document.getElementById(selectName).style.borderBottomColor = "#25a7df";
}

select elements by class that have a specific child element with javascript

I have a product list that is structured like the below HTML.
I am trying to select the elements with the class="www-components-menu-product-list--item_DgfZL" that contain the elements with the class name class="www-components-product-card--cbd_2luC9".
Then I want to hide those elements in a click function.
Please note. I have a lot of these items on the page, the function should apply to all the potential elements not just the two I have in the example.
I already understand how to do this with Jquery, but I am trying to avoid Jquery here.
This my attempt with javascript.
var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL");
for (i = 0; i < itemClass.length; i++) {
var insideItemClass = itemClass.getElementsByClassName("www-components-product-card--hybrid_2AD7v");
for (i = 0; i < insideItemClass.length; i++) {
insideItemClass.style.display = "none";
}
}
HTML Structure:
<div class="www-components-menu-product-list--item_DgfZL">
<div class="www-components-product-card--card_2mjWk">
<div>
<div class="www-components-product-card--hybrid_2AD7v www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">
</div>
<div class="www-components-product-card--description_3un8n" style="height: 38%;">
</div>
</div>
</div>
</div>
<div class="www-components-menu-product-list--item_DgfZL">
<div class="www-components-product-card--card_2mjWk">
<div>
<div class="www-components-product-card--cbd_2luC9 www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">
</div>
<div class="www-components-product-card--description_3un8n" style="height: 38%;">
</div>
</div>
</div>
</div>
<div class="www-components-menu-product-list--item_DgfZL">
<div class="www-components-product-card--card_2mjWk">
<div>
<div class="www-components-product-card--cbd_2luC9 www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">
</div>
<div class="www-components-product-card--description_3un8n" style="height: 38%;">
</div>
</div>
</div>
</div>
MY ERROR
01:26:25.549 menubest.html:2923 Uncaught TypeError: itemClass.getElementsByClassName is not a function
at HTMLDivElement.<anonymous> (menubest.html:2923)
use this:
itemClass[i].getElementsByClassName
insideItemClass[i].style.display = "none";
instead of
itemClass.getElementsByClassName
insideItemClass.style.display = "none";
Full code:
var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL");
for (i = 0; i < itemClass.length; i++) {
var insideItemClass = itemClass[i].getElementsByClassName("www-components-product-card--hybrid_2AD7v");
if(insideItemClass.length > 0){
itemClass.item(i).style.display = "none";
}
}
Here is the fiddle: https://jsfiddle.net/jeL0fezh/8/

Wrap divs according to the bootstrap row conditions

I have following condition in which what i want is when my child div's first class col-md-4 and beneath div class's numeric digits 4+4+4 >= 12 then wrap those in div having class row.Fidle of my problem Fiddle
<div class="row questionsRows">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
now i want to wrap divs in a row when my count of inner div's class is 12.
like this
<div class="row questionsRows">
<div class="row">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
<div class="row">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
</div>
Code i have tried :
function WrapRows() {
var RowComplete = 0;
var divs;
$('.questionsRows').children('.coulmnQuestions').each(function () {
debugger;
var classes = $(this).attr("class").split(" ");
var getFirstClass = classes[0];
var value = getFirstClass.slice(7);
RowComplete = RowComplete + value;
divs = $(this).add($(this).next());
if (RowComplete >= 12)
{
divs.wrapAll('<div class="row"></div>');
RowComplete = 0;
}
});
and its not giving desired result , its not adding first row .
<div class="row questionsRows">
<div class="col-md-4 coulmnQuestions"></div>
<div class="row">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
</div>
I got it:
var RowComplete = 0;
var divs;
$('.questionsRows').children('.coulmnQuestions').each(function () {
var classes = $(this).attr("class").split(" ");
var getFirstClass = classes[0];
var value = parseInt(getFirstClass.slice(7));
if(RowComplete==0) {
divs = $(this);
} else {
divs = divs.add($(this))
}
RowComplete = RowComplete + value;
console.log(RowComplete)
if (RowComplete >= 12)
{
console.log(divs)
divs.wrapAll('<div class="wrapper"></div>');
RowComplete = 0;
}
});
My guess is that in this line:
divs = $(this).add($(this).next());
you are catching the next tag of <div class="col-md-4 coulmnQuestions"></div>, and you should get the same tag, I mean <div class="col-md-4 coulmnQuestions"></div> tag. So I'd do:
divs = $(this).add($(this));
Anyway, if you add the code at http://jsfiddle.net it would be easier to see for us.

Categories