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/
Related
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
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();
});
}
Have something like:
<div id="Oobj51">
<script type='text/javascript'>
$(function() {
$('#Oobj51').hover(function() {
$("#Oobj58").show(500);
}),
$("#Oobj58").hover(function() {
//do nothing if hovered over
},
function(){
//hide on hover out
$("#Oobj58").hide(500);
});
});
</script>
<button type="submit" class="przed" onmouseover="this.className='po'" onmouseout="this.className='przed'"/>
</div>
Then I have 7 images like "Oobj51" and to each one of them there's a part of form in this case "Oobj58".
How to make the Oobj58 disaapear not when hover out but when hover on next img "Oobj52" where next part of form "Oobj59" should appear.??
First give every div the same class name:
<div class="Oobj" id="Oobj51">
Then use the id of the hovered div to define what to do next:
$(function() {
$('.Oobj').hover(function() {
var currentId = $(this).attr('id');
if(currentId == 'Oobj51') {
$("#Oobj58").show();
$("#Oobj59").hide();
} else if(currentId == 'Oobj52') {
$("#Oobj58").hide();
$("#Oobj59").show();
}
});
});
You could take a look at mouseenter event (doc http://api.jquery.com/mouseenter/)
$("#Oobj51").mouseenter(function()
{
$("#Oobj58").show();
})
$("#Oobj51").mouseleave(function()
{
$("#Oobj58").hide();
});
I have this code for hiding\showing link depends on state of cBoxoverlay. But when i click to close this item(display:none), and then click again to show it(display:block) my link(#close-news) still not showing.
jQuery(document).click(function () {
if (jQuery("#cBoxOverlay").css("display", "none")) {
jQuery("#close-news").css("display", "none");
} else if (jQuery("#cBoxOverlay").css("display", "block")) {
jQuery("#close-news").css("display", "block");
Where did i make mistake?
try this - no need for if statements. You can just set the #close-news to whatever #cBoxOverLay is
$(document).click(function () {
$("#close-news").css("display", $("#cBoxOverlay").css('display'));
}
Use classes, does a cleaner job.
In case you don't want to use classes, try to use jQuery's toggle, which does basically exactly what you try to achieve: http://api.jquery.com/toggle/
Use is(":visible") to check if the element is visible, and then either show or hide...
jQuery(document).click(function () {
if (jQuery("#cBoxOverlay").is(":visible")) {
jQuery("#close-news").hide();
} else {
jQuery("#close-news").show();
}
});
You can try:
if ($("#cBoxOverlay").css("display") == "none") {
// ...
}
however you can use is method:
if ( $("#cBoxOverlay").is(':hidden')) {
// ...
}
$(document).click(function(){
if ($("#cBoxOverlay").is(":hidden")) { // if #cBoxOverlay is hidden
$("#close-news").hide() // hide the #close-news
} else if ($("#cBoxOverlay").is(":visible")) { // if #cBoxOverlay is visible
$("#close-news").show() // // show the #close-news
}
})
you can remove the the second condition and use else instead as when element is not hidden it is visible, of course.
Try this, based on #Raminson's answer:
$(document).click(function () {
if ($("#cBoxOverlay").is(':hidden')) {
$("#close-news").css("display", "none");
} else{
$("#close-news").css("display", "block");
May be give a try on this one, too:
$(document).click(function(){
$('#close-news').css('display', function(){return $('#cBoxOverlay').css('display');});
});
I have below code:
<a href="#" id="#item.Id" name="vote" ><img src="/Content/images/021.png" style="float:left" alt="" /></a>
which invokes an ajax call. on the first call. if the return is true, on the second call I want to make an alert box saying you can do vote only once.
<script type="text/javascript">
$(function () {
$("div.slidera_button a").click(function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
this works, if i click on the button then refresh the page but it doesnt work, if i try to click twice.
I want to the user to be able to click multiple times and only after first one, they get a popup.
why this is not working?
how can i fix it?
EDIT: works in FF.. doesnt work in IE.
How about something like this:
<style type="text/css">
a.disabled {
opacity: 0.5;
/* whatever other styles you want */
}
</style>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$("div.slidera_button a").click(function (e) {
var item = $(this);
if (item.hasClass("disabled")) {
// alert when they vote
// you'll need to handle some way to add this
// server side to account for page reload, yes?
alert('You may only vote once');
}
$.get('#Url.Action("VoteAjax", "Home")'
, { id: item.attr("id") }
, function (response) {
// if this returns successfully, you voted.
item.addClass('disabled');
}
});
return false;
})
});
</script>
Use this script
<script type="text/javascript">
$(function () {
$("div.slidera_button a").live('click',function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
Or JQuery Delegate method to trigger this click