We Keep Coding

Dynamically add HTML items to the right of previous item instead of below

I'm sure this is an amateur question, but I am having difficulty figuring out how to dynamically add html items to the right(same horizontal level) inside of my div. When I add a new Label it adds below the previous label I added. How do I place the new Label to the right of the previous label I added to my webpage?
My javascript:
<script>
$(document).ready(function(){
$("#comp").click(function (e){
event.preventDefault()
$('#items').append('<label>My Label</label>+
'<input>'+
'<br>'+
'<label>Second Label</label>');
});
});
</script>
My html:
<div id = "items">
</div>
<input type="button", name = "comp" value = "Compare" id="comp"></input>

I had to alter your HTML to be standard to demonstrate, but the answer is use display:inline-block as a style on the added label
$("#comp").click(function(e) {
event.preventDefault()
const item = '<label>My Label</label> <input> <br> <label>Second Label</label>';
$('#items').append('<div class="newitem">' + item + ' </div>');
});
#items .newitem {
display: inline-block;
padding: 3px;
margin: 0 3px 3px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
#items .newitem input {
width: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="items">
</div>
<input type="button" name="comp" value="Compare" id="comp" />

You need to change the styling to inline. Either change from a div to a span or, add change the div to <div style="display: inline"></div>

Add a display of flex to #items, then you can add margin on label or gap on #items. With flex you can also control justify-content prop as well...
$(document).ready(function() {
$("#comp").click(function(e) {
event.preventDefault()
$('#items').append('<label>My Label</label>');
});
});
#items {
display: flex;
justify-content: start;
/* gap: 1rem; <-- alternative */
}
label {
margin-right: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="items">
</div>
<input type="button" , name="comp" value="Compare" id="comp">

something like confirm("Are U sure?") JavaScript

I use
string js = #" return confirm('Are you sure you want to do this?');";
myAspButton.OnClientClick = js;
event rises after "OK" clicking and nothing happen after "Cancel"
I want to create my custom modal, but server event fired before any button click!
how to implement my own function like confirm(Are you sure you want to do this?') which returns value after button click?
my code:
string js = #"dialog('Are you sure you want to do this?',
function() {
return true;
},
function() {
return false;
}
);";
myAspButton.OnClientClick = js;
JS code:
function dialog(message, yesCallback, noCallback) {
$('.title').html(message);
var dialog = $('#modal_dialog').dialog();
$('#btnYes').click(function() {
dialog.dialog('close');
yesCallback();
});
$('#btnNo').click(function() {
dialog.dialog('close');
noCallback();
});
}
HTML code:
<div id='modal_dialog'>
<div class='title'>
</div>
<input type='button' value='yes' id='btnYes' />
<input type='button' value='no' id='btnNo' />

There's some modifications to make on your code...
You cannot bind a click event many times on the same element or it will trigger many times, so first you need to remove the bind to add it again with another callback.
Also, you can make an "overlay", that covers the entire page until some button is clicked. See the css part to take a look on what I did.
See the example below and check if this it's something you need.
$("#dialogBtn").on("click", dialog.bind(this, 'Are you Sure?', yesCallback, noCallback));
function dialog(message, yesCallback, noCallback) {
var modal = $("#modal_dialog");
modal.show();
$('.title').html(message);
$('#dialogBtnYes').off("click").on("click", function() {
modal.hide()
yesCallback.call();
});
$('#dialogBtnNo').off("click").on("click", function() {
modal.hide()
noCallback.call();
});
}
function yesCallback(){
console.log("YES");
}
function noCallback(){
console.log("NO");
}
#modal_dialog{
display: none;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0, 0.1);
z-index: 1000;
position: absolute;
top: 0;
left: 0;
}
#modal-content{
padding: 12px;
border: 1px solid;
box-shadow: 1px 1px 3px black;
background-color: #fff;
margin: auto;
position: relative;
width: 50%;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Dialog' id="dialogBtn"/>
<div id='modal_dialog'>
<div id="modal-content">
<div class='title'></div>
<input type='button' value='yes' id='dialogBtnYes' />
<input type='button' value='no' id='dialogBtnNo' />
</div>
</div>

