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();
});
Related
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>
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;
}
}
<form id="jtable-edit-form" class="jtable-dialog-form jtable-edit-form">
<div class="jtable-input-field-container">
<div class="jtable-input-label">Type</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configType" type="text" name="configType">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Key</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configKey" type="text" name="configKey">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Value</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configValue" type="text" name="configValue">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Description</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-description" type="text" name="description">
</div>
</div>
I need to hide 1 div out of 4 div. I want to hide only div which has inner div as value 'Key'.
Please note that I am not allowed to changed HTML content. I can just write Jquery for it.
You can try this:
$( "div.jtable-input-label:contains('Key')" )
.closest( "div.jtable-input-field-container" )
.css( "display", "none" );
try this,
$("#jtable-edit-form .jtable-input-label:contains('Key')" ).parent().hide();
See this jsfiddle https://jsfiddle.net/cL4wsL3q/1/
Because IDs must be unique on document context, you should target specific parent element containing #Edit-configKey DIV instead:
$('#Edit-configKey').closest('.jtable-input-field-container').hide();
Try this code
$(document).ready(function(){
$( "div.jtable-input-label:contains('Key')" ).parent().hide();
});
Hope this will help you.
I have a method from where I need to remove the current div with it's element on clink. But it's not doing anything. I have searched goggle for it and applied various thing but no result. Can anyone please help me on this please?!!! Here are my code below ::
my div where my elements and remove link are stated >>>
<div class="col-xs-4 pNorPpl" id="pPeople">
<div class="form-group">
<label for="participatedPeopleName"><g:message code="sl" default="সদস্যের নাম" /></label>
<g:textField id="participatedPeopleName" name="participatedPeopleName" class="form-control"/>
<a onclick="addAnotherNormalPeople()">Add More</a> ||
<a onclick="removeThisMember()">Remove</a>
</div>
</div>
my remove function >>>
function removeThisMember(){
$(this).closest('.pNorPpl').remove();
}
The context of this does not carry through when you use on* attributes. Instead you need to pass it:
<a onclick="removeThisMember(this)">Remove</a>
function removeThisMember(el) {
$(el).closest('.pNorPpl').remove();
}
Or you can attach your event via jQuery:
Remove
$('.pNorPpl').on('click', '.remove-link', function(e) {
e.preventDefault();
$(this).closest('.pNotPpl').remove();
});
Try with this solution:
http://jsbin.com/tuniyucuki/1
HTML
<div class="col-xs-4 pNorPpl" id="pPeople">
<div class="form-group">
<label for="participatedPeopleName"><g:message code="sl" default="সদস্যের নাম" /></label>
<g:textField id="participatedPeopleName" name="participatedPeopleName" class="form-control"/>
<a onclick="addAnotherNormalPeople()">Add More</a> ||
<a class="removeFromHere" >Remove</a>
</div>
</div>
JAVASCRIPT
$(document).ready(function(){
$('.removeFromHere').click(function(){
$(this).closest('.pNorPpl').remove();
})
})
The contact_container div holds contact children, within these children is a checkbox. I use ajax to append these children to the container. Once I append the html and click a childs checkbox. The .click does not recognize the newly added checkboxes, Only the children work on page load. Below are working samples of my HTML and Jquery.
Can you offer a solution so that the appended checkboxes are picked up when they are clicked? Thanks
Here is my HTML markup:
<div id="contact_container">
<div class="contact">
<div class="contact_checkbox">
<div class="checkbox_container">
<div class="checkbox">
<input class="testing_checkbox" type="checkbox" name="contacts[]" value="bf6b0049059ec8998601f8fe20acb68ecafe2d44">
</div>
</div>
</div>
<div class="contact_info">
<div class="contact_image">
<img src="image.jpg" width="50" height="50" alt="Profile Picture">
</div>
<div class="contact_name"><span>Caroline Airey</span>
</div>
</div>
</div>
</div>
<div id="x_message" class="inputdata" style="overflow: hidden; display: none;">
<label>Message:</label>
<span><textarea name="x_message" placeholder="Enter a message to send to your contact(s)"></textarea></span>
<div class="clear"></div>
<button class="form_button">Add Contact to Network</button>
</div>
Here is my Jquery:
$( ".checkbox" ).click(function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
You will need the Parent reference to bind the element properly to jquery try this
$(parentObj).on("click",".checkbox",function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
The parentObj is the div or the html element you've appended the html code with ajax call
Use this jQuery method instead:
$(".checkbox").on("click", function()
{
// Your code here
});
This will grab clicks from elements that are dynamically added to your page after it initially loads :)