I have two <div> like these:
<div class='test' style='visibility: visible;'> div1 </div>
<div class='test'> div2 </div>
Now I want to show me an alert when I click on div1, because it has visibility property. In other word:
$(".test").click(function(e) {
if (this has visibility property){
alert('it has');
}
});
Now I want to know how can I define a condition in the above code using jquery?
Here is my try: (but none of them does not work)
if($(this).css('visibility').length != 0) {}
if($(this).css('visibility') == 'visible') {}
if($(this).hasClass('visibility-set')) {}
So, there is any solution?
Try this.style.visibility as it will return the value of inline-css or empty string '' if specified style does not exist!
$(".test").click(function(e) {
if (this.style.visibility) {
alert('It\'s set!');
} else {
alert('Not set!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='test' style='visibility: visible;'>div1</div>
<div class='test'>div2</div>
For the sake of completeness and because you asked for a jQuery way. Here a solution using the jQuery prop() function.
$(".test").click(function(e) {
if ($(this).prop('style')['visibility']) {
alert('It\'s set!');
} else {
alert('Not set!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='test' style='visibility: visible; display: block;'>div1</div>
<div class='test'>div2</div>
you can try this one:
$('.test').click( function() { alert('It\'s set!'); });
$('.test1').click( function() { alert('not set!'); });
DEMO FIDDLE
Related
Just for first click the img class rotate to 180deg and post class show, but i want for second click if rotate 180deg change to 0deg again and post class show.
Post class show is working but rotate just for first click work.
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
$(document).ready(function() {
$(".op-cl").click(function() {
$(".post").toggle("slow", function() {
if ($('.img').css('transform', 'rotate(0deg)')) {
$('.img').css('transform', 'rotate(180deg)');
} else if ($('.img').css('transform', 'rotate(180deg)')) {
$('.img').css('transform', 'rotate(0deg)');
}
});
});
});
$('.img').css('transform', 'rotate(0deg)') will always resolve to true because it returns the jQuery chaining for $(".img"). It sets the transform property and does not evaluate. See http://api.jquery.com/css/ for reference.
To fix this you could add a class to check if it is already rotated:
$(document).ready(function() {
$(".op-cl").click(function() {
$(".post").toggle("slow", function() {
if ($('.img').hasClass('rotated')) {
$('.img').css('transform', 'rotate(0)');
$('.img').removeClass('rotated')
} else {
$('.img').css('transform', 'rotate(180deg)');
$('.img').addClass('rotated');
}
});
});
});
IMO better to use toggle when you want to toggle between two values :
$(document).ready(function(){
$(".op-cl").click(function() {
$('.img').toggle(function () {
$("#user_button").css({transform: "rotate(0deg)"});
}, function () {
$("#user_button").css({transform: "rotate(180deg)"});
});
});
});
img{
width:200px;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='op-cl'>op-cl</button>
<br>
<img class='img' src='https://pbs.twimg.com/profile_images/604644048/sign051.gif' style='transform:rotate(0deg)'/>
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
$(document).ready(function() {
$(".op-cl").click(function() {
var click=1;
$(".post").toggle("slow", function() {
if (click % 2 !=0) {
$('.img').css('transform', 'rotate(180deg)');
} else if (click % 2 ==0) {
$('.img').css('transform', 'rotate(0deg)');
}
click++;
});
});
});
I am new to jQuery.
I am trying to make a switcher using a checkbox. At the moment I have gone this far
$(function() {
$('input.cbx').on('change', function() {
if ($(this).prop("checked", true)) {
$('body').addClass('dark');
} else if ($(this).prop("checked", false)) {
$('.body').addClass('light');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dn" type="checkbox" class="cbx hidden" />
<label for="dn" class="lbl"></label>
As you can see the checkbox stay checked after the first click, I imagine is a noob situation but, can you help me please?
You are actually setting the checked property instead of getting.
$('input.cbx').on('change', function() {
if($(this).prop("checked") == "true")
{
$('body').addClass('dark');
} else if($(this).prop("checked") == "false")
{
$('.body').addClass('light');
}
});
You can use this.checked or $(this).is(":checked") instead of $(this).prop("checked")
$('input.cbx').on('change', function() {
if(this.checked)
$('body').addClass('dark');
else
$('.body').addClass('light');
});
You can also use toggleClass
$('input.cbx').on('change', function() {
$('.body').toggleClass('light');
});
Note: I could not see any element with class body? You probably need to assign class to label. If you want to apply the toggle effect to body then remove dot
Live Demo
HTML
<body class="cbx">
<input id="dn" type="checkbox" class="cbx hidden"/>
<label for="dn" class="lbl">123</label>
</body>
Javascript
$('input.cbx').on('change', function() {
$('body').toggleClass('light');
});
$('input.cbx').on('change', function () {
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
DEMO
You can check if the checkbox is check using $(this).is(":checked")
I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.
Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});
In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design
Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}
I want to show a hidden div when the conditions are met as seen below.
<script>
jQuery.getJSON('http://freegeoip.net/json/', function(location) {
if (location.country_code == 'AU') {
jQuery.show(jQuery('#aus'));
}
});
</script>
<div id="aus" style="display:none;">
<div class="bottomBar">
This..
</div>
</div>
Firstly, you should wrap that in a document.ready, second you need to use this syntax for .show:
jQuery(function() { // Wait for DOM to be ready
jQuery.getJSON('http://freegeoip.net/json/', function(location) {
if (location.country_code == 'AU') {
jQuery('#aus').show(); // Correct syntax for show method
}
});
});
Try this:
jQuery.getJSON('http://freegeoip.net/json/', function(location) {
if (location.country_code == 'AU') {
jQuery("#aus").show();
}
});
Please go through this: http://api.jquery.com/show/
I have toggle faq.
When I click on " + " it toogle answer and show/hide it.
I want to make toggle if I click on " + " and also on title of question.
Question:
How to toggle answer with h3 element (title of question) and/or *+* button?
HTML:
<div class="box boxFaq clearfix">
<div class="boxTitle">
<h3>Question</h3>
</div>
<button class="clearfix">+</button>
<div style="clear: both;"></div>
<div class="boxContent clearfix toggle">
Answer answer answer
</div>
</div>
JS:
jQuery(document).ready(function() {
jQuery('button').click(function() {
jQuery(this).next().next('.toggle').slideToggle();
if (jQuery(this).text() === '+') {
jQuery(this).html('-');
}
else {
jQuery(this).html('+');
}
});
});
You can include multiple selectors by separating them with a ,. Then you just need to slightly amend the logic of the handler to work for both elements. Try this:
jQuery('.boxFaq button, .boxFaq h3').click(function() {
var $parent = jQuery(this).closest('.boxFaq');
var $btn = $parent.find('button')
$parent.find('.toggle').slideToggle();
$btn.text($btn.text() === '+' ? '-' : '+');
});
Example fiddle
Note also I amended the +/- logic to a simple ternary expression.
if (jQuery(this).text() === '+') {
$('h3').text('Answer'); //Change the text here
jQuery(this).html('-');
}
else {
jQuery(this).html('+');
$('h3').text('Question'); //Again here
}
Check this Fiddle
Modify you HTML code
<div class="boxContent clearfix toggle" style="display: none;">
Answer answer answer
</div>
Modify you jquery code
jQuery(document).ready(function() {
jQuery('button').click(function() {
jQuery(this).next().next().slideToggle();
if (jQuery(this).text() === '+') {
jQuery(this).html('-');
}
else {
jQuery(this).html('+');
}
});
});
Check this updated fiddle
add h3 to selector..and use parents() or closest()
jQuery(document).ready(function() {
jQuery('h3,button').click(function() {
var $parent=jQuery(this).parents('.boxFaq');
$parent.find('.toggle').slideToggle();
if ($parent.find('button').text() === '+') {
jQuery(this).html('-');
}
else{
jQuery(this).html('+');
}
});
});