Troubles when closing div by clicking outside it

I am working on creating a website and I am stuck on a certain function I am trying to build. I am trying to slide back a div to its original place if anyplace outside the div is clicked. I've looked everywhere on stack but to no avail. What happens to me is that the background clicks remain active at all times, I only need it to be active when the div has slid to become sort of a popup.
Here is my jsfiddle: https://jsfiddle.net/DTcHh/10567/
Here is the jquery for one of the divs (the rest are similar)
var text = 1;
$('.login1').click(function(e){
e.preventDefault();
$('.loginform_hidden').toggleClass('loginform_visible');
$(".animateSlide").toggle(300, function(){
$(this).focus();
});
if(text == 1){
$(".div1").toggleClass("animateSlide col-xs-12");
$('.login1').html('Go Back');
$('.imageOne').toggleClass('animateSlideTop');
// If an event gets to the body
$('.div2, .div3, .patientAccess').toggle("fast");
document.addEventListener('mouseup', function(event){
var box = document.getElementsByClassName('animateSlide');
if (event.target != box && event.target.parentNode != box){
$('.div2, .div3, .patientAccess').toggle("fast");
$(".div1").toggleClass("animateSlide ");
text=0;
}
});
text = 0;
} else {
$(".div1").toggleClass("animateSlide");
$('.login1').html('Start Animation');
$('.imageOne').toggleClass('animateSlideTop');
$('.div2, .div3, .patientAccess').toggle("fast");
text = 1;
}
});
$(".div1").on('blur', function() {
$(this).fadeOut(300);
});
EDIT: The jsfiddle now incorporates what I have been trying to utilize.

As a demonstration, I built a simplified version of what I think you're aiming to achieve.
I'm using the "event.target" method described in this answer.
Since you are using CSS transitions, I'm using jQuery to detect the end of those transitions using a method found here.
I've given all boxes a class of "animbox" so that they can all be referenced as a group. I've also given each box its own ID so it can be styled individually with CSS.
I've commented the code in an attempt to explain what's going on.
// define all box elements
var $allBoxes = jQuery('.animbox');
// FUNCTION TO SHOW A SELECTED BOX
function showBox($thisBox) {
$allBoxes.hide(); // hide all boxes
$thisBox.show().addClass('animateSlide'); // show and animate selected box
$('div.login', $thisBox).text("Go Back"); // change the selected box's link text
}
// FUNCTION TO RETURN BOXES TO THE DEFAULT STATE
function restoreDefaultState() {
var $thisBox = jQuery('div.animbox.animateSlide'); // identify an open box
if ($thisBox.length) { // if a box is open...
$thisBox.removeClass('animateSlide'); // close this box
$thisBox.one('webkitTransitionEnd'+
' otransitionend'+
' oTransitionEnd'+
' msTransitionEnd'+
' transitionend', function(e) { // when the box is closed...
$allBoxes.show(); // show all boxes
$('div.login', $thisBox).text("Start Animation"); // change the link text
});
}
}
// CLICK HANDLER FOR ALL "login" TRIGGERS
$('div.login').click(function(e) {
var $thisBox = $(this).closest('div.animbox'); // identify clicked box
if (!$thisBox.hasClass('animateSlide')) { // if the box is not open...
showBox($thisBox); // open it
} else { // otherwise...
restoreDefaultState(); // restore the default state
}
});
// CLICK HANDLER TO RESTORE DEFAULT STATE WHEN CLICK HAPPENS OUTSIDE A BOX
$('body').click(function(evt) {
if ($(evt.target).hasClass('animbox') || // if a box is clicked...
$(evt.target).closest('div.animbox').length > 0) { // or a child of a box...
return; // cancel
}
restoreDefaultState(); // restore the default state
});
div.container-fluid {
background-color: #464646;
}
.v-center {
display: table;
height: 100vh;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.patientAccess {
transition: all .5s;
background: white;
height: 200px;
width: 90%;
position: absolute;
opacity: 0.7;
margin-top: -100px;
}
.patientAccess p {
font-size: 1.5em;
font-weight: bold;
}
div.animbox {
transition: all .5s;
position: absolute;
cursor: pointer;
width: 90%;
height: 100px;
opacity: 0.7;
}
div#animbox1 {
background: #e76700;
}
div#animbox2 {
background: #74b8fe;
}
div#animbox3 {
background: #848484;
}
div.login {
color: white;
font-size: 1em;
cursor: pointer;
}
div#animbox1.animateSlide {
width: 200px;
height: 300px;
margin-left: 100px;
opacity: 1;
}
div#animbox2.animateSlide {
width: 250px;
height: 450px;
margin-left: -25px;
margin-top: -150px;
}
div#animbox3.animateSlide {
width: 150px;
height: 150px;
opacity: .5;
margin-left: -100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 v-center">
<div class="content text-center">
<div class="col-xs-2 animated slideInRight "></div>
<div class="col-xs-2 animated slideInRight ">
<div class="patientAccess">
<p>Patient Resource Access</p>
</div>
</div>
<div class="col-xs-2 animated slideInRight">
<div class="animbox" id="animbox1">
<div class="login">Start Animation</div>
<div class="loginform_hidden "></div>
</div>
</div>
<div class="col-xs-2 animated slideInRight">
<div class="animbox" id="animbox2">
<div class="login">Start Animation</div>
<div class="registrationform_hidden"></div>
</div>
</div>
<div class="col-xs-2 animated slideInRight">
<div class="animbox" id="animbox3">
<div class="login">Start Animation</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can namespace an event handler using this syntax:
$("#myElement").on("click.myEventHandlerName", function() { ... });
At any point, you can remove the event handler again by calling
$("#myElement").off("click.myEventHandlerName", "#myElement");

