Develop Reference

show or hide button using jquery?

I have two button start and stop. on page load stop button hide and start button show.
when i click start button this button hide and stop button show.
i am using .hide() method.
Jquery Code:
$(window).load(function ()
{
$('#stop').hide();
});
It's working but issue is when page load this (stop button) will show for a second(like a blink) and then hide. i want to hide completely mean i don't want to show stop button when page load.

Hide it once only the button has loaded, not the whole window.
$("#stop").load(function() {
$(this).hide();
});
Otherwise you can always use CSS to hide it with display:none;

Maybe use CSS :
#stop { display: none; }

It is because you have used the load event handler, So till all the resources of the page is loaded the script is not executed.
One possible solution is to use a css rule, with the id selector to hide the element like
#stop{display: none;}

$(document).ready(function () {
$("#btnStop").click(function (e) {
e.preventDefault();
$(this).hide();
$("#btnPlay").show();
})
$("#btnPlay").click(function (e) {
e.preventDefault();
$(this).hide();
$("#btnStop").show();
})
})

Hiding a modal window without using close button

I have an image gallery. clicking on any image opens a modal window with the clicked in image.
I want to hide the modal window. i know how to do it by putting a close button. But i don't want to add any close button. what i am trying to do is whenever a user click anywhere other then following div gallery-image gallery-control-previous gallery-control-next the modal window should get hidden.
can anyone suggest me how to achieve this.
Here is my jsFiddle

Demo
Hide on clicking other than navigation keys
$('.gallery-overlay').click(function(event){
if($(event.target).hasClass('gallery-control') ==false){
$(this).hide();
}
});
Hide on clicking other than image and navigation keys
$('.gallery-overlay').click(function(event){
if($(event.target).hasClass('gallery-control') ==false && $(event.target).hasClass('gallery-image') == false){
$(this).hide();
}
});
you can use fadeout('slow') instead of hide for giving good effects

Here is the
jsFiddle..
add this to end of your jquery code.
$(".gallery-overlay").click(function(e) {
if($(e.target).hasClass("gallery-image") || $(e.target).hasClass("gallery-control-next") || $(e.target) .hasClass("gallery-control-previous")){/**/}
else {$(".gallery-overlay").fadeOut("2000");
}
});
e.target gives the actual clicked area, within .gallery-overlay. $(this) doesn't work.
You can slow down the rate of fading of modal window by increasing time. Here it is 2000, i.e.2 seconds.

Just add the following to your code:
$('.gallery-overlay').click(function() {
$(this).fadeOut('slow');
});
$('.gallery-image').click(function() {
return false;
});
You will also need to add return false at the end of your click handlers for .gallery-control-previous, .gallery-control-next and .gallery-image so that the event doesn't propagate to .gallery-overlay.
Updated fiddle.

Simply add a click event to fadeOut() the .gallery-overlay onclick.
View the JSFiddle for an example
Then for your .gallery-captionbox and .gallery-image, add a click event and return false on them.
// Hide the gallery on click
$('.gallery-overlay').click(function(){
$(this).fadeOut();
});
// Return false on click of the caption box or the image itself
$('.gallery-captionbox, .gallery-image').click(function(){
return false;
});
// All your other code below
View the JSFiddle

Try,
$(document).click(function(e) {
if( e.target.id != 'yourDivId') {
$("#yourDivId").hide();
}
});

Click anywhere in the page to close div

I have an overlay div that fades in when I click on a DOM element. I would like to be able to close it when I click anywhere on the page ( except the div itself) but it does not work..
Here is my code:
//Script for showing the DIV called overlay.
<script>
$(function() {
$('#loginfooter').click(function(){
$('#overlay').fadeIn(200,function(){
$('#box').animate({'top':'20px'},'slow');
});
return false;
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
//Script for hiding the div after clicking anywhere..
<script>
$(document).ready(function(){
$('#overlay').on('click',function(ev){
var myID = ev.target.id;
if(myID!=='overlay'){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
}
});
});
</script>

Just replace this:
$('#overlay').on('click', function (ev) {
with this
$(document).on('click', function (ev) {
and try again....
Actually, when you are clicking on the overlay element, the myID variable value is always == 'overlay'. Hence, it never goes inside the if statement.

DEMO 1
$(document).on('click',function(e){
if(!$(e.target).closest('#overlay').length)
$('#overlay').hide();
});
Other possibility without using any delegate event:
DEMO 2
$('#overlay').on('blur', function (e) {
$(this).hide();
});
Even you'll see most people using the first method, using the second one will avoid to have to use any delegate event which is better IMO. You just have to set focus on overlay when open it or when added to DOM, depending your specific case.

Would this work for you: jsfiddle?
I changed this:
if(myID!=='overlay'){
to this
if(myID=='overlay'){
so that you target the overlay instead of the box.

Back button is not working in the browser if multipage is done in jQuery

I am working on jQuery. I want to display 2 divs in a same page but only one div has to get displayed when its link is clicked. and is there any condition to make the second div hidden and displaying the first div and when the link for the second div is clicked from the first page the page must load with the second div.
I have achieved it through this code:
<script type="text/javascript">
$(function() {
$("#login").hide();
$("#loginp").click(function(event){
$("#login").show();
$(".container").hide();
event.preventDefault();
});
});
</script>
but when i use the above code: back button in the browser fail to work. Please help or suggestions. thanks in advance.

Use toggle function for this like,
$(function() {
$("#login").hide();
$("#loginp").click(function(event){
$("#login, .container").toggle();
event.preventDefault();
});
});

You have a missing closing tag for doc ready handler:
<script type="text/javascript">
$(function() {
$("#login").hide();
$("#loginp").click(function(event){
$("#login").show();
$(".container").hide();
event.preventDefault();
});
}); //<-----------this one try putting it.
</script>

Close a dialog in jQuery

I have a calendar in my page which have a more info button.
That button opens when clicked upon but do not close.
How can i close it?
Button:
$('a.cmoreinf').live('click', function() {
$('.ccontent').each(function() {
$(this).css('display','none');
});
$(this).closest('.calsingleentry').find('.ccontent').css('display','block');
return false;
});
Calendar Page

I don't have all the information needed to really answer this question but I believe you're wanting to have a modal appear on the first click, disappear on the second, appear on the third etc... basically toggling the display property. If so...
$('a.cmoreinf').on('click', function(e){
e.stopPropagation();
$('.ccontent').hide();
$(this).closest('.calsingleentry').find('.ccontent').toggle();
});
jQuery toggle()

The class ccontent is inside the div calsingleentry.
Use this:
$('a.cmoreinf').live('click', function() {
$('calsingleentry').find('.ccontent').each(function() {
$(this).css('display','none');
});
$(this).closest('.calsingleentry').find('.ccontent').css('display','block');
return false;
});