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
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 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();
});
Why display = "none" not works when button is clicked in jsFiddle?
HTML:
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
JavaScript:
$('input[type=button]').click( function() {
document.getElementsByClassName("hidden").style.display = "none";
});
document.getElementsByClassName() returns HTMLCollection which is an Array like object. You are trying to apply HTML Node properties on this array.
First select DOM Node from this array then apply style properties as shown below.
document.getElementsByClassName("hidden")[0].style.display = "none";
$('input[type=button]').click( function() {
document.getElementsByClassName("hidden")[0].style.display = "none";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" value="test" />
Alternatively you can use jQuery to hide element.
$('input[type=button]').click(function() {
$(".hidden").first().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" value="test" />
In Pure JavaScript you can do it as follows:
var button = document.getElementsByClassName('button')[0];
button.addEventListener('click', function() {
document.getElementsByClassName("hidden")[0].style.display = "none";
}, false);
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input class="button" type="button" value="test" />
You could use jQuery to do it easily, you already had included it to your project, so it is no overhead. Simply use hide() to remove the element from view:
$('input[type=button]').click(function() {
$(".hidden").hide();
});
Working example.
The document.getElementsByClassName returns an array of classes.
chose the first element of the array.
$('input[type=button]').click( function() {
document.getElementsByClassName("hidden")[0].style.display = "none";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" id="test" value="test" />
Here is the updated jsFiddle
No need to mix jQuery and JavaScript, here is a JS method:
document.querySelector('input').onclick = function() {
document.querySelector('.hidden').style.display = "none";
}
The reason your getElementsByClassName wont work is because it's an array. You either need to loop through it and display:hide; all of them, or get a specific one by appending [n] after it (n being the number of the element you want in the array, starting at 0).
document.querySelector('input').onclick = function() {
document.querySelector('.hidden').style.display = "none";
}
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" value="test" />
Why using Native JS when you have jQuery used on page.
http://jsfiddle.net/ritesh14887/pUeue/3442/
$('input[type=button]').click( function() {
$(".hidden").css('display','none');
});
How can I make a div show/hide with a sub div like:
<div class="form-group" style="display:none;">
<div id="tabicon" style="display:none;">
<span>ICON</span>
</div>
<div id="tabimages" style="display:none;">
<span>IMAGES</span>
</div>
</div>
<div id="button_tab">
<input type="button" name="btnicon" value="icon">
<input type="button" name="btnimages" value="images">
</div>
So that when I click btnicon, the tab icon is opened/showing and
when I click btnimages, the tab images is opened/showing, with the tab icon hidden?
Do it with simple jquery by defining which div has to shown on which button click.
$('btnicon').on('click', function(){
$('#tabicon,.form-group').show();
});
$('btnicon').on('click', function(){
$('#tabimages,.form-group').show();
});
If you want to show this div and hide another div on button click use this
$('btnicon').on('click', function(){
$('#tabicon,.form-group').show();
$('#tabimages').hide();
});
$('btnicon').on('click', function(){
$('#tabimages,.form-group').show();
$('#tabicon').hide();
});
$('input[name=btnicon]').click(function(){//icon click
$('#tabicon').show()//show icon div
$('#tabimages').hide()//hide image div
}).click()//manually call click to show icon div on load
$('input[name=btnimages]').click(function(){//image click
$('#tabicon').hide()//hide icon div
$('#tabimages').show()//show image div
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div id="tabicon" style="display:none;">
<span>ICON</span>
</div>
<div id="tabimages" style="display:none;">
<span>IMAGES</span>
</div>
</div>
<div id="button_tab">
<input type="button" name="btnicon" value="icon">
<input type="button" name="btnimages" value="images">
</div>
Try this : You have to remove display:none from parent div as this will hide all its child elements. Create button handler and use .show() and .hide() methods as shown below -
HTML:
<div class="form-group">
<div id="tabicon" style="display:none;">
<span>ICON</span>
</div>
<div id="tabimages" style="display:none;">
<span>IMAGES</span>
</div>
</div>
<div id="button_tab">
<input type="button" name="btnicon" value="icon">
<input type="button" name="btnimages" value="images">
</div>
jQuery:
$(function(){
$('input[name="btnicon"]').click(function(){
$('#tabicon').show();
$('#tabimages').hide();
});
$('input[name="btnimages"]').click(function(){
$('#tabicon').hide();
$('#tabimages').show();
});
});
Instead of setting the "hidden" properties directly to the elements you are hiding/displaying you could set the properties through adding and removing classes to the parent container. "form-group".
.parent-class, #tabicon, #tabimage {
display: none;
}
.parent-class.icon-class, .parent-class.image-class {
display: block;
}
.parent-class.icon-class #tabicon{
display: block;
}
.parent-class.image-class #tabimage {
display: block;
}
This way when you add the class to the parent container you will show hide the parent container based on it having either of the childs active. The current child you have set to active will also be visible based on which classes are active in the parent container.
If none of the childs are active the parent container will be hidden.
I have created a script that when a button is clicked it displays all of the content beneath it and hides the other buttons content. The only problem I'm having is that I want to refactor the script so it only works if you hit the button, instead of the entire div the button sits in as it's causing some confusion. What would be the best way about this?
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
jQuery:
(function($) {
$(".signup-button").on('click', function() {
$(".signup-button").not(this).find(".signup-form").hide();
$(this).find(".signup-form").toggle("slow");
});
})(jQuery);
JSFiddle: https://jsfiddle.net/v6bmphct/3/
One option would be to attach the event listener directly to the descendant button element. In doing so, the click event isn't triggered when clicking on the other content. You would also have to change instances of $(this) to $(this).parent() or $(this).closest('.signup-button').
Updated Example
$(".signup-button .btn").on('click', function(e) {
$(this).parent().find(".signup-form").toggle("slow");
$(".signup-button").not($(this).parent()).find(".signup-form").hide();
});
Alternatively, since event.target is a reference to the clicked element, you could also just check to see if event.target is the button element by using the .is() method:
Updated Example
$(".signup-button").on('click', function(e) {
if ($(e.target).is('.btn')) {
$(this).find(".signup-form").toggle("slow");
$(".signup-button").not(this).find(".signup-form").hide();
}
});
Check this out:
(function($) {
$(".signup-button").find('button').on('click', function() {
$(this).siblings(".signup-form").toggle("slow");
$(".signup-button").not(this.closest(".signup-button")).find(".signup-form").hide();
});
})(jQuery);