DEMO
I'am trying to select only 3 Items at a time, As of now all the elements are being selected. please guide
"If user want to select other element first user want to unselect the
selected Images.. "
JS :
var getTagsNameArray = [];
$('.q2 .product-multiple').on('click', function(e) {
var item = $(this).find('img').attr('name');
if ($(this).hasClass('selectTag')) {
$(this).removeClass('selectTag');
getTagsNameArray.splice(getTagsNameArray.indexOf(item), 1);
} else {
$(this).addClass('selectTag');
getTagsNameArray.push(item);
}
console.log(getTagsNameArray.join(', '));
});
$('.q2-get-answer').on('click', function() {
console.log(getTagsNameArray.join(', '));
})
As you are adding .selectTag to the selected element. Simply compare length of the elements having class as selectTag.
Edit: As suggested by Shady Alset, If count of selected elements is 3 user clicks on selected item,unselect is implemented.
var getTagsNameArray = [];
$('.q2 .product-multiple').on('click', function(e) {
if ($('.selectTag').length < 3) {
var item = $(this).find('img').attr('name');
if ($(this).hasClass('selectTag')) {
$(this).removeClass('selectTag');
getTagsNameArray.splice(getTagsNameArray.indexOf(item), 1);
} else {
$(this).addClass('selectTag');
getTagsNameArray.push(item);
}
console.log(getTagsNameArray.join(', '));
} else {
if ($(this).hasClass('selectTag')) {
$(this).removeClass('selectTag');
getTagsNameArray.splice(getTagsNameArray.indexOf(item), 1);
} else {
alert('3 items are already selected!')
}
}
});
$('.q2-get-answer').on('click', function() {
console.log(getTagsNameArray.join(', '));
})
.product-multiple {
float: left;
margin: 10px;
}
.product-multiple img {
width: 200px;
height: 150px;
}
.product-multiple img:hover {
cursor: pointer;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
cursor: pointer;
}
.digestive-tool {
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
}
.digestive-tool .q1-answer li,
.digestive-tool .q2-answer li,
.digestive-tool .q3-answer li,
.digestive-tool .q4-answer li,
.digestive-tool .q5-answer li,
.digestive-tool .q6-answer li {
list-style-type: none;
display: inline-block;
}
.digestive-tool .q1-get-answer,
.digestive-tool .q2-get-answer,
.digestive-tool .q3-get-answer,
.digestive-tool .q4-get-answer,
.digestive-tool .q5-get-answer,
.digestive-tool .q6-get-answer {
border: 1px solid #f00;
padding: 10px;
display: inline-block;
cursor: pointer;
}
.digestive-tool .product,
.digestive-tool .product-multiple {
display: inline-block;
}
.digestive-tool .product img,
.digestive-tool .product-multiple img {
width: 150px;
height: 180px;
cursor: pointer;
}
.selectTag {
border: 2px solid #00257a;
}
.q2-get-answer {
margin-top: 20px;
clear: left;
border: 1px solid #900;
background: #f00;
cursor: pointer;
width: 200px;
padding: 20px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="q2">
<label for="q2">how to keep a limit of only 3 selection values</label>
<div class="q2-answer" id="q2">
<div class="product-multiple">
<img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="gassy">
<div>Gassy</div>
</div>
<div class="product-multiple">
<img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="fussy">
<div>Fussy</div>
</div>
<div class="product-multiple">
<img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="diahrea">
<div>Diahrea</div>
</div>
<div class="product-multiple">
<img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="spitup">
<div>Spit Up</div>
</div>
<div class="product-multiple">
<img alt="doctor select" src="http://i.istockimg.com/file_thumbview_approve/45921804/5/stock-photo-45921804-lake-view.jpg" name="constipation">
<div>Constipation</div>
</div>
</div>
<div class="q2-get-answer">
Q3 click me
</div>
</div>
Fiddle here
You probably need to add below check before addClass.
else if ($('.selectTag').length < 3)
Complete code block.
if ($(this).hasClass('selectTag')) {
$(this).removeClass('selectTag');
getTagsNameArray.splice(getTagsNameArray.indexOf(item), 1);
} else if ($('.selectTag').length < 3) {
$(this).addClass('selectTag');
getTagsNameArray.push(item);
}
Related
I'm trying to make a toggle switch work, which will show/hide classes based on if it is checked or unchecked. By default i want to show "pay annually" so it will display the annual price, also a text blub further down the page. If i click "pay monthly" it will display the monthly price, and a monthly text blurb further down the page.
I tried to follow some solution, but at the moment all are showing, and nothing toggles. How can i fix this?
link to codepen
function showHide(e) {
const el = e.target;
if (el.checked) {
el.dataset.checked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'block');
el.dataset.notChecked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'none' );
} else {
el.dataset.checked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'none' );
el.dataset.notChecked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'block');
}
}
Using jQuery :
$(document).ready(function() {
var checkBoxes = $("input[name='toggle']");
toggle();
$("#toggle").click(function() {
toggle();
});
function toggle() {
if (checkBoxes.prop("checked")) {
$('#coreMonthlyText,#coreMonthlyPrice').show('slow');
$('#coreAnnuallyText,#coreAnnuallyPrice').hide('slow');
} else {
$('#coreMonthlyText,#coreMonthlyPrice').hide('slow');
$('#coreAnnuallyText,#coreAnnuallyPrice').show('slow');
}
}
});
.pricing-box {
background: red;
padding: 25px
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.toggle-switch {
cursor: pointer;
background-color: gray;
display: inline-block;
border: 0;
padding-left: 0;
padding-right: 0;
}
.toggle-switch input {
display: none;
}
.toggle-switch,
.toggle-switch span {
border-radius: 35px;
border-style: solid;
border-color: transparent;
padding-top: .75rem;
padding-bottom: .75rem;
}
.toggle-switch span {
border-width: 2px;
padding-left: .75rem;
padding-right: .75rem;
}
.toggle-switch input:checked+span+span,
.toggle-switch input+span {
border-color: #444;
background-color: white;
}
.toggle-switch input+span+span,
.toggle-switch input:checked+span {
background-color: transparent;
border-color: transparent;
}
#coreMonthlyText,
#coreMonthlyPrice,
#coreAnnuallyText,
#coreAnnuallyPrice {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-box">
<div class="row">
<div class="column">
<div class="core">
<h2>Core</h2>
</div>
</div>
<div class="column">
<div id="coreAnnuallyPrice" class="coreAnnuallyPrice">
$2,399/yr<br /> Normally $3,588/yr
</div>
<div id="coreMonthlyPrice" class="coreMonthlyPrice">
$299/pm<br /> first 2 months free
</div>
</div>
</div>
<label for="toggle" class="toggle-switch">
<input class="toggle-button" id="toggle" type="checkbox" name="toggle" data-checked="coreAnnuallyPrice,coreAnnuallyText" data-not-checked="coreMonthlyPrice,coreMonthlyText">
<span>pay annually</span>
<span>pay monthly</span>
</label>
</div>
<p id="coreAnnuallyText" class="center_text big-text coreAnnuallyText">this is a annual text blurb</p>
<p id="coreMonthlyText" class="center_text big-text coreMonthlyText">this is a monthly text blurb.</p>
I have a function that copies the data attribute and gives it an active class. I need to be able to clear the active class from .copy-btn when either .close1 or .close2 is clicked.
$(document).ready(function() {
$(".copy-btn").click(function(event) {
event.preventDefault();
});
});
var clip = new Clipboard(".copy-btn");
$(".copy-btn").click(function(e) {
$.each($(".copy-btn"), function(index, value) {
if (
$(value).attr("data-text") ==
$(e.target).attr("data-text")
) {
$(value).addClass("active");
}
});
});
.btn {
width: 50px;
height: 20px;
border: 2px solid;
cursor: pointer;
}
.copy-btn {
outline: none;
cursor: pointer;
border: none;
background-color: white;
font-size: 21px;
}
.active {
border-bottom: 3px dotted green;
padding-bottom: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="copy-btn" data-text="CODE1">CODE1</p>
<p class="copy-btn" data-text="CODE2">CODE2</p>
<p class="copy-btn" data-text="CODE3">CODE3</p>
<div class="btn close1">Close 1</div>
<div class="btn close2">Close 2</div>
Just using removeClass()
$('.close1, .close2').on('click', function() {
$('.copy-btn').removeClass('active');
})
I am trying to highlight a menu link on scroll, when the associated element comes into view. I saw this answer, and I'm trying to write it in pure JavaScript. The problem is, when I scroll down, the menu links randomly get the active` class.
What am I doing wrong, and how can I fix it?
JSFiddle
window.addEventListener('scroll', selectLink)
var sections = {
link1: document.getElementById('1'),
link2: document.getElementById('2'),
link3: document.getElementById('3'),
link4: document.getElementById('4'),
};
function selectLink() {
var prevTarget = document.querySelector('.active');
var docHeight = document.documentElement.clientHeight;
for (var sectionKey in sections) {
if (!sections.hasOwnProperty(sectionKey)) continue;
var sectionKeyRect = sections[sectionKey].getBoundingClientRect();
if ((window.pageYOffset || doc.scrollTop) >= sectionKeyRect.top) {
prevTarget.classList.remove('active');
document.querySelector('#' + sectionKey).classList.add('active');
}
}
}
* {
margin: 0;
padding: 0;
}
#main {
width: 75%;
float: right;
}
#main div.target {
background: #ccc;
height: 400px;
}
#main div.target:nth-child(even) {
background: #eee;
}
#nav {
width: 25%;
position: relative;
}
#nav nav {
position: fixed;
width: 25%;
}
#nav a {
border-bottom: 1px solid #666;
color: #333;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
}
#nav a:hover,
#nav a.active {
background: #666;
color: #fff;
}
<section id="main">
<div class="target" id="1">TARGET 1</div>
<div class="target" id="2">TARGET 2</div>
<div class="target" id="3">TARGET 3</div>
<div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
<nav>
<a id="link1" class="active">First</a>
<a id="link2">Second</a>
<a id="link3">Third</a>
<a id="link4">Fourth</a>
</nav>
</aside>
I wrote some code with three things in mind:
Highlighting a selection's border using 'on click'.
Selecting one item will remove the highlight from the other item.
The ability to deselect each item on click.
I've managed to get everything working for the most part, but I don't particularly like how complex the code is for the radial dot that appears when one item is selected.
Below is an example of what I'm talking about, particularly I'm looking for ways to refactor the code below into something a little more legible (shorter).
$(this).children('.radial').children().toggleClass('checked').parents('.itembox')
.siblings().children('.radial').children().removeClass('checked');
Here's a working example for more context (line 10):
var raceInternet = false;
var racePhone = false;
var raceTv = false;
$(function() {
var $targetDiv = $('#race-internet > .itembox');
var $radialDot = $('.radial > .center-dot');
$targetDiv.on('click', function() {
$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
//Is it possible to refactor Line 10?
$(this).children('.radial').children().toggleClass('checked').parents('.itembox').siblings().children('.radial').children().removeClass('checked');
if ($targetDiv.is('.user-selected')) {
raceInternet = true;
} else {
raceInternet = false;
}
})
})
.itembox-container {
display: flex;
}
.boxes-2 {
width: calc((100% - 25px)/2);
margin: 10px;
padding: 10px;
}
.itembox {
position: relative;
display: inline-block;
border: 5px solid #e8e8e8;
border-radius: 10px;
cursor: pointer;
}
.user-selected {
border: 5px solid #E16E5B;
}
.itembox h4 {
color: #22ddc0;
font-weight: 700;
}
span.price {
display: inline-block;
font-weight: 400;
float: right;
color: #22ddc0;
}
.itembox > ul {
list-style: none;
}
.itembox > ul > li {
line-height: 3;
}
.radial {
position: absolute;
float: right;
height: 35px;
width: 35px;
padding: 2px;
border: 5px solid #e8e8e8;
border-radius: 50%;
top: 43%;
right: 10px;
}
.center-dot {
display: none;
position: relative;
height: 21px;
width: 21px;
background-color: #E16E5B;
border-radius: 50%;
}
.checked {
display: block;
}
.prime-aux:first-of-type {
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<!-- Primary Content Container -->
<div class="prime-aux">
<div id="race-internet" class="itembox-container">
<div class="itembox boxes-2">
<h4>Gigabit Internet <span class="price">$60/mo</span></h4>
<ul>
<li>1,000 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
<div class="itembox boxes-2">
<h4>Basic Internet <span class="price">$25/mo</span></h4>
<ul>
<li>25 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Primary Content Container End -->
View on JS Fiddle
You can eliminate a lot of your jQuery by just leveraging CSS. Typically, if I want to toggle a feature, I have it either display: block; or display: none; based upon a CSS selector. Then, I just use jQuery to toggle the parent element's class name. So for example:
.item.selected .checkmark {
display: block;
}
.item .checkmark {
display: none;
}
$('.item').click(function(){ $(this).toggleClass('selected') });
JSFiddle
I have created a Div tables with display:table; but its not working ie7 or ie6.. And i don't want to use display-table.htc Hack for this...
I want to change
"<div class='divTable'> into <table class='divTable'>"
"<div class='divRow ieclear'> into <tr class='divRow ieclear'>"
"<div class='divCell'> into <td class='divCell'>"
Now I'm trying to convert 'Div' with 'Table' if browser.version == 7 || browser.version == 6... I'm new to Jquery..:D...
<div id="test">
<div class="divTable">
<div class="divRow ieclear">
<div class="divCell">Cell Wording1</div>
<div class="divCell">Cell Wording2</div>
<div class="divCell">Cell Wording3</div>
<div class="divCell">Cell Wording4</div>
</div>
</div>
</div>
CSS//----
.divTable {
font-family: Arial;
font-size: 12px;
display: table;
width: 981px;
border: 10px soild #ECECEC;
border-spacing: 0px;
overflow: hidden; /* border-collapse:separate;*/}
.divRow {
display: table-row;
*display: block;*
height: 100%;
width: 981px;
}
.divCell {
*float: left;*
display: inline-block;
display: table-cell;
width: 200px;
padding: 10px;
border-bottom: 1px solid #E9E9E4;
border-right: 1px solid #fff;
background: #F5F6F0;
}
.ieclear {
clear: both;
}
jQuery//
$(function () {
//alert($.browser.version);
jQuery("#test").find(".divTable").html('<table class="divTable">' + $(".divTable").html() + "</table>").html();
//or
$('div').replaceWith(function () {
return $("<table />", { html: $(this).html() });
});
});
Please suggest me or help me to solve this...:)
try to use:
position:relative;
display: table-cell /*IE9+ and other browsers*/;
display: block /*IE8 and lower*/;