How do I print a Variable on Screen with JavaScript?

How do I print a Variable on Screen with JavaScript? - javascript

I have been working on a Calculator. Every time a an operation takes
place, answer gets alerted or in console.log();. I wonder if there
was any script from which I could print the answer in a Text box.
I am Using <div> also which has caused problems with my footer. if i
don't do breaks <br> then the footer would go to the centre of the
left <div>.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BlackForest</title>
</head>
<body>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="main.css" >
<div class="jumbotron">
<h1 class="span2"><kbd>BlackForest</kbd></h1>
</div>
<header>
<ul class="nav nav-pills">
<li class="active"><a class="btn btn-lg" href="#">Home</a></li>
<li><a class="btn btn-lg" href="#" id="spacing">Profile</a></li>
<li><a class="btn btn-lg" href="#" id="spacing">Messages</a></li>
</ul>
</header>
<!-- div start -->
<div class="left">
<h1 id="hbody">Calculator</h1>
<form name="form" action="" method="POST">
Enter First Number: <br>
<input type="text" name="numone" value="">
<br>
<br>
Enter Second Number: <br>
<input type="text" name="numtwo" value="">
<br>
<br>
<input type="button" name="addition" value="Add" onClick="dataAdd(this.form)">
<input type="button" name="subtraction" value="Subtract" onClick="dataSubtract(this.form)">
<input type="button" name="multiply" value="Multiply" onClick="dataMultiply(this.form)">
<input type="button" name="division" value="Divide" onClick="dataDivide(this.form)">
</form>
</div>
<center>
<div class="right">
<p class="lead"><strong><kbd>Login</kbd></strong></p><br>
<div class="well">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1"><kbd>Email address</kbd></label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1"><kbd>Password</kbd></label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-default btn-lg" id="buttoncolor"><strong>Login</strong></button>
</form>
</div>
</div>
</center>
<!-- div end -->
<script language="JavaScript">
function dataAdd (form) {
var jsnumone = form.numone.value;
var jsnumtwo = form.numtwo.value;
var jsSum = parseInt(jsnumone)+ parseInt(jsnumtwo);
console.log("Sum: " + jsSum);
alert(jsSum);
}
function dataSubtract (form) {
var jsnumone = form.numone.value;
var jsnumtwo = form.numtwo.value;
var jsSub = jsnumone-jsnumtwo;
console.log("Difference: " + jsSub);
alert(jsSub);
}
function dataMultiply (form) {
var jsnumone = form.numone.value;
var jsnumtwo = form.numtwo.value;
var jsMultiply = Math.abs(jsnumone*jsnumtwo);
console.log("Product: " + jsMultiply);
alert(jsMultiply);
}
function dataDivide (form) {
var jsnumone = form.numone.value;
var jsnumtwo = form.numtwo.value;
var jsDivide = Math.abs(jsnumone/jsnumtwo);
console.log("Quotient: " + jsDivide);
alert(jsDivide);
}
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer>
<center>
<p class="lead">&copy 2014 Tanishq Jain</p>
</center>
</footer>
</body>
</html>
CSS code:
body {
background: #999;
background-color: #999;
margin: 10px;
color: #333;
text-decoration: none;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
margin: 0 auto;
}
body footer {
color: #222;
background: #999;
}
body h1 {
color: #222;
background: #999;
margin: 0;
padding-top: 0 !important;
padding: 10px;
background-color: #999;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
body h1:hover {
outline: none;
}
div.left {
width: 70%;
padding-left: 10px;
margin-left: 25px;
float: left;
color: #333;
background: #999;
border: 0;
background-color: #999;
}
div.right {
width: 30%;
padding-left: 0 5px 0 0;
float: right;
color: #333;
background: #999;
background-color: #999;
border: 0;
font-size: 14px;
}
div.well {
background: #999;
border: 0;
}
div.jumbotron {
background: #999;
padding-top: 20px !important;
margin-bottom: 0;
padding-bottom: 30px;
}
div.form-group {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
button.btn:hover {
border-color: #777;
background: linear-gradient(#acda44 0%, #689600 100%);
}
body header li a {
margin-left: 45px;
background-color: #444 !important;
border-radius: 4px;
color: white;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
body header li a:hover {
color: white;
border-color: #777;
background: linear-gradient(#acda44 0%, #689600 100%);
border-color: black;
border: 3px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
#spacing {
margin-left: 0;
}
#hbody {
padding-top: 10px !important;
}
.lead {
padding-left: 10px !important;
}

create a text input inside body tag
<input type="text" id="num_text"></input>
then in javascript do the following
document.getElementById("num_text").innerHTML="whatever your text or number";
for footer part you can have a look at http://css-tricks.com/snippets/css/sticky-footer/

HTML:
<input type="text" id="result" />
JAVASCRIPT:
var result = //get from calculation
document.getElementById("result").value=result; // Put result in input box

html
<inpur type="text" id= "resultText" />
<div id="resultDiv"></div>
javascript
var result = 5 +5;
document.getElementById("resultText").value=result; // result displays in textbox
document.getElementById("resultDiv").innerHTML=result; // result displays in div
jquery
var result = 5 +5;
$('#resultText').val(result); // result displays in textbox
$('#resultDiv').html(result);// result displays in div
and for your footer try relative property, below i given basic styles for footer
<style>
.footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
</style>
<div class="footer">footer content</div>

Make a third textbox after you have made the second text
Answer: <br>
<input type="text" name="ans" value="">
Now in javascript where you have alert the answer write code
document.getElementById("ans").value==jsSum;
Similarly do it for subtract, multiply and divide.
document.getElementById("ans").value==jsSub;
document.getElementById("ans").value==jsMultiply;
document.getElementById("ans").value==jsDivide;
Sorry I couldn't help you with the footer problem.
This is the whole HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BlackForest</title>
</head>
<body>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="main.css" >
<div class="jumbotron">
<h1 class="span2"><kbd>BlackForest</kbd></h1>
</div>
<header>
<ul class="nav nav-pills">
<li class="active"><a class="btn btn-lg" href="#">Home</a></li>
<li><a class="btn btn-lg" href="#" id="spacing">Profile</a></li>
<li><a class="btn btn-lg" href="#" id="spacing">Messages</a></li>
</ul>
</header>
<!-- div start -->
<div class="left">
<h1 id="hbody">Calculator</h1>
<form name="form" action="" method="POST">
Enter First Number: <br>
<input type="text" name="numone" value="" id="numone">
<br>
<br>
Enter Second Number: <br>
<input type="text" name="numtwo" value="" id="numtwo">
<br>
<br>
Answer: <br>
<input type="text" name="ans" value="" id="ans">
<br>
<br>
<input type="button" name="addition" value="Add" onClick="dataAdd()">
<input type="button" name="subtraction" value="Subtract" onClick="dataSubtract()">
<input type="button" name="multiply" value="Multiply" onClick="dataMultiply()">
<input type="button" name="division" value="Divide" onClick="dataDivide()">
</form>
</div>
<center>
<div class="right">
<p class="lead"><strong><kbd>Login</kbd></strong></p><br>
<div class="well">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1"><kbd>Email address</kbd></label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1"><kbd>Password</kbd></label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-default btn-lg" id="buttoncolor"><strong>Login</strong></button>
</form>
</div>
</div>
</center>
<!-- div end -->
<script language="JavaScript">
function dataAdd()
{
n1=document.getElementById('numone').value;
n2=document.getElementById('numtwo').value;
document.getElementById('ans').value=parseInt(n1)+parseInt(n2);
}
function dataSubtract()
{
n1=document.getElementById('numone').value;
n2=document.getElementById('numtwo').value;
document.getElementById('ans').value=parseInt(n1)-parseInt(n2);
}
function dataMultiply()
{
n1=document.getElementById('numone').value;
n2=document.getElementById('numtwo').value;
document.getElementById('ans').value=parseInt(n1)*parseInt(n2);
}
function dataDivide()
{
n1=document.getElementById('numone').value;
n2=document.getElementById('numtwo').value;
document.getElementById('ans').value=parseInt(n1)/parseInt(n2);
}
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer>
<center>
<p class="lead">&copy 2014 Tanishq Jain</p>
</center>
</footer>

Related

how to get the url parameters and set it as the default value of a text box onload

URL
http://localhost:8082/EPHI2/SearchOrg.html?orgName=Appollo
I have to extract the parameter from this url and set it as the default value of a text box onload of the page.
My HTML page is as follows.
SearchOrg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<style>
.topnav {
overflow: hidden;
background-color: #FCFEEA;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #CBF894;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
Home
Search Patient
Manage Policy
Search Organization
</div>
<br>
<br>
<br>
<br>
<form style="padding: 10px 400px;" name="searchOrganization" action="viewOrganization" method="post">
<input type="text" name="searchOrg" id="searchOrg" class="form-control"
placeholder="Search the organization" /> <br>          <input
type="submit" class="btn btn-primary" id="Search" value="Search" /> <input
type="button" class="btn btn-primary" id="ok" value="OK" /> <input
type="reset" class="btn btn-primary" id="clear" value="Clear" />
</form>
</body>
</html>
I have to set the default value of the textbox "searchOrg" as the value of the url parameter "orgName".

here is complete code just copy it, thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<style>
.topnav {
overflow: hidden;
background-color: #FCFEEA;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #CBF894;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
Home
Search Patient
Manage Policy
Search Organization
</div>
<br>
<br>
<br>
<br>
<form style="padding: 10px 400px;" name="searchOrganization" action="viewOrganization" method="post">
<input type="text" name="searchOrg" id="searchOrg" class="form-control"
placeholder="Search the organization" /> <br>          <input
type="submit" class="btn btn-primary" id="Search" value="Search" /> <input
type="button" class="btn btn-primary" id="ok" value="OK" /> <input
type="reset" class="btn btn-primary" id="clear" value="Clear" />
</form>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( window ).on( "load", function() {
function getParameterByName( name,href )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( href );
if( results == null )
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
var url = window.location.href;
$('#searchOrg').val(getParameterByName("orgName", url));
});
</script>
</body>
</html>

bootstrap-validate: How can i enable validation in bootstrap4?

I have a validation form in bootstrap4 when I enter less than 5 characters it shows me an error.
When I enter 5 or more than 5 characters I want to put a green check-mark and border on that particular input field.
<div class="container">
<form action="" class="needs-validation" novalidate>
<div class="form-group">
<label for="username">username:</label>
<input type="text" class="form-control" id="name" placeholder="username" required>
</div>
<input type="submit" class="btn btn-primary" value="submit" >
</form>
</div>
<script src="./dist/bootstrap-validate.js"></script>
<script>
bootstrapValidate('#name', 'min:5:Enter at least 5 charecters');
</script>
</body>
</html>
https://github.com/NinoosMoshi/form-validation.git

You need a few things in your code...
you got the condition correct, need to add/remove classes as a result of bootstrapValidate
import the icon library (i used font awesome v5)
in the classes you add/remove, you gotta place the icon for the check mark
UPDATE:
in light of questioner's comment of multiple fields in the form
Following code should help:
$(document).ready(function() {
bootstrapValidate('#usr', 'min:5:Enter at least 5 characters!', function(isValid) {
if (isValid) {
$("#formHolder").addClass('validClass');
$("#formHolder").removeClass('invalidClass');
} else {
$("#formHolder").addClass('invalidClass');
$("#formHolder").removeClass('validClass');
}
});
bootstrapValidate('#lastName', 'min:7:Enter at least 7 characters!', function(isValid) {
if (isValid) {
$("#formHolder2").addClass('validClass');
$("#formHolder2").removeClass('invalidClass');
} else {
$("#formHolder2").addClass('invalidClass');
$("#formHolder2").removeClass('validClass');
}
});
});
.validClass>input {
border: 2px solid green;
}
.validClass .form-control:focus {
border-color: green;
box-shadow: 0 0 0 0.2rem rgba(33, 93, 30, 0.56)
}
.invalidClass>input,
.invalidClass .form-control:focus {
border: 2px solid red;
}
.inputWrapper {
display: inline-block;
position: relative
}
.validClass:after {
font-family: "Font Awesome 5 Free";
content: "\f00c";
visibility: visible;
font-weight: 900;
color: green;
position: absolute;
right: 6px;
top: 55%;
}
.invalid-feedback {
position: absolute;
display: inline-block;
bottom: -100px;
left: 0px;
}
.submitBtn {
margin-top: 20px;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<div class="container mt-3">
<form>
<div class="form-group">
<div class='inputWrapper invalidClass' id='formHolder'>
<label for="usr">Name:</label>
<input type="text" class="form-control " id="usr">
</div>
<br/>
<div class='inputWrapper invalidClass' id='formHolder2'>
<label for="lastName">last Name:</label>
<input type="text" class="form-control " id="lastName">
</div>
</div>
<button type="submit" class="btn btn-primary submitBtn">Submit</button>
</form>
</div>

HTML - How to make drop-down list content hide on button click?

I have integrated a drop-down menu into my search-bar(using Bootstrap)
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
<span class="glyphicon glyphicon-remove"></span>
</button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtRequestNo" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" />
</div>
<label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
</div>
</div>
</div>
</div>
</div>
The textboxes in drop-down act as search filters.
Currently that drop-down menu doesn't hide unless the user clicks outside of that menu. Hence it blocks the other content.
I'm trying to achieve the following :
If I enter a particular data in the textbox and hit enter the drop-down contents should hide.
e.g. I enter 1234 as a search term insisde RequestNo. and Hit Enter the entire drop-down list should get hidden (or collapse back)
(I don't require mouse-hover to achieve this)
What additions should I do to my code to accomplish this?

You can use keycode to close dropdown on enter press
$('.dropdown-menu.dropdown-menu-right').keypress(function (e) {
if (e.keyCode == 13) {
$('.dropdown.dropdown-lg').removeClass('open');
}
});
$('.dropdown-menu.dropdown-menu-right').keypress(function(e) {
if (e.keyCode == 13) {
$('.dropdown.dropdown-lg').removeClass('open');
}
});
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
<span class="glyphicon glyphicon-remove"></span>
</button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtRequestNo" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" />
</div>
<label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
</div>
</div>
</div>
</div>
</div>

Position dropdown-menu right under menu header

I am trying to position my dropdown-menu right under my menu header like in following image. At best I get it to position right next to it, but is it possible to achieve my objective?
Here my FIDDLE ... FIDDLE
Please see the example in my FIDDLE/BOOTPLY which shows the result of my code correctly. In SA its not right, sorry about that.
My code...
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$(".products .checkbox").on("click", function(e) {
var i = $("li").index( $(this).parent() );
console.log(i);
$('.products .btn_clear').css('background', 'blue');
$('.products .btn_apply').css('background', 'green');
});
$(".availability .checkbox").on("click", function(e) {
var i = $("li").index( $(this).parent() );
console.log(i);
$('.availability .btn_clear').css('background', 'blue');
$('.availability .btn_apply').css('background', 'green');
});
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color:grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color:yellow
}
.checkbox label, .radio label {
min-height: 20px;
padding-left: 30px;
padding-right:30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius:0;
margin-top:5px
}
.dropdown-menu {
border-radius:0;
border:5px solid blue;
position: relative;
background-color: red;
border-top-width: 0px;
}
.typeahead {
width:90%;
margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu products" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu availability" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> One</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Two
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Nine</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Eight</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Seven</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Warning buttons with dropdown menu-->
</div>

Here you go, I removed the JavaScript and removed the left margin and relative positioning from the dropdown menu: http://www.bootply.com/KaP7SiUYVw
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox:hover {
background-color: red;
cursor: pointer;
}
.div_form:hover {
background-color: green;
cursor: pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color: grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color: yellow
}
.checkbox label,
.radio label {
min-height: 20px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius: 0;
margin-top: 5px
}
.dropdown-menu {
border-radius: 0;
border: 5px solid blue;
background-color: red;
border-top-width: 0px;
}
.typeahead {
width: 90%;
margin-left: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
</button>
<div class="dropdown-menu products">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text">
<div class="checkbox">
<label>
<input value="" type="checkbox">Alpha</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Beta
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Gamma</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Delta</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Omega</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div>
<!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
</button>
<div class="dropdown-menu availability">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label>
<input value="" type="checkbox">One</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Two
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Nine</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Eight</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Seven</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div>
<!--Warning buttons with dropdown menu-->
</div>

Positioning text and the form on the parallel to each other (side by side) - HTML

I am trying to position a form and some paragraph texts on the left side by side so they are parallel to each other how ever I dont understand how I can do this
Currently I am trying to float the form to the right, however the social Icons then move from the bottom and position on the left of the screen
I want to position the ids: "myForm" and class "info" side by side
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arshdeep Soni</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="icon" type="image/png" href="images/ace.png"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js">
</script>
<style type="text/css">
body {
background-color: black;
background-image: url();
color:white;
font-family: sans-serif;
}
#name {
color:white;
font-family: coolvetica;
font-size: 50px;
text-align: center;
padding-top: 60px;
letter-spacing: 6px;
font-weight: bolder;
text-transform: uppercase;
}
#magician {
color:white;
font-family: raleway;
font-size: 25px;
letter-spacing: 11px;
margin-top: 2%;
text-align: center;
}
hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #ffffff, #ccc);
background-image: -o-linear-gradient(left, #ccc, #ffffff, #ccc);
width:50%;
max-width: 100%;
}
#info {
}
#info h2 {
color:white;
font-family: Baron neue;
font-size: 30px;
padding: 30px 0px 0px 10px;
margin-right: 50%;
}
#info p {
font-family: sans-serif;
font-size: 15px;
padding-top: 10px;
padding-left: 10px;
margin-right: 50%;
}
#contact {
padding-left: 10px;
line-height: 1.7em;
margin-right: 50%;
}
#myForm {
top:0;
float:right;
}
</style>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >☰ Menu</span>
<div class="nav-menu">
<ul>
<li>HOME</li>
<li><a href=#>VIDEOS</a></li>
<li><a href=#>IMAGES</a></li>
<li><a href=#>EVENTS</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li class="current">ENQUIRIES</li>
</ul>
</div>
<h1 id="name">Arshdeep Soni</h1>
<p id="magician">Magician</p>
<hr>
<div id="info">
<h2>Enquiries</h2>
<p id="contact">Phone: (+44)</p>
<email id="contact">Email: Bookings#ArshdeepSoni.com</email>
<p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings#ArshdeepSoni.com?" target="_top"> Bookings#ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
<form id="myForm" method="post" action="Contact.html" onsubmit="#">
<p>Your Name: </p>
<input type="text" name="name"/>
<p>Subject: </p>
<input type="text" name="subject"/></br>
<p>Your Email: </p>
<input type="text" name="email"/></br>
<p>Phone Number: </p>
<input type="text" name="number"/></br>
<p>Message: </p>
<textarea id="message"></textarea>
<input type="submit" value="Send"/>
</form>
</div>
<div class="main">
</div>
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="images/social/youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="images/social/instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="images/social/fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="images/social/twitter.png" /></a>
</div>
</body>
</html>

You should move "myForm" outside of the "info" div like this
<div id="info">
<h2>Enquiries</h2>
<p id="contact">Phone: (+44)</p>
<email id="contact">Email: Bookings#ArshdeepSoni.com</email>
<p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings#ArshdeepSoni.com?" target="_top"> Bookings#ArshdeepSoni.com</b></a> and we will endeavour to get back to you within 48 hours.</p>
</div>
<form id="myForm" method="post" action="Contact.html" onsubmit="#">
<p>Your Name: </p>
<input type="text" name="name"/>
<p>Subject: </p>
<input type="text" name="subject"/></br>
<p>Your Email: </p>
<input type="text" name="email"/></br>
<p>Phone Number: </p>
<input type="text" name="number"/></br>
<p>Message: </p>
<textarea id="message"></textarea>
<input type="submit" value="Send"/>
</form>
And your CSS for those elements should look like this
#myForm {
display:inline-block;
}
#info {
width: 50%; // Adjust to your liking
float:left;
}
https://jsfiddle.net/srf9w1w3/

