Getting value from checkbox onchange event

Getting value from checkbox onchange event - javascript

I have a simple toggle checkbox feature that goes over product packages to select them. I created this in an input checkbox fashion to be able to capture the value. What I do not understand is how to capture the value for when only the checkbox is showing.
I know to capture the value I would do this:
$('#package2').val();
But how do I only get the value when it is 'activated'/'selected'. Then once it is selected and I have the value I am wanting to display it next to where it says 'Product Chosen'.
Also, you can see in the snippet or fiddle that when you click on both boxes and then click a box again to unselect it, that the "Proceed" goes away. Is there also a way to keep that showing for whenever any of the boxes are checked?
Here is a jsfiddle as well.
$('.calendar-check').on('change', function() {
if ($(this).prop('checked')) {
$(this).parents('.product-wrap:first').find('.checkmark-img').show('200');
$('#next1').show();
} else {
$(this).parents('.product-wrap:first').find('.checkmark-img').hide('200');
$('#next1').hide();
}
});
.package-img {
width: 60%;
height: auto;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.proceed-btn {
display: none;
transition:.5s; -webkit-transition:.5s;
}
.calendar-check {
display: none;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-container">
<div id="calendar-wrap" class="product-wrap">
<h2 class="product-titles">Package 1</h2>
<label for="package1" class="package-check-toggle">
<img src="images/calendar-package.png" alt="Package 1" class="package-img" id="calendar-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check" id="package1" value="Photo Gift">
</div>
</div>
<div class="right-container">
<div id="tp-wrap" class="product-wrap">
<h2 class="product-titles">Package 2</h2>
<label for="package2" class="package-check-toggle">
<img src="images/tp-package.png" alt="Package 2" class="package-img" id="tp-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check" id="package2" value="Touch Points">
</div>
</div>
Product chosen
<div class="proceed-btn" id="next1">PROCEED</div>

How about
jQuery.fn.fadeBoolToggle = function(bool){
return bool ? this.fadeIn(1000) : this.fadeOut(1000);
}
$(function() {
$('.calendar-check').on('click', function() {
$(this).parents('.product-wrap:first').find('.checkmark-img').toggle(this.checked);
// $('#next1').toggle($('.calendar-check:checked').length > 0);
$('#next1').fadeBoolToggle($('.calendar-check:checked').length > 0);
var prods = [];
$('.calendar-check:checked').each(function() { prods.push($(this).val()) });
$("#prods").html("Product"+
(prods.length==1?"":"s")+
" chosen: "+prods.join(", ")
);
});
});
.package-img {
width: 60%;
height: auto;
margin-left: 20%;
cursor: pointer;
transition: 1s;
-webkit-transition: 1s;
position: relative;
}
#calendar-wrap,
#tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.proceed-btn {
display: none;
//* transition: .5s;
-webkit-transition: .5s;*/
}
.calendar-check {
display: none;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-container">
<div id="calendar-wrap" class="product-wrap">
<h2 class="product-titles">Package 1</h2>
<label for="package1" class="package-check-toggle">
<img src="images/calendar-package.png" alt="Package 1" class="package-img" id="calendar-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check" id="package1" value="Photo Gift">
</div>
</div>
<div class="right-container">
<div id="tp-wrap" class="product-wrap">
<h2 class="product-titles">Package 2</h2>
<label for="package2" class="package-check-toggle">
<img src="images/tp-package.png" alt="Package 2" class="package-img" id="tp-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check" id="package2" value="Touch Points">
</div>
</div>
<div id="prods">Products chosen</div>
<div class="proceed-btn" id="next1">PROCEED</div>

Related

View the top part of the text when applying css: "overflow: hidden;"

I'm trying to create a timepicker, with the following elements:
Up buttons for the hour and time;
Two displays for next time, one for the next hour and the other for next minutes;
Two displays for current time, one for the current hour and the other for current minutes;
Two displays for the previous time, one for the previous hour and one for the previous minutes;
Down buttons for the hour and time.
I'm trying to create the idea of movement when you press any of the buttons.
This is the visual aspect I've achieved so far:
What I could not do:
To present the upper part of the numbers, on the previous time displays.
What am I doing wrong, and how can I fix it, using javascript, css, jquery and html?
To create the visual look of my timepicker, I used the following code:
$(document).ready(function() {
$("#th31").html("01");
$("#tm31").html("01");
$("#th3").html("00");
$("#tm3").html("00");
$("#th32").html("23");
$("#tm32").html("59");
} );
.modal-pop-up-time{
background-color: WhiteSmoke ;
cursor:pointer;
display:block;
width: 200px;
height: 150px;
position: absolute;
left: 52%;
z-index:10001;
}
.flex-container{
position: relative;
/* Other styling stuff */
width: 50px;
height: 25px;
background-color: #3498db;
}
.flex-container1{
position: relative;
display: inline-block;
/* Other styling stuff */
width: 50px;
height: 10px;
background-color: red;
}
.spinner {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.spinner-input-wrapper {
display: flex;
}
.spinner-input {
margin: 0 3px;
}
.inner-element{
position: absolute;
left: 50%;
top: 50%;
width: 80%;
height: 100%;
transform: translate(-50%,-50%);
/* or 3d alternative if you will add animations (smoother transitions) */
transform: translate3d(-50%,-50%,0);
}
.triangle-up,
.triangle-down {
width: 0;
height: 0;
border: 4px solid transparent;
}
.triangle-up {
border-bottom-width: 8px;
border-bottom-color: #555;
}
.triangle-down {
border-top-width: 8px;
border-top-color: #555;
}
.div-overflow-hide{
overflow: hidden;
}
.input-line-height{
line-height: 10% !important;
}
.input-text-center{
text-align: center !important;
}
.input-background-color{
background-color: DeepSkyBlue ;
}
.input-background-color-white{
background-color: white ;
}
.input-text-color{
color: White;
}
.div-center-element{
margin:auto;
}
.div-ml-40{
margin-left: 40% !important;
}
.div-mlr-5{
margin-right: 5% !important;
margin-left: 5% !important;
}
.div-ml-10{
margin-left: 10% !important;
}
.div-ml-5{
margin-left: 20% !important;
}
.div-tiangles-background-color{
background-color: yellow;
}
<link href="lib/noty.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div tabindex="-1" class = "modal-pop-up-time" id = "popupreg">
<div class="spinner-input-wrapper div-ml-10">
<div class="spinner div-mt-5">
<label class="div-ml-5">HH</label>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-up div-ml-40" id="up4"></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th31" ></div>
</div>
<div class= "flex-container " tabindex="2" >
<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "th3" ></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th32" ></div>
</div>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-down div-ml-40" id="down4"></div>
</div>
</div>
<div class= "spinner div-mt-5">
<label class="div-mlr-5" >:</label>
</div>
<div class="spinner divmarginhor div-mt-5" >
<label class="div-ml-5" >MM</label>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-up div-ml-40" id="up5"></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "tm31" ></div>
</div>
<div class= "flex-container" tabindex="2">
<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "tm3" ></div>
</div >
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height input-background-color-white inner-element div-overflow-hide" id = "tm32" ></div>
</div>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-down div-ml-40" id="down5"></div>
</div>
</div>
</div>
</div>

You can achieve what you want using some absolute positioning and line-height:
.timebox {
display: inline-block;
line-height: 2em;
height: 4em; /* only wants to be double the line-height */
overflow: hidden;
position: relative;
width: 2em; /* can be what you want */
}
.inner {
height: 6em; /* timebox line-height multiplied by 3 (number of numbers */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.number {
width: 2em;
text-align: center;
}
<div class="timebox">
<div class="inner">
<div class="number">
1
</div>
<div class="number">
2
</div>
<div class="number">
3
</div>
</div>
</div>
<div class="timebox">
<div class="inner">
<div class="number">
21
</div>
<div class="number">
22
</div>
<div class="number">
23
</div>
</div>
</div>

How can i filter a list of divs when 2 checkboxes are checked using jquery or javascript?

I have a list of 4 divs and i use 2 checkboxes to filter the list by the existence of specific divs. The filtering works perfect until i check both 2 checkboxes.
As you can see in my code below if you try to check both "Card" & "Paypal" checkboxes the list is disappeared. Instead i need to display all of 4 divs. How can i make it work this way?
Here's the code:
$("#by-card").change(function() {
$('.store-block .store-payment-options').each(function() {
if ($(this).find('.card-available').length === 0) {
$(this).parent(".store-block").toggleClass('hide-me');
}
});
});
$("#by-paypal").change(function() {
$('.store-block .store-payment-options').each(function() {
if ($(this).find('.paypal-available').length === 0) {
$(this).parent(".store-block").toggleClass('hide-me');
}
});
});
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes-area">
<div class=" inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class=" inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
</div>
<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

To get that behaviour you need to change the code which you have:
You need to have a single change function for the checkboxes of paypal and card
Then whenever any of the checkbox is checked/unchecked, you can loop both the checkboxes to know if any of them is checked. If you get the checkbox checked then show the elements with class store-block where I have also added one more class same as the id value of the checkbox that is clicked.
Using this class value it will be easy to determine the set of divs that belong to the particular checkbox.
You also need to manage the scenario when all the checkbox are unchecked after they were checked so, for that I have used a variable oneChecked.
$(".inputRadioGroup input[type='checkbox']").change(function() {
var oneChecked = false;
$(".inputRadioGroup input[type='checkbox']").each(function(){
var checked = this.checked;
var checkedId = $(this).attr('id');
if(checked){
oneChecked = true;
$('.'+checkedId).show();
} else {
$('.'+checkedId).hide();
}
});
if(!oneChecked){
$('.store-block').show();
}
});
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes-area">
<div class="inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class="inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
</div>
<div class="storesList">
<div class="store-block by-card">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block by-paypal">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block by-card">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block by-paypal">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

I'm not good at jQuery, but here's how I'd solve that using good old plain vanilla Javascript. The key change to your approach is to listen for the change event on a parent element of both checkboxes (instead of on each checkbox with a seperate handler), then check if either, or both, or no checkboxes are checked, and create the appropriate DOM state accordingly:
var checkboxArea = document.querySelector('.checkboxes-area')
var storeBlocks = Array.from(document.querySelectorAll('.store-block'))
var byCard = document.getElementById('by-card')
var byPaypal = document.getElementById('by-paypal')
var cardBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.card-available')
})
var payPalBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.paypal-available')
})
checkboxArea.addEventListener('change', function(e) {
switch (true) {
case byCard.checked && byPaypal.checked:
storeBlocks.forEach(function(block) { block.classList.remove('hide-me') })
break
case byCard.checked:
cardBlocks.forEach(function(block) { block.classList.remove('hide-me') })
payPalBlocks.forEach(function(block) { block.classList.add('hide-me') })
break
case byPaypal.checked:
cardBlocks.forEach(function(block) { block.classList.add('hide-me') })
payPalBlocks.forEach(function(block) { block.classList.remove('hide-me') })
break
default:
payPalBlocks.concat(cardBlocks).forEach(function(block) { block.classList.remove('hide-me') })
}
})
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<div class="checkboxes-area">
<div class="inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class="inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
</div>
<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

