We Keep Coding

Javascript - When a button is clicked the CSS property toggle after second click

I am working on a simple Play and Pause button code with Javascript. The script is toggling the CSS property; however, after a delay. At the moment, the toggle happens on second click. Not sure what the issue is.
$(document).click(function () {
$("#startClock").click(function () {
$("#startClock").css("display", "none");
$("#stopClock").css("display", "block");
});
$("#stopClock").click(function () {
$("#stopClock").css("display", "none");
$("#startClock").css("display", "block");
});
});
#stopClock {
display: none;
}
#startClock {
display: block;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id=startClock >Start</button>
<button id=stopClock >Pause</button> <br/>

Instead of $(document).click go for $(document).ready
$(document).ready(function () {
$("#startClock").click(function () {
$("#startClock").css("display", "none");
$("#stopClock").css("display", "block");
});
$("#stopClock").click(function () {
$("#stopClock").css("display", "none");
$("#startClock").css("display", "block");
});
});
#stopClock {
display: none;
}
#startClock {
display: block;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id=startClock >Start</button>
<button id=stopClock >Pause</button> <br/>
It was happening because on first click which was getting listen by document; the click event handler were getting attached to your button. Hence needed 2 clicks for the CSS animation.

$(document).ready(function() {
$("#startClock").click(function() {
$("#startClock").css("display", "none");
$("#stopClock").css("display", "block");
});
$("#stopClock").click(function() {
$("#stopClock").css("display", "none");
$("#startClock").css("display", "block");
});
});
#stopClock {
display: none;
}
#startClock {
display: block;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id=startClock >Start</button>
<button id=stopClock >Pause</button> <br/>
Because at first you first time clicked it twice cause of click inside of click event. You clicked document and after clicked button.

what if you change
$(document).click(function() {
to
$(document).ready(function() {
I can't see the context but it looks like you have two nested click listeners.

Issue is you have wrapped code inside $(document).click It should be $(document).ready()
Sample
$(document).ready(function() {
$("#startClock").click(function() {
$("#startClock").css("display", "none");
$("#stopClock").css("display", "block");
});
$("#stopClock").click(function() {
$("#stopClock").css("display", "none");
$("#startClock").css("display", "block");
});
});
#stopClock {
display: none;
}
#startClock {
display: block;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id=startClock>Start</button>
<button id=stopClock>Pause</button>
<br/>
You should avoid using style attribute. Rather you should use class. If you switch to class approach, you can use, toggleClass or addClass/removeClass functions to update visibility.
Sample
$(document).ready(function() {
$("#startClock, #stopClock").click(function() {
$("#startClock").toggleClass("hide");
$("#stopClock").toggleClass("hide");
});
});
.hide{
display:none
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>
<button id="startClock">Start</button>
<button id="stopClock" class="hide">Pause</button>
<br/>

Try this one,
Using preventDefault you can do it.
$(document).ready(function () {
$("#startClock").click(function (e) {
e.preventDefault();
$("#startClock").css("display", "none");
$("#stopClock").css("display", "block");
});
$("#stopClock").click(function (e) {
e.preventDefault();
$("#stopClock").css("display", "none");
$("#startClock").css("display", "block");
});
});

Condition does not work

Here is my code:
HTML:
<div id="a">
aaa
</div>
<div id="b">
<button>hide aaa</button>
</div>
link
JS:
if($('#a:visible').length > 0) {
$('a').click(function() {
alert('a');
});
}
$('button').click(function () {
$('#a').hide();
});
http://jsfiddle.net/kgj4uw6f/
If I click "hide aaa" and then I click on the link, alert is shown. I don't want to show the alert when #a is hidden. How can I change my code?

It's inside-out. You have to check visibility when the click happens.
$('a').click(function() {
if ($('#a:visible').length > 0) {
alert('a');
}
});
$('button').click(function() {
$('#a').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a">
aaa
</div>
<div id="b">
<button>hide aaa</button>
</div>
link
JS:

I got it working changing your condition to inside the click event, like so:
$('a').click(function() {
if($('#a:visible').length > 0) {
alert('a');
}
});
$('button').click(function () {
$('#a').hide();
});
http://jsfiddle.net/kgj4uw6f/2/

Here's another way of doing it! You can check the visibility of an element using $(element).is(":visible").
$('a').click(function() {
if($('#a').is(":visible")) {
alert('a');
}
});
$('button').click(function () {
$('#a').hide();
});

when a div is showing do some thing for me and when its hidden stop that , with jquery its possible?

How i can write if #menu-drop display:block, add class to #header. else remove class from #header and follow other codes.
Thanks.
in CSS file #menu-drop {display:none}; and follow my jQuery codes it will show with slideDown event.
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document).on("click","#menu-oc",function() {
jQuery("#menu-drop").slideToggle("slow");
});
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 0) {
jQuery("#header").addClass("fixed");
jQuery("#header").addClass("goblack");
} else {
jQuery("#header").removeClass("fixed");
jQuery("#header").removeClass("goblack");
}
});
jQuery("#introcenter").animate({width: "0"},600,function (){
jQuery(".intro").animate({height : "0"},600,function () {
jQuery("#main").animate({opacity : "1"},500);
});
});
});
</script>
<body>
<div id="header">
<button id="menu-oc">HELLO</button>
</div>
<div id="menu-drop">
<div id="menu">
<jdoc:include type="modules" name="menu" style="html" />
</div>
</div>
<body>

