jQuery to change image opacity onclick - javascript

I have a 'gallery' of images with a selection button below each. When I click on the button related to each image, I want the image opacity to change to 0.5. I'd rather do this without each image having an individual id. Warning: my jQuery knowledge is pretty average, I cant quite get my head around some of it!
<div>
Group 1<br>
<img src="http://www.example.com/myimage1.png" class="my-img" /><br>
<button class="mybutton">Click</button>
</div>
<br>
<div>
Group 2<br>
<img src="http://www.example.com/myimage2.png" class="my-img" /><br>
<button class="mybutton">Click</button>
</div>
So, with code like this, clicking any button will fade ALL images with that class, not just the related image
$('.mybutton').click(function(){
$('.my-img').css("opacity","0.5");
});
I thought about using something like .prev() but I don't think I have my head wrapped around it properly and am implementing wrong.
$('.mybutton').click(function(){
$(this).prev('.my-img').css("opacity","0.5");
});
Any thoughts on how to approach this?
https://jsfiddle.net/sanfly/gbkz566b/3/

The previous element to the button is a br. So in this case you have to go to the root that is the parent and find the child that is img and change it's opacity
$('.mybutton').click(function() {
$(this).parent().find('img.my-img').css("opacity", "0.5");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Group 1
<br>
<img src="http://i.stack.imgur.com/Hl3Y0.png" class="my-img" />
<br>
<button class="mybutton">
Click
</button>
</div>
<br>
<div>
Group 2
<br>
<img src="http://i.stack.imgur.com/Hl3Y0.png" class="my-img" />
<br>
<button class="mybutton">
Click
</button>
</div>

prev() only gets the immediately preceding sibling, and that is the <br> tag. Your selector is looking for an element with the class my-img. As the <br> tag does not have this class the query wouldn't return anything.
Since there's only one button and image per parent you could use siblings() instead.
$('.mybutton').click(function() {
$(this).siblings('.my-img').css("opacity", "0.5");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Group 1<br>
<img src="http://i.stack.imgur.com/Hl3Y0.png" class="my-img" /><br>
<button class="mybutton">
Click
</button>
</div>
<br>
<div>
Group 2<br>
<img src="http://i.stack.imgur.com/Hl3Y0.png" class="my-img" /><br>
<button class="mybutton">
Click
</button>
</div>

Related

Select interact to a specific html element with a button

I have a few buttons in the HTML file code with Bulma similar like this:
<a class="button" data-target="A">Section A</a>
<a class="button" data-target="B">Section B</a>
<a class="button" data-target="C">Section C</a>
And there are a few section like this which can interact with the buttons:
<div id="A" class="contentswitch">
<article class="message">
<div class="message-header" id="h1">
<p>Section A-1</p>
</div>
<div class="message-body">
Message 1 of section A
</div>
<div class="message-header">
<p>Section A-2</p>
</div>
<div class="message-body">
Message 2 of section A
</div>
</article>
</div>
As I add code like this in the JS, it can add a class called "is-hidden" to all the div ejectment which contains "contentswitch" class.
$("a.button").on("click", function(){
$("div.contentswitch").addClass("is-hidden");
});
What can I do if I want to remove the class ("is-hidden") from specific div element, like if I click the button of Section A, then it add "is-hidden" class to all the div element contain content switch then remove it from the div element with the id "A"?
Thank you so much
You can use data-target to connect the clicked button to the div you want to show. And hide the rest of them.
Also, use button iso a tag. a tag has a specific purpose in HTML and should be used only in combination with href attribute.
const buttons = $('.button');
const contentSwitchDivs = $('.contentswitch');
buttons.on("click", function(){
const btnTarget = $(this).data('target')
const contentToShow = $(`#${btnTarget}`)
contentSwitchDivs.not(btnTarget).hide();
contentToShow.show();
});
.contentswitch {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" data-target="A">Section A</button>
<button class="button" data-target="B">Section B</button>
<button class="button" data-target="C">Section C</button>
<div id="A" class="contentswitch">
A contentswitch
</div>
<div id="B" class="contentswitch">
B contentswitch
</div>
<div id="C" class="contentswitch">
C contentswitch
</div>

When clicking show image

Below is a jsfiddle file for reference.
Im trying to make it so that when you press a button (1,2,3,4) the image that relates shows on click and overlaps with images as you click more numbers. I tried ----
$('#showButton').click(function() {
$('#img3').show();
return false;
});
But it isn't working.
Is there a way to say when clicking this button show #img1
and when clicking another button #img2 overlaps that image
Thank you so much!
HTML
<h1>Question here</h1>
<button onclick="picture()">1</button>
<button onclick="picture()">2</button>
<button onclick="picture()">3</button>
<button onclick="picture()">4</button>
<button onclick="picture()">5</button>
</br>
</br>
</br>
<h1>Question here</h1>
<button onclick="picture()">1</button>
<button onclick="picture()">2</button>
<button onclick="picture()">3</button>
<button onclick="picture()">4</button>
<button onclick="picture()">5</button>
</br>
</br>
</br>
<!-- ////images -->
<img src="line-01.png" id='img1'>
<img src="line-02.png" id='img2'>
<img src="line-03.png" id='img3'>
<img src="line-04.png" id='img4'>
<img src="line-05.png" id='img5'>
<img src="line-06.png" id='img6'>
<img src="line-07.png" id='img7'>
<img src="line-08.png" id='img8'>
<img src="line-09.png" id='img9'>
css
img {/* display:none;*/
position:absolute;
width:200px;}
You could pass the number corresponding to the picture to show for that button in the onclick of that button:
<button onclick="picture(1)">1</button>
<button onclick="picture(2)">2</button>
<button onclick="picture(3)">3</button>
Then for your function:
function picture(n) {
$("#img"+n).show();
}
This is a naive way to approach this problem, but it will work for you. There are many other ways to solve this, but I think this is a good start for someone new to JS. This also may cause you some more bugs when you click a button that has already been clicked after clicking a different one, but I think you can solve that!

Making a div clickable and follow child anchor element

i am currently working on making a div clickable, and when clicked it has to follow a link. This is my HTML:
<div class="product">
<form method="post" action="/shop/basket.asp" name="myform260020" id="productlistBuyForm750" onsubmit="return BuyProduct(this,'1','0','False');">
<div class="image">
</div>
<div class="prodinfo">
/* Lots of text here */
<div class="listprodbuy">
<input class="BuyButton_ProductList" style="border:solid 0px black" src="/images/skins/Nordic%20Spring/images/add_basket.png" type="IMAGE"><br>
<input name="AMOUNT" size="3" maxlength="6" class="TextInputField_Productlist TextInputField_ProductList BuyButton_ProductList" value="1" type="TEXT">
</div>
</div>
</form>
</div>
The idea is that when i click the div element with the class "product", it will follow the link wrapped in the div with the class "image". But when clicking the div with the class "listprodbuy", it will not follow that link.
This is my Jquery so far:
$(".product").click(function(){
window.location = $(this).find("a").attr("href");
return false;
});
$("div.listprodbuy").click(function(e){
e.stopPropagation();
});
When the main div is clicked, absolutely nothing happens, i assume that it is because the Jquery does not accurately pinpoint the link, as it is not a direct child element of the div. How would i go about specifying exactly which element it should follow?
While i would love to just wrap the entire div in an anchor, it's not possible because my CMS (DanDomain) wont let me access and edit the above HTML.
Jsfiddle
window.location Should be set to absolute path instead of relative path. Since you are finding the href of anchor tag as $(this).find("a").attr("href"), It will give you the relative path. Just change html from to to get the absolute path.
Use e.preventDefault(); along with e.stopPropagation(); to avoid the postback.
Complete Code:
$(".product").click(function(){
window.location = $(this).find("a").attr("href");
return false;
});
$("div.listprodbuy").click(function(e){
e.preventDefault();
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<form method="post" action="/shop/basket.asp" name="myform260020" id="productlistBuyForm750" onsubmit="return BuyProduct(this,'1','0','False');">
<div class="image">
</div>
<div class="prodinfo">
/* Lots of text here */
<div class="listprodbuy">
<input class="BuyButton_ProductList" style="border:solid 0px black" src="/images/skins/Nordic%20Spring/images/add_basket.png" type="IMAGE"><br>
<input name="AMOUNT" size="3" maxlength="6" class="TextInputField_Productlist TextInputField_ProductList BuyButton_ProductList" value="1" type="TEXT">
</div>
</div>
</form>
</div>

How to make this area display: none?

I'm making a web application. First see this image:
Now, you can see the area outlined by yellow line. The list with white background is dynamic (It is displayed when something is typed in search bar). Now what I want is when I click anywhere out of this area (Search input field + List), the list should be display: none. I've tried a few things but for that I had to write a lot of code as I did this for different divs separately.
Also, I don't want to paste the whole code here as it is too long. So I'm just providing you HTML to get an idea of this picture.
<header>
<div id="headerdiv">
<div class="headerlogo"><img src="#" alt="Passwords"></div>
<div class="quit"><img src="#" alt="Quit"></div>
</div>
</header>
<div id="functions">
<div id="funcLeft">
<div id="addbuttonwrap"><input class="addbutton" type="button" value=" + ADD"></div>
<div class="heading1">Your saved passwords</div>
<input class="funcbutton" type="button" value="EMAIL">
<input class="funcbutton" type="button" value="CAREER">
<input class="funcbutton" type="button" value="SOCIAL">
<input class="funcbutton" type="button" value="OTHER">
</div>
<div id="funcRight">
<div id="search">
<form name="searchform" method="post" action="">
<input type="text" name="searchinput" placeholder="Enter any keyword">
</form>
</div>
<div class="heading1 heading2">GUIDELINES</div>
<div class="slides">
<!--CONTENT-->
</div>
</div>
</div>
<footer>
<div id="footer">
Copyright: Protected
</div>
</footer>
NOTE: While writing answer, you can assume any TAG Name/class/ID etc. for any element as code is not sufficient. I just want to know what to do.
You want to hide the search when someone clicks away, you can do this with Javascript with a onclick event.
var elementToHide = document.getElementById("searchElement");
window.onclick = function(e){
if(e.target != elementToHide){
elementToHide.style.display = "none";
}
}
This will hide the element contained in elementToHide (can be any element in the DOM) when the user clicks on an element which is not this one.
The variable e contains the click event of which we check the target element in the if
Hope it helps
$(document).on("click", function(e) {
if(e.target.className != "search_element"){
$("#element_list").hide();
}
});
you can try this.
i think you are looking for a js free solution (or easiest approach). I would personally recommend using + and :focus operator from css
.search-with-submenu{
.submenu{
display: none;
}
input[type=search]:focus + .submenu{
display: block;
}
}

Getting the Id attribute from an Image in a div

I have a div that contains 1 to many images with next and previous image buttons. When a user clicks the next/previous button the current image style is changed from display:block to display:none using jquery. I need to get the ID attribute from the current image that is showing ie. has the display:block style applied.
<div id="propPhotos" name="propPhotos">
<div id="propPhotsDivList">
<div id="imageNameId0" style="display:block">
<img src="/PropertyImages/1/171fc210b4584f41936a078c4176c7e0.jpg" height="200" width="200" id="3"/>
</div>
<div id="imageNameId1" style="display:none">
<img src="/PropertyImages/1/114810f0067749eda8049d2f8269dd00.jpg" height="200" width="200" id="4"/>
</div>
<div id="imageNameId2" style="display:none">
<img src="/PropertyImages/1/8.jpg" height="200" width="200" id="15"/>
</div>
<div id="imageNameId3" style="display:none">
<img src="/PropertyImages/1/e8f182ab645549b399cebc67ed996d151.jpg" height="200" width="200" id="25"/>
</div>
</div>
<div>
<div class="row">
<input type="button" id="NextImage" value="Next Image" onclick="ImageNext()" /><input type="button" id="PrevImage" value="Previous Image" onclick=" ImagePrev()" />
</div>
<div class="row">
<button type="button" class="AddImage">Add Image</button><button type="button" class="RemoveImage">Remove This Image</button>
</div>
</div>
This is the path I am currently on which is in the next and previous image click handlers.
CurrentImageId = document.getElementById("imageNameId" + id).children('img').attr('id');
So when the user clicks either button its supposed to assign the id value to the CurrentImageId. This does not work for one and does not help on the initial load when neither next or previous image buttons have been clicked.
Well, there are a few different ways as far as the initial load is concerned. Here are a couple of examples:
Using the :visible selector:
var currentImageId = $('#propPhotsDivList > div:visible > img').prop('id');
Or perhaps combined with filter():
var currentImageId = $('#propPhotsDivList img').filter(function(){
return $(this).parent('div').is(':visible');
}).prop('id');
If the divs are hidden and shown correclty using your click handlers, you can use the same functionality inside them as well.
$('#propPhotsDivList').children('div:not(:hidden)').attr('id');

Categories