How to change input pseudo class with Javascript?

I'm trying to build a 'radio button' selection style list, but not actually using input type="radio". My backend developer has advised me I need to create this using type="checkbox" in our specific case. I believe this can be done with JS.
So how can I make it so that when 1 option is in checked state, the other is unchecked using JS? Here is what I have so far:
http://codepen.io/rjtkoh/pen/VLZrMo
<label for="toggle-1">
<input type="checkbox" id="toggle-1">
<div>option A</div>
</label>
<label for="toggle-2">
<input type="checkbox" id="toggle-2">
<div>option B</div>
</label>
and CSS:
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
margin-bottom: 20px;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
background: red;
}
I've had a look at other threads talking about changing pseudo classes via JS, but my case dealing with input types confuses me.

Why do you need to do this with a checkbox if the sematics work for radio? There may be a legitimate reason, but without knowing this, I'd suggest you use a radio group instead, which will work without any JavaScript whatsoever, you just need to set a common name attribute on both inputs:
input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
margin-bottom: 20px;
}
/* Toggled State */
input[type=radio]:checked + div {
background: red;
}
<label for="toggle-1">
<input type="radio" name="option" id="toggle-1">
<div>option A</div>
</label>
<label for="toggle-2">
<input type="radio" name="option" id="toggle-2">
<div>option B</div>
</label>

Here is a pure javascript solution since I don't see jQuery tags in your question:
If you REALLY need to do this with checkboxes you can do this:
html
<div id="radio_group">
<label for="toggle-1">
<input type="checkbox" id="toggle-1">
<div>option A</div>
</label>
<label for="toggle-2">
<input type="checkbox" id="toggle-2">
<div>option B</div>
</label>
</div>
javascript
var options = document.getElementById('radio_group').childNodes;
var checkboxes = document.getElementsByTagName('input');
function uncheck() {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = '';
}
}
}
function checkBox(e) {
e.preventDefault();
if(e.target.nodeName == 'DIV') {
uncheck();
e.target.previousElementSibling.checked = 'checked';
}
}
for (var i = 0; i < options.length; i++) {
options[i].addEventListener('click', checkBox, false);
}
heres a fiddle --> https://jsfiddle.net/tL68Lsub/