Add image below a certain class of element using css

What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example

You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}

I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>

Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>

Getting an image to appear over another div onclick with a toggle

I am trying to be able to click on a specific square and get a checkmark to appear over-top of it. I am going to want it to have a toggle effect, but I wanted to try to at least get the checkmark to show, which I am really having an issue getting it to even appear.
What am I doing wrong?
$('.package-img').click(function () {
//target.innerHTML = '<img src="images/checkmark-circle.png" class="checkmark-img total-center">';
$('.package-img').prepend('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 50%;
height: 50%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>

Use before method instead of prepend, otherwise your image is being added inside another image. Also use $(this).before... otherwise your checkmark will be added to all images with class package-img
$(this).before('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')
var $img = $('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img"/>').hide();
$('.package-img').before($img);
$('.package-img').click(function () {
$(this).prev().show();
});
$('.checkmark-img').click(function () {
$(this).hide();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 50%;
height: 100%;
z-index: 1;
position: absolute;
left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>

It is understood what you are looking for. Basically you can "toggle" the checkmark image over the checkmark square image when you click on the checkmark square. The problem with this is once you put the checkmark over the square the toggle doesnt work anymore. I have come up with a solution that should work a little better.
Basically if we take advantage of the rules that when a label is selected that is bound to a <input type="checkbox" /> this will toggle the checked property of the checkbox.
We can then bind to this event in jQuery and show\hide the checkmark. In this instance we dont bind any click events to the images, but the change event of the checkbox. Something like the example below.
Now the question is:
Why did i use a checkbox
Well by using a checkbox we can capture the result in our form posts. It also makes it easy to identify what is checked by enumerating all the check boxes that have the checked property.
To have this sent to your server you will need to add a name property to each checkbox and also set the value property.
$('.calendar-check').on('change', function() {
if ($(this).prop('checked'))
$(this).parents('.calendar-wrap:first').find('.checkmark-img').show();
else
$(this).parents('.calendar-wrap:first').find('.checkmark-img').hide();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition: 1s;
-webkit-transition: 1s;
position: relative;
}
#calendar-wrap,
#tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
display: none;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.calendar-check {
display: none;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap" class="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<label for="package-check-1" class="package-check-toggle">
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img" />
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 1" class="checkmark-img" />
</label>
<input type="checkbox" class="calendar-check" id="package-check-1" />
</div>
<div id="calendar-wrap" class="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<label for="package-check-2" class="package-check-toggle">
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="calendar-img" />
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 2" class="checkmark-img" />
</label>
<input type="checkbox" class="calendar-check" id="package-check-2" />
</div>
Sample JSFiddle
EDIT
For completness sakes I figured best to show a CSS (3) only solution. This has no depenedcies on using jQuery at all. Again this takes into consideration a checkbox (which is value based) and toggles the checkmark based on the toggle.
The Markup is quite simple.
<div class="calendar-checkmark">
<input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
<label for="checkbox-1"></label>
</div>
Example:
.calendar-checkmark input[type=checkbox] {
display: none;
}
.calendar-checkmark label {
cursor:pointer;
display: block;
height: 384px;
width: 354px;
position:relative;
background: url('http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif') no-repeat center center transparent;
}
.calendar-checkmark label::after {
content:' ';
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index:1;
display:none;
background: url('https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png') no-repeat center center transparent;
}
.calendar-checkmark input[type=checkbox]:checked + label::after {
display: block;
}
<div class="calendar-checkmark">
<input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
<label for="checkbox-1"></label>
</div>
The trick here is using Adjacent sibling selectors which allow you to select an adjacent sibling based of another element. So if we look at the css when the checkbox is checked it gets the Psudo-class :checked applied to it (similar to :hover etc). Then we use the adjacent + selector to locate the label.
Now the label element has a css background set to the image of the square box. Next it has the psudo-class ::after applied which creates our psudo-element that contains the checkbox. This is added after the element, when the checkbox is checked the psudo class :checked is addeed. This then changes the state of the psudo element by displaying the element.
Another Fiddle

This can be a lot simpler if we just remove the box images and create them via CSS. There will be less to download and we can then make the box's background transparent. This will allow us to just show and hide the checkmark that is already sitting behind each box.
$('.package-img').click(function () {
this.nextElementSibling.classList.toggle("hide");
});
parent { position:relative; }
.package-img {
border:3px solid black;
width: 110px;
height:110px;
background-color:rgba(0,0,0,0);
margin-left: 20%;
cursor: pointer;
position:relative;
display:inline-block;
}
.checkmark-img {
transition:1s;
width: 15%;
z-index: -1;
position:relative;
margin-left:-15%;
}
img.hide { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="product-titles">Package 1</h2>
<div class="parent">
<div class="package-img"></div>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide">
</div>
<h2 class="product-titles">Package 2</h2>
<div class="parent">
<div class="package-img"></div>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide">
</div>

1. absolutely position the Checkmark on top of the package image
2. Hide it
3. Use toggle to reveal it
since its hidden on top of it you will need to use the siblings selector to retrieve it
$('.checkmark-img').hide();
$('.package-img').click(function () {
$('.checkmark-img').toggle();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 25%;
margin-top:10%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: absolute;
width: 50%;
height: 50%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">'
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">'
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>

How to make the category and search input boxes resizable

.box {
margin: 10px auto;
width: 100%;
height: 50px;
}
.container {
width: 900px;
vertical-align: middle;
white-space: nowrap;
position: relative;
float: left;
}
input#cat,
input#search {
height: 50px;
border: 1 solid #2b303b;
font-size: 10pt;
float: left;
}
.box1 .container-1 input#cat {
width: 25%;
}
.box1 input#search {
width: 75%;
}
.box2 .container-1 input#cat {
width: 25%;
}
.box2 .container-2 input#cat {
width: 25%;
}
.box2 input#search {
width: 50%;
}
.box3 .container-1 input#cat {
width: 25%;
}
.box3 .container-2 input#cat {
width: 25%;
}
.box3 .container-3 input#cat {
width: 25%;
}
.box3 input#search {
width: 25%;
}
<div class="container">
<h2>Senario 1</h2>
<div class="box box1">
<div class="container-1">
<input type="cat" id="cat" placeholder="Parent Category (A)">
</div>
<div class="container-2">
<input type="search" id="search" placeholder="Search...">
</div>
</div>
<h2>Senario 2</h2>
<div class="box box2">
<div class="container-1">
<input type="cat" id="cat" placeholder="Parent Category (A)">
</div>
<div class="container-2">
<input type="cat" id="cat" placeholder="Sub-Category (B) of A">
</div>
<div class="container-3">
<input type="search" id="search" placeholder="Search...">
</div>
</div>
<h2>Senario 3</h2>
<div class="box box3">
<div class="container-1">
<input type="cat" id="cat" placeholder="Parent Category (A)">
</div>
<div class="container-2">
<input type="cat" id="cat" placeholder="Sub-Category (B) of A">
</div>
<div class="container-3">
<input type="cat" id="cat" placeholder="Sub-Category (C) of B">
</div>
<div class="container-4">
<input type="search" id="search" placeholder="Search...">
</div>
</div>
</div>
I customized the DJ Classifieds Advanced Search module in such a way that a category parent and its children are in-line with the search input box. I set the div of categories and search input static. Is there any way to make them resizable when adding children categories (see images).
Main Category + First Child Category + Second Child Category
The code can be summarized as follows:
HTML and CSS

You can probably use the jQuery UI resizable function, see this: https://jqueryui.com/resizable/.
$(function() {
$( "#resizable" ).resizable();
});
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Getting value from checkbox onchange event - javascript

Related

View the top part of the text when applying css: "overflow: hidden;"

How can i filter a list of divs when 2 checkboxes are checked using jquery or javascript?

Add image below a certain class of element using css

Getting an image to appear over another div onclick with a toggle

How to make the category and search input boxes resizable

Categories

Resources