Develop Reference

JavaScript Event propagation not working on Firefox on HTML Button child elements.

I am trying to pass JavaScript Function on HTML Button element and its Child elements, But child element function is not trigger on the Firefox.
Its working well on the Chrome and Safari.
Test here.
HTML Block:
<div class="container p-5">
<button onClick="sayButton();" class="btn btn-block btn-primary">
<span class="badge badge-light" onClick="sayDiv(event)">Hello</span>
</button>
</div>
JavaScript function:
function sayButton() {
alert("button");
}
function sayDiv(e) {
e.stopPropagation();
alert("div");
}
Say Div function is not working on the firefox.
Jsfiddle:
https://jsfiddle.net/jainvabhi/nmp2L7ma/3/
Code Pen:
https://codepen.io/jainvabhi/pen/VQNgZq

I am not sure if Firefox will let you do this with a button element as the parent. In my understanding, according to the Content Model for the button, you should not have interactive children. That being said, if you change the button to a div like following, it will work.
<div class="container p-5">
<div onClick="sayButton();" class="btn btn-block btn-primary">
<span class="badge badge-light" onClick="sayDiv(event)">Hello</span>
</div>
</div>
Fiddle Fork
If this is for a production application, please take into consideration potent accessibility considerations when using an element other than a button for this purpose.

Make a div always on top using JavaScript

I am working on a simple HTML/JavaScript project. In this I have a main div, in this div I have another div which is not visible initially.
<div>
<div class="warning" id="time-alert" style="visibility:hidden">
<span style="font-weight:bold">your time is up To extend the time click on
extend button.
<input type="button" id="extend-btn" onclick="clickaction()" value="Extend">
</div>
<div class="create pull-right">
<button id="btn-create" type="button" class="btn btn-primary"
onClick="openmodal()">open modal</button>
</div>
</div>
When user clicks on open modal button, a Bootstrap modal pops up. Now I am making that time-alert div visible continuously on 2 minutes interval by JavaScript. When I am on home page it's working fine but if model has already opened on the screen, the alert div is not showing above the modal. Can you please tell me how can I do this with JavaScript?

Try to put the HTML of your bootstrap modal before the "time alert" div. That way, the modal box should stay behind the time alert. You may want to add a z-index to the CSS of the time alert if need be.

Add an expandable text box to every post

So I am building a comment system and have loaded a bunch of comments to a page, then have generated a reply box for each. Below is what my reply box looks like, but there are many identical ones on each page. As you can see, the first portion is a div that contains a toggle (show/hide) for the reply box.
I am posting because I cannot get the reply toggle to fire.
Here is my html:
<div class="col-sm-offset-1 col-sm-11">
<a href="#" id="reply-toggle">
<span class="text">Reply</span>
<i class="toggle-icon fa fa-angle-down"></i>
</a>
</div>
<div id="reply-div" class="col-sm-12">
<form class="form-horizontal" role="form" accept-charset='UTF-8' data-parsley-validate novalidate>
<fieldset>
<div class="form-group">
<label for="ticket-message" class="col-sm-1 control-label"></label>
<div class="col-sm-11">
<textarea class="form-control" name="post-body" id="new_post_textarea" rows="5" cols="30" placeholder="Try to be as specific as possible when posting!"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button id="submit_reply_button" type="submit" class="btn btn-primary btn-block">Submit Reply</span></button>
</div>
</div>
</fieldset>
</form>
</div>
Here is my jquery:
$("#reply-toggle a").click(function() {
alert("running");
$('#reply-div').slideToggle("slow");
)};
I recognize I am not very good in jquery, so I am sure it's something simple, however, I also recognize that I will have to use jquery(closest) to only toggle the reply box associated with the proper comment thread. I have not gotten to this step yet, but it would be greatly appreciated If I could receive some guidance in regards to that as well.
Sincere thanks for any help!

$(document).on('click', '#reply-toggle', function() {
$(this).closest('.col-sm-offset-1').next('#reply-div').slideToggle('slow');
});
edit:added a period to the col-sm-offset-1 class

Your link selector does not match anything. $("#reply-toggle a") will return all <a> tags that have a parent with ID reply-toggle.
You should change this to simply $("#reply-toggle").
Edit: As an aside, you say you have multiple of these Reply buttons - I would strongly recommend you change the ID selector to a class selector as browsers expect only one element with a specific ID per page.

"#reply-toggle a" looks for <a> elements within an element that has id "reply-toggle". Maybe $("a#reply-toggle") would fix your firing issue?
You might want to generate a specific id for each reply toggle and div, say reply-toggle-1and reply-div-1. However, this approach needs a click()defined for each toggle. Use class declarations instead (i.e. not id="reply-toggle", but class="reply-toggle").

Show Different Html Forms by Clicking on Specific Links within One Page

i has file within my wordpress theme this file contains the signin, signup, lostpasswors and reset password forms with the required php codes. and in my header i have two buttons created by bootstrap codes us follow.
<div class="col-sm-3">
<div id="user-notlogged-in" class="pull-right btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-info"><a class="signin" href="<?php echo bloginfo('url') ?>/login"><?php _e('Sign In'); ?></a></button>
<button type="button" class="btn btn-default"><a class="signup" href="<?php echo bloginfo('url') ?>/login"><?php _e('Sign up'); ?></a></button>
</div>
</div>
and in my login-register.php file i have above forms like below
<div id="signin-form">
</div>
<div id="signup-form">
</div>
<div id="resetpass-form">
</div>
<div id="newpass-form">
</div>
this link below contains full code in my login-register.php file
login-register.php
my questions
i want when click on Sign In link only show me signin-form
i want when click on Sign Up link only show me signup-form
i want when i click on Lost Password? Link only show me resetpass-form
i want when send me reset password mail and i clcik on reset password link only show me newpass-form

What you're looking for is some simple jquery. Try something like...
onclick=$('#signin-form').show();

there is one Way i hope it will help You.
You can Use Jquery for Show And hide forms.
`http://jsfiddle.net/ffor00ps/3/`
Try it may be this will help to solve your problem

Ajax request dependent upon which button clicked

I was wondering if anyone could assist with the following. I have two buttons that when clicked need to render a different form, which I would like to achieve with Ajax
<!-- Animal Type -->
<div class="col-md-6 type-col" data-clicked-status="false">
<button class="btn btn-default btn-green btn-animal-type" id="dog_rehome_button" data-remote="true">Dog</button>
</div>
<div class="col-md-6 type-col" data-clicked-status="false">
<button class="btn btn-default btn-green btn-animal-type" id="cat_rehome_button" data-remote="true">Cat</button>
</div>
Im my view I have a div ready for the content to be loaded into, and have this setup
new.js.erb
$(".rehome_form").html("<%= escape_javascript(render('/animals/dog_rehome')) %>");
So at the moment when either button is clicked the dog_rehome form is rendered.
Ideally though I want to render a different form when clicking on the Cat button.
/animals/cat_rehome
How can I tell rails to render the corresponding form when its button is clicked

$('#cat_rehome_button').click(function() {
$(".rehome_form").html("<%= escape_javascript(render('/animals/cat_rehome')) %>");
});