I want when click on the img using JS, it will be selected and others will blur out.
That what I'm expect :
Here the code for the HTML :
<section class="choice-grid">
<div data-choice-id="blepping" data-question-id="one">
<img src="images/blepdog.jpg"/>
<img class="checkbox" src="images/unchecked.png"/>
</div>
<div data-choice-id="happy" data-question-id="one">
<img src="./images/happydog.jpg"/>
<img class="checkbox" src="images/unchecked.png"/>
</div>
<div data-choice-id="sleeping" data-question-id="one">
<img src="./images/sleepingdog.jpg"/>
<img class="checkbox" src="images/unchecked.png"/>
</div>
<div data-choice-id="dopey" data-question-id="one">
<img src="./images/dopeydog.jpg"/>
<img class="checkbox" src="images/unchecked.png"/>
</div>
<div data-choice-id="burger" data-question-id="one">
<img src="./images/burgerdog.jpg"/>
<img class="checkbox" src="images/unchecked.png"/>
</div>
</section>
Im trying to use target event when click on the img. But I stuck right here and don't know how to change the attribute of that img tag in the target section.
Here what I'm stuck at :
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
var choice = document.querySelector('.choice-grid');
choice.onclick = function(event) {
var target = getEventTarget(event);
var test = target.attributes.src;
// test
// var test =target.lastChild.src
alert(test);
}
[data-question-id] label input {
display: none;
}
[data-question-id] label .photo {
opacity: .5;
}
[data-question-id] label input:checked ~ .photo {
opacity: 1;
}
[data-question-id] label input ~ .checked {
display: none;
}
[data-question-id] label input:checked ~ .checked {
display: inline;
}
[data-question-id] label input:checked ~ .unchecked {
display: none;
}
With basic CSS selectors you can toggle what is displayed and set the opacity of the image.
<div data-choice-id="blepping" data-question-id="one">
<label>
<input type="checkbox"/>
<img class="photo" src="http://placekitten.com/200/300"/>
<img class="checkbox checked" src="images/unchecked.png" alt="checked"/>
<img class="checkbox unchecked" src="images/checked.png" alt="unchecked"/>
</label>
</div>
Related
I have a page that contain different section these section appear when the user click on li an active class is added to the section and then this section appear
each section contain a box with checkboxes and a link to another page when i click on this link i should store the value of the checkboxes for the section active only to print them later
all the code work fine but my problem is that i only can have the checkbox value for the first section that contain active class by defaul
how can i solve that please?
/*Put active class on li click for section*/
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);
let section = document.querySelectorAll(".section");
let sectionArray = Array.from(section);
tabsArray.forEach((ele) => {
ele.addEventListener("click", function (e) {
tabsArray.forEach((ele) => {
ele.classList.remove("active");
});
e.currentTarget.classList.add("active");
sectionArray.forEach((sec) => {
sec.classList.remove("active");
});
document.querySelector('#' + e.currentTarget.dataset.cont).classList.add("active");
});
});
/*put the check box value in localstorage to print them later*/
let printBtn = document.querySelector(".active .btn-print");
let terms = document.querySelectorAll(".active input[type='checkbox']");
let termsValChecked = [];
let termsValUnChecked = [];
printBtn.addEventListener("click", function (e) {
localStorage.removeItem("termschecked");
localStorage.removeItem("termsunchecked");
for (let i = 0; i < terms.length; i++) {
if (terms[i].checked == true) {
termsValChecked.push(terms[i].value);
} else {
termsValUnChecked.push(terms[i].value);
}
}
window.localStorage.setItem("termschecked", JSON.stringify(termsValChecked));
window.localStorage.setItem("termsunchecked", JSON.stringify(termsValUnChecked));
});
.box {
display: flex;
align-items: center;
}
section {
display: none;
}
section.active {
display: block;
}
.nav {
list-style:none;
display: flex;
align-items: center;
}
.nav li {
padding: 20px;
background-color: #ccc;
margin-left: 2px;
cursor: pointer;
}
<ul class="nav">
<li data-cont="r1">1</li>
<li data-cont="r2">2</li>
<li data-cont="r3">3</li>
</ul>
<section class="section section-one active" id="r1">
<h3>Section 1</h3>
<div class="box">
<input type="checkbox" value="test1">
<p>test1</p>
</div>
<div class="box">
<input type="checkbox" value="test2">
<p>test2</p>
</div>
<div class="print">
Print
</div>
</section>
<section class="section section-two" id="r2">
<h3>Section 2</h3>
<div class="box">
<input type="checkbox" value="test3">
<p>test3</p>
</div>
<div class="box">
<input type="checkbox" value="test4">
<p>test4</p>
</div>
<div class="print">
Print
</div>
</section>
<section class="section section-three" id="r3">
<h3>Section 3</h3>
<div class="box">
<input type="checkbox" value="test5">
<p>test5</p>
</div>
<div class="box">
<input type="checkbox" value="test6">
<p>test6</p>
</div>
<div class="print">
Print
</div>
</section>
querySelectorAll returns a static NodeList, i.e. the list will reflect the state at invocation and won't update if the page later changes.
The following line runs when you initialize your page:
let terms = document.querySelectorAll(".active input[type='checkbox']");
And that's why you always capture the first section in local storage.
You need to move this line inside your click handler so that you enumerate the checkboxes inside the .active section at that time.
Remove the Attribute ".change" from your selector on line 23
simply change
let terms = document.querySelectorAll(".active input[type='checkbox']");
to
let terms = document.querySelectorAll("input[type='checkbox']");
for example, all images are hidden and when I click list, it should pop up. if I click "Hello1" text then image1 should popup
<li class nav-1>Hello1</li>
<li class nav-1>Hello2</li>
<li class nav-1>Hello3</li>
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>
I would add id's to your images and put in a basic hide/unhide script:
<script>
function toggleHide(elementid){
a=document.getElementById(elementid).style.visibility;
if (a=="hidden"){
document.getElementById(elementid).style.visibility="visible";
}else{
document.getElementById(elementid).style.visibility="hidden";
}
}
</script>
<style>
/* hide all images */
#img1{
visibility:hidden;
}
#img2{
visibility:hidden;
}
#img3{
visibility:hidden;
}
</style>
<li class nav-1>Hello1</li>
<li class nav-1>Hello2</li>
<li class nav-1>Hello3</li>
<img src="images/1.jpg" id="img1" alt=""/>
<img src="images/2.jpg" id="img2" alt=""/>
<img src="images/3.jpg" id="img3" alt=""/>
In the example below, I used div instead of img, but the concept is the same...
Read the comments for more details please:
// Get the buttons and the images
let buttons = document.querySelectorAll('.btn');
let images = document.querySelectorAll('.image');
// For each button:
buttons.forEach(btn => {
// Onclick event:
btn.addEventListener('click', () => {
// Get all the images and remove the 'active' class
images.forEach(image => { image.classList.remove('active'); });
// Get the id of the clicked button (which is the data-image of the target image)
let target = btn.getAttribute('id');
// Add the class 'active' to the image
document.querySelector(`[data-image="${target}"]`).classList.add('active');
});
});
.image {
width: 100px;
height: 100px;
border: 1px solid;
opacity: 0;
transition: all 0.2s;
display: none;
}
.image.active {
opacity: 1;
display: block;
}
<button class="btn" id="image1">Image 1</button>
<button class="btn" id="image2">Image 2</button>
<button class="btn" id="image3">Image 3</button>
<div class="image" data-image="image1">1</div>
<div class="image" data-image="image2">2</div>
<div class="image" data-image="image3">3</div>
I cannot edit the HTML part!
I must to hide the specific H2 tags if radio button "input#existing-company" is checked by default or selected later.
I put CSS as commented code, because I bet CSS pure solution is not possible in this scenario.
Please be kind, I'm not familiar with JavaScript and jQuery.
<script type="text/javascript">
$(document).ready(function() {
$('input#existing-company').click(function() {
if($(this).attr('id') == 'existing-company') {
$('#existing-company').show();
}
else {
$('#existing-company').hide();
}
});
});
</script>
/* CSS pure solution I bet is not possible
input#existing-company:checked ~ h2 {
display: none;
}
input#existing-company:checked + h2 {
display: none;
}
input#existing-company:checked > h2 {
display: none;
}
input#existing-company:checked+label ~ h2 {
display: none;
}
input#existing-company:checked+label + h2 {
display: none;
}
input#existing-company:checked+label > h2 {
display: none;
}
*/
<div class="one">
<div class="fieldset new-company"><input type="radio" name="company_submission" id="new-company" value="new_company" class="company-selection-radio" checked=""><label for="new-company">New Company</label></div>
<div class="fieldset existing-company"><input type="radio" name="company_submission" id="existing-company" value="existing_company" class="company-selection-radio"><label for="existing-company">Existing Company</label></div>
<h2 id="comp_desired_section">Desired section 1</h2>
<h2 id="comp_section_two">Desired section 2</h2>
<h2 id="comp_desired_three">Desired section 3</h2>
</div>
You can check whether the radio button is checked with the :checked pseudo class.
$('#existing-company').on('change', checkInput)
function checkInput(){
if($('#existing-company').is(':checked')) $('h2').hide()
}
checkInput() //if it is checked by default
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
<div class="fieldset new-company"><input type="radio" name="company_submission" id="new-company" value="new_company" class="company-selection-radio" checked=""><label for="new-company">New Company</label></div>
<div class="fieldset existing-company"><input type="radio" name="company_submission" id="existing-company" value="existing_company" class="company-selection-radio"><label for="existing-company">Existing Company</label></div>
<h2 id="comp_desired_section">Desired section 1</h2>
<h2 id="comp_section_two">Desired section 2</h2>
<h2 id="comp_desired_three">Desired section 3</h2>
</div>
Im trying to make a product page with gallery (clickable small thumbnails on the side) which opens a large image on the right side.
Jquery zoom only displays the zoom on the first image, when the other images are displayed the zoom is still on the first image.
Here is my code:
HTML
<section class="product-page">
<div class="thumbnails">
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></div>
</div>
<div class="img-display">
<span class='zoom' id='shoe1'>
<img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
</span>
<span class='zoom1' id='shoe1'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
</span>
<span class='zoom' id='shoe3'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
</span>
<span class='zoom' id='shoe4'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
</span>
<span class='zoom' id='shoe5'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
</span>
</div>
</section>
JS for image changing while clicking on the thumbnail images
var img = document.getElementById("img-area");
function right(){
img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
}
function left(){
img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
}
function bottom(){
img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
}
function pairSide(){
img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
}
function pairTop(){
img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
}
And the Jquery code
$(document).ready(function(){
$('#shoe1').zoom();
$('#shoe2').zoom();
$('#shoe3').zoom();
$('#shoe4').zoom();
$('#shoe5').zoom();
});
How to make the changed image zoom in on hover?
Thanks in advance.
Something as simple as this could be achievable without causing repetitive strain injury.
For obvious reasons I haven't considered image preloading, etc, but this is something I hope you can take inspiration from.
Your img-display should be treated as a canvas. Bind a single event handler to links wrapped around thumbs who's href attribute contains the larger image you want to load in the canvas area. This event handler simply rotates your thumbnails, but uses the larger image and passes that to both the canvas image and the jQuery zoom plugin API whilst toggling active states of thumbs (as an aesthetic suggestion).
Why href? As an example, screen readers still need to be able to follow these links. I'm thinking accessibility ftw.
Images courtesy of JD Sports.
$(function() {
$('.zoom').zoom();
$('.thumb').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
img {
display: block;
height: auto;
max-width: 100%;
}
.product-page {
display: flex;
}
.img-display {
flex-grow: 1;
max-width: 372px;
}
.thumb {
opacity: .7;
margin: 0 .25rem .25rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.thumb:hover,
.thumb.active {
opacity: 1;
}
.zoom {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<section class="product-page">
<div class="thumbnails">
<div class="thumb active">
<a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="img-display">
<span class="zoom">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
</span>
</div>
</section>
#perocvrc
Please try below code it works perfectly as per your requirement.
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
height: auto;
max-width: 100%;
}
.main-view-page {
display: flex;
}
.full-screen-img {
flex-grow: 1;
max-width: 500px;
}
.sideimg {
opacity: .7;
margin: 0 .1rem .1rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.sideimg:hover,
.sideimg.active {
opacity: 1;
width:135px;
}
.zoom-in {
display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(function() {
$('.zoom-in').zoom();
$('.sideimg').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom-in')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
</script>
</head>
<body>
<section class="main-view-page">
<div class="thumbnails">
<div class="sideimg">
<a href="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg">
<img src="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side">
</a>
</div>
<div class="sideimg active">
<a href="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side">
</a>
</div>
<div class="sideimg">
<a href="https://jooinn.com/images/cabin-with-beautiful-view.jpg">
<img src="https://jooinn.com/images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
<div class="sideimg">
<a href="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg">
<img src="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="full-screen-img">
<span class="zoom-in">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="main-view-images">
</span>
</div>
</section>
</body>
</html>
I hope above code will be useful for you.
Thank you.
I am stuck with this problem. There is a simple filter and it works not exactly the way I need it: http://jsfiddle.net/qyy810xx/
CSS here:
.categorya, .categoryb, .categoryrko {
width: 30px;
height: 20px;
line-height:20px;
text-align:center;
background: red;
margin: 10px;
float: left;
font-size:11px;
color:white;
font-family:sans-serif;
}
.categoryb {
background: blue;
}
.categorya.categoryb{
background:purple;
}
p.info{
padding:30px 20px 0 20px;
color:#666;
font-family:sans-serif;
font-size:13px;
}
HTML:
<ul id="filters">
<li>
<input type="checkbox" value="categorya" id="filter-categorya" />
<label for="filter-categorya">Category A</label>
</li>
<li>
<input type="checkbox" value="categoryb" id="filter-categoryb" />
<label for="filter-categoryb">Category B</label>
</li>
<li>
<input type="checkbox" value="categoryrko" id="filter-categoryrko" />
<label for="filter-categoryrko">RKO</label>
</li>
</ul>
<div class="categorya categoryb">A, B</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categoryrko">RKO</div>
<div class="categoryb categoryrko">BRko</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>
And script:
$("#filters :checkbox").click(function() {
var re = new RegExp($("#filters :checkbox:checked").map(function() {
return this.value;
}).get().join("|") );
$("div").each(function() {
var $this = $(this);
$this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
});
});
If select categoryB we can see ONLY divs with categoryB class, but i need to see all divs, including categoryB class.
e.g. if you select categoryA it must display [A,B] block, all [A] blocks and [RKOa] block, but if you select categoryA AND categoryRKO it must show ONLY [RKOa] block. i.e. only a block that satisfies all parameters.
I will be glad to any help
You need not make a regular expression, just formulate a selector using the same logic
$("#filters :checkbox").click(function() {
var selector = $("#filters :checkbox:checked").map(function() {
return "." + this.value;
}).get().join(",");
$("div").hide().filter(selector).show(); //now show only those which are matching the selector chosen above
});
I know what you're trying to do. But be honest your code was really hard for other to read. So I decided to come up with a better solution and easy for everyone to know what I'm trying to do when they're reading code.
The idea is: Every times you check a checkbox.
You map through all checkboxes and push the value of checked checkbox into an array.
Then hide all div
And finally loop through an array and show the checked one.
Here is modified code of your's. :) Hope it can give you a idea.
$(".filter-checkbox").click(function() {
var checkboxes = $('.filter-checkbox');
var checkedClasses = [];
//Map and get all checked category
var activeCheckboxes = checkboxes.each(function(index,checkbox){
if(checkbox.checked)
checkedClasses.push(checkbox.value);
});
//Hide all category
$('.category').hide();
//Show only checked
$.each(checkedClasses,function(index,className){
$('.' + className).show();
})
});
.categorya, .categoryb, .categoryrko {
width: 30px;
height: 20px;
line-height:20px;
text-align:center;
background: red;
margin: 10px;
float: left;
font-size:11px;
color:white;
font-family:sans-serif;
}
.categoryb {
background: blue;
}
.categorya.categoryb{
background:purple;
}
p.info{
padding:30px 20px 0 20px;
color:#666;
font-family:sans-serif;
font-size:13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters">
<li>
<input class="filter-checkbox" type="checkbox" value="categorya" id="filter-categorya" />
<label for="filter-categorya">Category A</label>
</li>
<li>
<input class="filter-checkbox" type="checkbox" value="categoryb" id="filter-categoryb" />
<label for="filter-categoryb">Category B</label>
</li>
<li>
<input class="filter-checkbox" type="checkbox" value="categoryrko" id="filter-categoryrko" />
<label for="filter-categoryrko">RKO</label>
</li>
</ul>
<div class="category categorya categoryb">A, B</div>
<div class="category categorya">A</div>
<div class="category categorya">A</div>
<div class="category categorya">A</div>
<div class="category categoryrko">RKO</div>
<div class="category categoryb">B</div>
<div class="category categoryb">B</div>
<div class="category categoryb">B</div>
<br />
<p class="info">
- If you select Category A: four boxes will apear [A,B] [A] [A] [A]
<br/><br/>
- Then if you select Category B and deselect it again: the purple box [A,B] will disapear because the script commands to hide 'B'.
<br/><br/>
- But I don't want the script to hide box 'B' when it also contains 'A'..
</p>