We Keep Coding

jQuery to change image opacity onclick

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>

JQuery Click Function working for just one time

I'm trying to use jQuery click method to show and hide a part of my sections after clicking on a certain part of the page .
My HTML code:
<section class="apply_section text-center center-block" id="apply_section">
<div class="apply_container">
<div class="container">
<div class="row apply_row">
<div class="col-md-8 apply_form">
<form class="form" action="mail.php" method="POST">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" type="text" placeholder="" required="required" name="firstName">
</div>
<div class="col-md-6">
<form class="form">
<div class="form-group">
<textarea class="form-control" placeholder="" required="required" name="message"></textarea>
</div>
</form>
<input class="btn btn-success btn-block" type="submit" value=""></input>
</div>
</form>
</div>
<div class="col-md-4 apply_image">
<a><img src="images/icon.png" alt=""></a>
</div>
</div>
</div>
</div>
</section>
The jQuery script :
$('#apply_section .apply_image a').click(function(){
if($('#apply_section .apply_form').css('display','none')) {
$('#apply_section .apply_form').css('display','inline-block');
}else {$('#apply_section .apply_form').css('display','none');}
});
The problem is that the clicking method take the order just for one time, If I click on the image the form will appear, but after that if I need to hide it again and clicking the image doesn't work!

That's not how you check css property.
$('#apply_section .apply_image a').click(function() {
if ($('#apply_section .apply_form').css('display') == 'none') { // Here, check if display value is 'none'
$('#apply_section .apply_form').css('display', 'inline-block');
} else {
$('#apply_section .apply_form').css('display', 'none');
}
});

Another way using toggle:
$('#apply_section .apply_image a').click(function() {
var boolean = $('#apply_section .apply_form').css('display') == 'none';
$('#apply_section .apply_form').toggle(boolean)
});
According to Jquery toggle docs:
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

A better way to do something like that is using a toggle to a class:
CSS
.hide {
display:none;
}
jQuery
$('#apply_section .apply_image a').click(function(){
$('#apply_section .apply_form').toggleClass('hide');
});

Simplify your code using toggle():
$('#apply_section .apply_image a').click(function(){
$('#apply_section .apply_form').toggle();
});

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;
}
}

Disable(unclickable) background content in jQuery

i have a two div one is absolute position.
here is a code.
<input type="button" onclick="showdiv()" value="show" >
<div id="div2" style="display:none">
some content
name
<input type="button" value="click">
</div>
<div id="div1">
some content
name
<input type="button" value="click">
</div>
Here is jquery code .
function showdiv(){
$('#div1').fadeTo("slow",0.15);
$('#div2').show();
}
When I click on show button it fadeTo the div1 and show the div2. but problem is that div1 link and button also clickable and the link and button of div2 is not click able.
How can i disable background link.

$('#div1').unbind('click').click(function(e){
e.preventDefault();
});
Can be done if there are any onclick-listeners on the #div1directly.
In newer jquery versions you could do
$('#div1').off('click').click(function(e){
e.preventDefault();
});
But then again I would not recommend such a solution at all but would rather solve this by using a transparent div that lies above the #div1.
Example:
<div id="div1holder" style="position:relative">
<div id="div1">
</div>
<div id="div1blocker" style="display:none; position:absolute;top:0; left:0; background:transparent;">
</div>
</div>
Make #div1blockerbehave like #div1considering size and call $('#div1blocker').show() when you need to block it.
function showdiv() {
var div1 = $('#div1');
$('#div1blocker').show().width(div1.width()).height(div1.height());
$('#div2').show();
}
Of course, you can still use fading then:
function showdiv() {
var div1 = $('#div1');
$('#div1blocker').show().width(div1.width()).height(div1.height());
$('#div2').show();
div1.fadeTo("slow",0.15);
}

$('#div1 a').bind("click", function (e) {
e.preventDefault();
});
$('#div1 input').prop('disabled', false);
Apply css to show it as disabled.
fadeTo doesn't cause unbinding events. i have given you general solution.

The .fadeTo just changes the opacity of the element and children. There are other measures that need to be taken in order "disable" them.
HTML:
<input type="button" id="showdiv" value="show">
<div id="div1">some content name
<input type="button" value="click">
</div>
<div id="div2" style="display:none">some content name
<input type="button" value="click">
</div>
JS:
This will keep the <div> and content visible, but "disabled".
$("#showdiv").on("click", function () {
$('#div1').fadeTo("slow", 0.15, function () {
$('#div1').children().prop('disabled',true);
$('#div1 a').bind('click', false);
});
$('#div2').show();
});
JSFiddle

How to display div with JavaScript depending on which image is clicked

I wish to display certain divs inside a main div dependent on which image is clicked. With out any decent knoweldge of Js or Jquery, I fail to do this without some assistance.
<form>
<input type="hidden" name="prod">
<div id="images">
<img id="one" src="http://lorempixel.com/200/200/">
<img id="two" src="http://lorempixel.com/201/200/ ">
<img id="three" src="http://lorempixel.com/203/200/ ">
<img id="four" src="http://lorempixel.com/204/200/ ">
</div>
</form>
<div id="description">
</div>
<div class="one">Brilliant</div>
<div class="two">Super</div>
<div class="tree">Amazing</div>
<div class="four">Excellent</div>
If the image which has id="one" is clicked, then display <div class="one">Brilliant</div> inside of the description div. Then ofcause if the second image is clicked, then display the the 'super' div inside the description div. I'd like to not have the descriptions visible until clicked, and only one div at a time to be shown.
The images are apart of a form because I need to forward the value of the id on the images to a variable.
Here is the script that does that.
$('#images').delegate('img', 'click', function () {
var $this = $(this);
// Clear formatting
$('#images img').removeClass('border-highlight');
// Highlight with coloured border
$this.addClass('border-highlight');
// Changes the value of the form field prod to the file name shown in the image.
$('[name="prod"]').val($this.attr('id').substring($this.attr('id').lastIndexOf('-') + 1));
//Alert for debugging simplicity
alert($('[name="prod"]').val());
});
Perhaps a function can be implemented into the current script?
Here is a fiddle, and it will all make sense of what I have as a whole currently.

Check out this fidde
You just need to add:
$('#description').html($('.' + $this.attr('id')).html());
At the bottom of your onclick function.
** You have a typo on the 3rd div with text(tree instead of three).

You can make it bit simple by adding the divs for description in div as I see no need to put the divs for description outside the description div and later adding it. You will need to hide all the divs we have in description div and show the one that is related to img being clicked.
Live Demo
Html
<input type="hidden" name="prod">
<div id="images">
<img id="imgone" src="http://lorempixel.com/200/200" />
<img id="imgtwo" src="http://lorempixel.com/201/200" />
<img id="imgthree" src="http://lorempixel.com/203/200" />
<img id="imgfour" src="http://lorempixel.com/204/200" />
</div>
<div id="description">
<div id="one">Brilliant</div>
<div id="two">Super</div>
<div id="three">Amazing</div>
<div id="four">Excellent</div>
</div>
Javascript
$('#images').delegate('img', 'click', function () {
$('#description div').hide();
$('#' + this.id.replace('img', '')).show();
});