If you really need the checkbox to work as a radio, you can use:
$("input[type='checkbox']").click(function () {
if ($(this).is(":checked")) {
$("input[type='checkbox']").not(this).removeAttr("checked");
$(this).attr("checked", "true");
}
})

Fetching input box value on submit button click

I am working on a game using ImpactJS engine and I have created a basic form for my game which contains input box and a submit button. I am able to retrieve values from the input box but what I want is that when the player clicks on submit whatever value is there in the input box gets fetched and I should be able to get that value on Submit click. If the value is null I should get an alert saying "no value or whatever". I want to use this final value and assign it to a variable that I can use in my JavaScript files inside the Impact engine to keep a track of the input from within the game. I am new to HTML, CSS in general so I have no clue how to achieve this.
Below is my HTML/CSS code that has an input box and a submit button.
<!DOCTYPE html>
<html>
<head>
<title>Impact Game</title>
<style type="text/css">
html,body {
background-color: #333;
color: #fff;
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 0;
font-size: 12pt;
}
#problemform {
display: none;
width: 300px;
height: 100px;
}
#probleminput {
position: absolute;
display: none;
top: 450px;
left: 240px;
height: 50px;
width: 350px;
}
#problemsubmit {
position: absolute;
display: none;
top: 530px;
left: 623px;
height: 40px;
width: 100px;
padding: 5px 10px 8px 2px;
}
#prob_submit_msg {
width: 30%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#canvaswrapper {
position: relative;
height: 768px;
width: 1024px;
display: block;
margin: auto;
margin-top: 80px;
vertical-align: middle;
}
#canvas {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/impact/impact.js"></script>
<script type="text/javascript" src="lib/game/main.js"></script>
</head>
<body>
<div id="canvaswrapper">
<canvas id="canvas" width="1024" height="768"></canvas>
<div id="problemform" class="form-inline">
<input id="probleminput" class="form-inline" type="text" style="display: inline;"></input>
<button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
</div>
<div id ="prob_submit_mssg" style="display: block;"></div>
</div>
</body>
</html>
Below is my block of code in ImpactJS in a different JS file to display the input box and submit button using Jquery
ProblemDisplay:function() {
this.setQuestion('This is a title','this is where the body will go and it will be super long and impossible to read or understand.', 'This is a hint');
this.isActive = true;
var form = $("#problemform");
var inputBox = $("#probleminput");
var submitButton = $("#problemsubmit");
form.show();
inputBox.show();
submitButton.show();
},
This is what I have working for now. But now I want the string passed in the input box to be stored in a different variable when clicking the submit button. How to achieve this?
Thanks!

Create an event listener for a click on the submit button.
In jQuery:
$('#submit-button').on('click', function() {
});
In vanilla js
document.getElementById('submit-button').addEventListener('click', function() {
});
Then get the value from the input box:
In jQuery:
$('#submit-button').on('click', function() {
var value = $('input').val();
// Do what you want with the value
});
In vanilla js
document.getElementById('submit-button').addEventListener('click', function() {
var value = document.getElementById('input').value;
// Do what you want with the value
});

Try With this.. :
html:
<input id="probleminput" class="form-inline" type="text" style="display: inline;"> </input>
<button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
<a id='testop' ></a>
Js:
var form = $("#problemform");
var inputBox = $("#probleminput");
var submitButton = $("#problemsubmit");
submitButton.click(function(){
var getval = ($("#probleminput").val()?$("#probleminput").val():alert('please fill the text field'))
$('#testop').text(getval);
});
Complete DEMO

If all you need is the value of the input field when someone clicks on the button, then this solution may work for you:
Fiddle Demo
JS:
$('#problemsubmit').on('click', function (event) {
event.preventDefault();
var formInput = $('#probleminput').val();
});