You colud use box model in css to do that, please check the code below in the snippet
#media (min-width: 500px) {
.row:after {
content: " ";
display: table;
clear: both;
}
.column-half {
float: left;
width: 50%;
padding: 0 20px;
box-sizing: border-box;
border:solid 1px #ccc;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.dcenter {
display:block;
text-align:center;
padding:5px;
}
<div class="row">
<div class="column-half">
HTML INFO HERE
</div>
<div class="column-half">
FORM CODE HERE
</div>
</div>
<div class="clearfix"></div>
<div class="dcenter">icons here</div>

Develop Reference

JavaScript is the programming language of the Web.

How do I print a Variable on Screen with JavaScript? - javascript

create a text input inside body tag <input type="text" id="num_text"></input> then in javascript do the following document.getElementById("num_text").innerHTML="whatever your text or number"; for footer part you can have a look at http://css-tricks.com/snippets/css/sticky-footer/

HTML: <input type="text" id="result" /> JAVASCRIPT: var result = //get from calculation document.getElementById("result").value=result; // Put result in input box

Related

how to get the url parameters and set it as the default value of a text box onload

bootstrap-validate: How can i enable validation in bootstrap4?

HTML - How to make drop-down list content hide on button click?

Position dropdown-menu right under menu header

Positioning text and the form on the parallel to each other (side by side) - HTML

Categories

Resources