We Keep Coding

jQuery hide and show effect seen at function end

Consider the following code:
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
$("button").on( 'click', function() {
$("#thediv").show();
alert('click');
});
$(document).ready(function(){
$("#thediv").hide();
})
I want the behavior to first show the div tag and then display the alert "Click". Instead the behavior works in the opposite way. Alert text is first displayed followed by the button being visible. Am i missing something ?
Can i modify the code somehow to get the desired behavior where the div is first displayed and then alert text is flashed.

Check that in jQuery.show(options) allows you to pass a PlainObject options.
And than you can use complete: A function that is called once the animation on an element is complete.
Code:
$("button").on( 'click', function() {
$("#thediv").show({
complete: function() {
alert('click');
}
});
});
$(document).ready(function(){
$("#thediv").hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:

It's because the alert() blocks the UI thread from updating, and that thread has not yet had time to show the element in the DOM before you call the alert().
Ideally you should use console.log() for debugging, however you can avoid this issue by putting the alert() in a setTimeout() with a very short delay.
$("button").on( 'click', function() {
$("#thediv").show();
setTimeout(function() {
alert('click');
}, 10);
});
#thediv { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:

$("button").on('click', function() {
$("#thediv").show("slow", callback);
});
$(document).ready(function() {
$("#thediv").hide();
})
function callback() {
alert('click');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv">hola</div>
<button id="resharper">button</button>
Add parameter to .show()

Making div invisible and visible using toggle in jQuery

I have a div where when you click it, it's suppose to turn invisible, and when you click on it again, it's suppose to turn visible. But something's wrong with my code. Please take a look:
<div id = "id"> Hello </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
//*****************************************************************************
function toggleOnClick($id){
$("#"+$id).click(function() {
$("#"+$id).toggle(
function () {
$(this).css({visibility: "hidden"});
},
function () {
$(this).css({visibility: "visible"});
}); //end of $("#"+$id).toggle
}); //end of $("#"+$id).click(function()
} //end of function toggleOnclick($id)
//*****************************************************************************
$(document).ready(function(){
toggleOnClick("id");
});
</script>
P.S: Got my source from the accepted answer in this link: jQuery toggle CSS?

tggle() will toggle between display property so it will not retain place for element after it hides, You need to use css() with callback and update its opacity, it will retain it's place.
Update : The click event will not fire on element with visibility: hidden so you need to use opacity:0
Callback in css() is a function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments. ( Taken from http://api.jquery.com/css/#css-propertyName-function )
<div id="id">Hello</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
//*****************************************************************************
function toggleOnClick($id) {
$("#" + $id).click(function() {
$("#" + $id).css('opacity', function(i, v) {
return v == 0 ? 1 : 0; //end of $("#"+$id).toggle
});
}); //end of $("#"+$id).click(function()
} //end of function toggleOnclick($id)
//*****************************************************************************
$(document).ready(function() {
toggleOnClick("id");
});
</script>

Show and hide a div in jquery

I'm facing an issue, issue is I've a product page where image thumbnails are appearing,
i want when user hover or mouseenter on any thumnail the associated 'add to cart' button should appear, current when i mouseenter on any product all 'add to cart' buttons are appearing,
link is: http://etekstudio.org/demo/crateen/en/men
cod is:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
jQuery(target).mouseenter(function(){
jQuery('.popUpPrice button ').show();
});
});

I'd go with something like this:
jQuery(document).ready(function(){
jQuery(".product-image").hover(function(){
jQuery(this).find(".popupPrice button").show();
}, function() {
jQuery(this).find(".popupPrice button").hide();
});
});
That way it hides it on mouse exit as well.

Try to use:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});
Also target is already a jQuery object. You can just use target.mouseenter instead of jQuery(target).mouseenter

Try this:
jQuery(".product-image").mouseenter(function(){
jQuery('.popUpPrice button').show();
});
use hover in jquery
jQuery(".product-image").hover(
function() {
jQuery('.popUpPrice button ').show();
}, function() {
jQuery('.popUpPrice button ').hide();
}
);

try this :
jQuery(document).ready(function(){
jQuery('.product-image').hover(function(){
jQuery(this).next('.popUpPrice').find('button').show();
},function(){
jQuery(this).next('.popUpPrice').find('button').hide();
});
});

Try it.
And you also don't have need to create new object with the name target.You an do directly with this way also.
jQuery(document).ready(function(){
jQuery('.product-image').mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});

You can try this:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.each (function () {
jQuery(this).mouseenter(function(){
jQuery(this).find('.popUpPrice button').show()
});
});
});

inside the function
you are selecting all elements with '.popUpPrice button', you must find the correct button to show.
in this html structure, for instance:
<div class="product">
<div class="product-image><img src="" /></div>
<div class="popUpPrice"><button>Add to cart</button></div>
</div>
all you have to do is:
jQuery('.product-image').mouseenter(function(evt) {
var target = jQuery(evt.currentTarget);
target.parent().find('.popUpPrice button').show();
});
evt.currentTarget is the element which triggered the event. In this case will always be .product-image

Try this
$('.product-image').hover(function(){
$(this).next('.popUpPrice').find('.disc button').show();
},function(){
$(this).next('.popUpPrice').find('.disc button').hide();
});
DEMO

It works using div on body. It doesn't using get

Status: WORKING
Runs smoothly - click works
Jquery
$("document").ready(function(){
$("#test").click(function(){
alert("abc");
});
});
CSS
.blue {
background-color:blue;
}
Tag Body
<body>
<div class="blue" id="test">Testing code</div>
</body>
Status: NOT WORKING
Succeeds to add the file and div test within it but click doesn't work
Jquery
$("document").ready(function(){
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
});
$("#test").click(function(){
alert("abc");
});
});
CSS
.blue {
background-color:blue;
}
Tag Body
<body>
</body>
Does anybody know how to do that?

The method get is asynchronous which means that the stream will continue while the ajax request is still running, the best solution is to put the click handler into the get callback.
$("document").ready(function(){
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
$("#test").click(function(){
alert("abc");
});
});
});

You should delegate the event, from one of static parents of the element or document object.
$(document).on("click", "#test", function(){
alert("abc");
})

use delegate or on(recommend)
$(function() {
$('body').on('click', '#test', function() { alert('abc'); });
// or
// $('body').delegate('#test', function() { alert('abc'); });
});

problem is the the click function is called before the div with #test is appended...
call click function after the div is appended.. so that it gets that id... and the event
try this
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
$("#test").click(function(){
alert("abc");
});
});
OR
the on function with selector as document..(i alway prefer to go with this)
$(document).on("click", "#test", function(){
alert("abc");
})

jQuery Hide Toggeled Div On Document.click

I currently have the following code:
$(function(){
$('#btn_signIn').click(function(){
$('#div_signInBox').toggle("fast");
});
});
I need to hide the div_signInBox toggled div anytime any other part of the window is clicked...
Thanks!

Is this what you want?
$(function() {
$('#div_signInBox,html').click(function() {
if ($(this).is('#div_signInBox'))
return false;
$('#div_signInBox').toggle("fast");
});
});