change your JS code like this -
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 0 && (jQuery('#menu-drop').css('display') == 'none')) {
jQuery("#header").addClass("fixed");
jQuery("#header").addClass("goblack");
} else {
jQuery("#header").removeClass("fixed");
jQuery("#header").removeClass("goblack");
}
});
and then add inline style to your #menu-drop
display: none;
check this fiddle you will see the #menu-drop is displaying and the #header is not going border-color: black;
now check this fiddle, here you will see I have added an inline style display: none to #menu-drop and in this case the #header is going black!!

I think what you are looking for are jquery is-function and :visible-selector.
For example:
var $header = $("#header");
if ($("#menu-drop").is(":visible")) {
$header.addClass("myClass");
}
else
{
$header.removeClass("myClass");
}

How to hide a div when the user clicks body

I am using this code:
function check_remember(event) {
if (document.getElementById('rem_email').value == "") {
alert("Harap isi email !");
} else {
document.getElementById('popup_remember').style.display = "none";
event.preventDefault();
}
};
function remember_show() {
document.getElementById('popup_remember').style.display = "block";
};
and this my html :
<button type="button" class="btn-custom remember" onclick="remember_show()">Ingatkan Saya</button>
<!-- PopUp -->
<div id="popup_remember">
<div id="REM">
<form id="form_remember">
<input id="rem_email" name="email" placeholder="Input Email" type="text" class="form-control" required>
<input type="submit" id="sub_rem" value="Agree" onclick="check_remember(event)">
</form>
</div>
</div>
The problem is, i do not know how to when click body modal will hide..

I think this is what you looking for:
WORKING : DEMO
UPDATED DEMO
HTML
<h1> Just Random Header </h1>
<div class="div1"> Hello i am div :) <br /> <br />If you click anywhere then me i will disappear !</div>
CSS
.div1
{
width:310px;
height:100px;
background:#ddd;
}
JS
$(document).mouseup(function (e)
{
var container = $(".div1");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});

First get clicked target. Then check if the click event is out of popup div and if it is hidden already. Something like this should work:
$(function(){
$('body').on('click', function(){
var $this = $(arguments[0].target);
var $target = $('#popup_remember');
if( !$this.parents('#popup_remember').length && $this.attr('id') != "REM" && $target.is(':visible') ) $target.hide();
});
});
Check jsFiddle

You could try using jQuery instead of just Javascript.
$(document).ready(function(){
$('body').on('click', function(){
if($('#rem_email').val() === ''){
alert('Harap isi email !');
} else {
$('#popup_remember').hide()
}
}
//Let's add your remember_show function too! It's also an OnClick (As seen in the HTML).
$('btn-custom remember').on('click',function(){
$('popup_remember').show();
});
});
That's your javascript code converted to jQuery. :)
Instead of hide() and show(), you can also use fadeOut() and fadeIn() to animate the opacity of the object you are hiding and showing.

If your trying to make custom modal this may helps you. But this is only for the modal effect and your problem about clicking the body and it will close the modal. JS Fiddle Link
Hope it helps. Happy Coding.

you can use javascript too:
<button type="button" class="btn-custom remember" onclick="remember_show(event)">Ingatkan Saya</button>
Pass the event in the arguments of the calling function. Then you need to add event.stopPropagation(); to stop the event to bubble up in the DOM tree.
function check_remember(event) {
if (document.getElementById('rem_email').value == "") {
alert("Harap isi email !");
} else {
document.getElementById('popup_remember').style.display = "none";
event.preventDefault();
}
event.stopPropagation(); //<----add this to stop the event to bubble up.
};
function remember_show(event) {
document.getElementById('popup_remember').style.display = "block";
event.stopPropagation(); //<----add this to stop the event to bubble up.
};
Now add a event listener on the body like:
function hideModal(e){
document.getElementById('popup_remember').style.display = "none";
event.stopPropagation();
}
document.addEventListener('click', hideModal, false);
Sample Demo:
function check_remember(event) {
if (document.getElementById('rem_email').value == "") {
alert("Harap isi email !");
} else {
document.getElementById('popup_remember').style.display = "none";
event.preventDefault();
}
event.stopPropagation();
};
function remember_show(event) {
document.getElementById('popup_remember').style.display = "block";
event.stopPropagation();
};
function hideModal(e) {
document.getElementById('popup_remember').style.display = "none";
event.stopPropagation();
}
var body = document;
body.addEventListener('click', hideModal, false);
#popup_remember {
display: none;
}
<button type="button" class="btn-custom remember" onclick="remember_show(event)">Ingatkan Saya</button>
<!-- PopUp -->
<div id="popup_remember">
<div id="REM">
<form id="form_remember">
<input id="rem_email" name="email" placeholder="Input Email" type="text" class="form-control" required>
<input type="submit" id="sub_rem" value="Agree" onclick="check_remember(event)">
</form>
</div>
</div>

Triggering a jquery function

How can I trigger the following function for a specific DIV
$(document).ready(function() {
if($('div.trigger').length > 0) {
$('div.trigger').click(function() {
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).addClass('close');
$(this).next().slideDown(100);
return false;
} else {
$(this).removeClass('close');
$(this).addClass('open');
$(this).next().slideUp(100);
return false;
}
});
}
});
My html looks like this:
<div class="trigger open"><strong>Dropdown 1</strong></div>
<div class="cnt">
foo<br>
bar
</div>
<div class="trigger open"><strong>Dropdown 2</strong></div>
<div class="cnt">
baz<br>
boo
</div>
My solution was to this:
$(document).ready(function()
{
$('div.trigger:eq(<?=$_GET[exp];?>)').trigger('click');
});
Thanks for the help :)

$('div.trigger:eq(0)').trigger('click');//trigger click event of the Oth element
$('div.trigger:first').trigger('click');//trigger click event of first
$('div.trigger:last').trigger('click');//trigger the click of last one