I have the following simple code
<tr>
<td>20 Apr 1987, 06:00-07:00</td>
<td> <input type=text id=rainfall1 value="28.95">mm</input> </td>
</tr>
<tr>
<td>20 Apr 1987, 07:00-08:00</td>
<td> <input type=text id=rainfall2 value="38.87">mm</input> </td>
</tr>
<tr>
<td>20 Apr 1987, 08:00-09:00</td>
<td> <input type=text id=rainfall3 value="14.89">mm</input> </td>
</tr>
which produces
this table.
I want to add a third
<td> ... here draw a bar ... </td>
cell which draws a bar that corresponds to the values of rainfall and which updates automatically when the values in the input change. What would be the easiest way to do this? Code snippets are highly appreciated. The input elements are part of a bigger form.
you can use jqueryUI for this matter. try to download these required jqueryUI files and follow the code below:
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>progress bar in table example</title>
<link href="jquery-ui.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
</style>
</head>
<body>
<h1>progress bar in table example</h1>
<table>
<tr>
<td>20 Apr 1987, 06:00-07:00</td>
<td> <input type=text id=rainfall1 value="28.95">mm</input> </td>
<td></td>
</tr>
<tr>
<td>20 Apr 1987, 07:00-08:00</td>
<td> <input type=text id=rainfall2 value="38.87">mm</input> </td>
<td></td>
</tr>
<tr>
<td>20 Apr 1987, 08:00-09:00</td>
<td> <input type=text id=rainfall3 value="14.89">mm</input> </td>
<!--here is the progress bar div element-->
<td><div id="progressbar" style="width:200px"></div></td>
</tr>
</table>
<button id="plusBtn">+10</button>
<button id="minusBtn">-10</button>
<label id="progressLabel">label</label>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
var progressVal = 20;
//these minus and plus functions are just for an interactive progress bar example.
//you don't have to use them
$("#plusBtn").click(function(){
progressVal += 10;
$("#progressLabel").html(progressVal.toString());
console.log(progressVal);
$( "#progressbar" ).progressbar({
value: progressVal
});
});
$("#minusBtn").click(function(){
progressVal -= 10;
$("#progressLabel").html(progressVal.toString());
console.log(progressVal);
$( "#progressbar" ).progressbar({
value: progressVal
});
//the progressbar() function updates the bar's value
});
$( "#progressbar" ).progressbar({
value: progressVal
});
</script>
</body>
</html>
You can simply make a div inside of your td with some CSS styling. For example, use this:
.bar{
height: 20px;
position: relative;
background-color: lightblue;
}
Then make the HTML like this:
<table id=table>
<tr>
<td>20 Apr 1987, 08:00-09:00</td>
<td> <input type=text id=rainfall0 value="14.89">mm</input> </td>
<td><div class="bar" id="bar0"></div></td>
</tr>
</table>
Now use this JavaScript to make the height of the bar relative tot the value of the input:
var amnt = document.getElementById("table").rows.length;
for(i = 0; i < amnt; i++){
var element = document.getElementById("rainfall" + i);
rainfall = element.value;
var el = document.getElementById("bar" + i);
el.style.width = rainfall;
}
This should work, have not tested it yet, will do so now.
Related
Im using a form to be able to use the input of the user to save some information.
In this case it's instructions for a receipt. However I would like to have an unlimited number of fields for that (as you can see in the image it has 3 fields).
I would like to have an option at the bottom, like a button where it would create a new input field. I've searched in bootstrap documentation and I don't find anything related to that, they always use a fixed number of input fields...
Any suggestion?
This is the code I'm using to generate the fields (10 at the moment):
<div class="col-md-4">
<h2>Instructions</h2>
<div class="form-group">
<table style="width:75%">
<tr>
<th><label asp-for="Instructions[0].Designation" class="control-label"></label></th>
</tr>
#for (int i = 0; i < 10; i++)
{
<tr>
<td><input asp-for="Instructions[i].Designation" class="form-control" placeholder="Step #(i+1) " /></td>
</tr>
<span asp-validation-for="Instructions[i].Designation" class="text-danger"></span>
}
</table>
</div>
The following code is a fully functional example on how you can achive what you are asking for:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Instructions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="col-md-4">
<h2>Instructions</h2>
<div class="form-group">
<table id="instructionsTable" style="width:75%">
<tr>
<th><label asp-for="Instructions[0].Designation" class="control-label"></label></th>
</tr>
<tr>
<td><input asp-for="Instructions[i].Designation" class="form-control" placeholder="Step #(i+1)" /></td>
</tr>
<span asp-validation-for="Instructions[i].Designation" class="text-danger"></span>
</table>
</div>
<input id="addInputBtn" type="button" value="+" />
<script>
$(document).ready(function(){
$("#addInputBtn").click(function(){
var newInput = "<tr><td><input asp-for='Instructions[i].Designation' class='form-control' placeholder='' /></td></tr>";
$("#instructionsTable").append(newInput);
})
});
</script>
</body>
</html>
page is available here: http://macrorevolution.com/calculators/bmr/
How do I go about creating space after my input[text] box. For example, I want to create 1px spacing between the input box and "Years","ft","In"."k/cal per day".
I tried using .ipadding but that didn't work so ignore it. Also, how can I shift all of the input boxes closer to "Age", "Height", "weight"?
I am new to html/css.
<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
$agev = $_POST['agev'];
$feetv = $_POST['feetv'];
$inchesv = $_POST['inchesv'];
$weightv = $_POST['weightv'];
$sex = $_POST['sex'];
$totalheightv = $inchesv + ($feetv*12);
$heightcm = $totalheightv*2.54;
$weightkg = $weightv/2.2;
if($sex=='male') $answer = round((66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev)),0);
if($sex=='female') $answer = round((665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev)),0);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Basal Metabolic Rate Calculator</title>
<style>
table {
border: 30px;
font-size:13px;
font-family: 'PT Sans', sans-serif;
background-color:#FFFFFF;
}
tr.spaceUnder > td
{
padding:0em 1em 1em 0em;
}
p.ss {
font-size:30px;
}
.ipadding {
padding:1px;
}
</style>
</head>
<body>
<div class="box pt20">
<p class="ss">MacroRevolution BMR Calculator</p><br>
<table width='80%' style="margin: 0 auto;">
<tr class="spaceUnder">
<td colspan="4">
BMR = Basal Metabolic Rate (similar to RMR = Resting Metabolic Rate). Your BMR represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.
</td>
</tr>
</table>
<form method='post' action=''>
<table width='80%' style="margin: 0 auto;">
<tr class="spaceUnder">
<td>Age:</td>
<td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
</tr>
<tr class="spaceUnder">
<td>Height:</td>
<td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft<p> </p>
<input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
</tr>
<tr class="spaceUnder">
<td>Weight:</td>
<td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
</tr>
<tr class="spaceUnder">
<td colspan="2"><input type='radio' name='sex' value='male'>Male
<input type='radio' name='sex' value='female'>Female</td>
</tr>
<tr class="spaceUnder">
<td colspan="2"><input type='submit' class="button highlight small" value='Calculate'/></td>
</tr>
<tr class="spaceUnder">
<td colspan="2">Your BMR is <input type='text' style="width: 50px;" value='<?php echo $answer?>' />k/cal per day </td>
</tr>
</table>
</form>
<table border='0' width='80%' style="margin: 0 auto;">
<td colspan="4">
Formula for BMR
If you want to manually calculate your BMR, use the (Harris-Benedict formula) <br> below. <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>
W = Weight in kilograms (lbs/2.2)<br>
H = Height in centimeters (inches x 2.54)<br>
A = Age in years <br><br><br>
</td>
</table>
</div>
</body>
</html>
put a margn on the right side.
input {
margin-right:5px;
}
So many ways, one is as:
input[type="text"] {margin-right:1px;}
input[type="radio"] {margin-right:5px;}
.spaceUnder td:first-child {width:50px;}
Use :
input{
margin-right:1px;
}
For bringing textboxes near to the label put them in the same td.
See this Fiddle
just follow the image and create a new css rule and update css rule.Hope it will be helpful!
Step: 1
Step:2
I'm trying to tamper with my html table settings to set borders but I think my syntax is wrong. I've looked around online and tried multiple things with no success. Any suggestions?
For example, this code is applied to the first table but does not appear correctly on page.
<table BORDER="30" CELLPADDING="10" CELLSPACING="3" BORDERCOLOR="00FF00" width='80%' style="margin: 0 auto;">
</table>
HTML code is applied here: http://macrorevolution.com/calculators/bmr/
The only table settings that seem to work are "width='80%' style="margin: 0 auto;""
<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
$agev = $_POST['agev'];
$feetv = $_POST['feetv'];
$inchesv = $_POST['inchesv'];
$weightv = $_POST['weightv'];
$sex = $_POST['sex'];
$totalheightv = $inchesv + ($feetv*12);
$heightcm = $totalheightv*2.54;
$weightkg = $weightv/2.2;
if($sex=='male') $answer = 66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev);
if($sex=='female') $answer = 665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basal Metabolic Rate Calculator</title>
</head>
<body>
<div class="box pt20">
<table BORDER="30" CELLPADDING="10" CELLSPACING="3" BORDERCOLOR="00FF00" width='80%' style="margin: 0 auto;">
<td colspan="4">
<h4 style="background: #99FF99;">
<strong>BMR = Basal Metabolic Rate</strong> (similar to RMR = Resting Metabolic Rate). Your BMR represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.
</h4>
</td>
</table>
<form method='post' action=''>
<table border='5' width='80%' font-family:Georgia; font-size:1; class="table" style="margin: 0 auto;" bgcolor="FFFFFF">
<tr class="calcheading">
<td colspan="2"><font size="10">MacroRevolution BMR Calculator</font></td>
</tr>
<tr class="calcrow">
<td>Age:</td>
<td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
</tr>
<tr class="calcrow2">
<td>Height:</td>
<td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft<input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
</tr>
<tr class="calcrow">
<td>Weight:</td>
<td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
</tr>
<tr class="gender">
<td colspan="2"><input type='radio' name='sex' value='male'>Male
<input type='radio' name='sex' value='female'>Female</td>
</tr>
<tr class="submit">
<td colspan="2"><input type='submit' class="button highlight small" value='Calculate'/></td>
</tr>
<tr class="calcrow">
<td colspan="2">Your BMR is <span style="background-color: #00CC33"><?php echo $answer?></span></td>
</tr>
</table>
</form>
<table border='0' width='80%' class="table" align="center" style="margin: 0 auto;">
<td colspan="4">
<h2 style="background: #99FF66;">Formula for BMR</h2>
<h4 style="background: #99FF66;">
If you want to manually calculate your BMR, use the (Harris-Benedict formula) <br> below. <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>
W = Weight in kilograms (lbs/2.2)<br>
H = Height in centimeters (inches x 2.54)<br>
A = Age in years
</h4>
</td>
</table>
</div>
</body>
</html>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////-->
Avoid HTML attributes like border="30" cellpadding="10" cellspacing="3" bordercolor="#00ff00" and use CSS instead:
<style>
table {
border: 30px solid #00ff00;
}
</style>
Even better, move the styles to another file
<link rel="stylesheet" type="text/css" href="stylesheet.css">
i have a problem with load() a page that contains ckeditor.and the problem is that when im loading my page , after load the page does not contains ckeditor anymore.my code is here:
i have a problem with load() a page that contains ckeditor.and the problem is that when im loading my page , after load the page does not contains ckeditor anymore.my code is here:
$("#editpost").click(function(){
$("#postbodycenter").load("editepost.php");
});
<?php
include 'php/auth.inc';
include 'manage.php';
if(!empty($_POST["title"]) && !empty($_POST["txfpost"]))
{
connect();
if(isset($_POST["select_page_name"]))
{
$p_name = mysql_real_escape_string($_POST['select_page_name']);
$query = 'SELECT `id` FROM `pages` WHERE `page_name` ='.'"$p_id"'.'';
$get_p_id = mysql_query($query) or die(mysql_error());
while ($result = mysql_fetch_array($get_p_id))
{
$p_id = $result[id];
$query ="insert into post (page_id,header,category,date,author,body,more) values
($p_id,'$_POST[title]','$_POST[txfcat]','$_POST[date]','admin','$_POST[txfpost]','$_POST[txfmore]')";
mysql_query($query) or die(mysql_error());
}
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>new post</title>
<link rel="stylesheet" href="cssadmin.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnsub").click(function(){
var cat = $("#txfcat").val();
var title = $("#title").val();
var editor1 = $("#editor1").val();
var editor2 = $("#editor").val();
if(!(cat == "" || title == "" || editor1 =="" || editor2 == "")){
alert("Fill all fields!");
}else{
$('#form1').submit();
alert("done");
}
});
});
</script>
</head>
<body id ="body">
<center>
<form id="form1" name="form1" method="post" action="newpost.php">
<table id = "tb_post">
<tbody>
<tr>
<td>cat</td>
<td><input type="text" name="txfcat" id="txfcat" size="130" /></td>
</tr>
<tr>
<td>title:</td>
<td><input type="text" name="title" id="title" size="130" /></td>
</tr>
<tr>
<td>refers to :</td>
<td>
<select name="select_page_name">
<option>select the page</option>
<option value="home">home</option>
<?php pages();?>
</select>
</td>
</tr>
<tr>
<td><input type = "hidden" name = "date" value="<?php echo date("H:i:s d-m-Y")?> "/></td>
<td><textarea class="ckeditor" cols="95" id="editor1" name="txfpost" rows="10"></textarea>
</td>
</tr>
<tr>
<td>more</td>
<td><textarea class="ckeditor" cols="95" id="editor" name="txfmore" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td> <button type="submit" name="btnsub" id="btnsub" value="update">send</button> </td>
</tr>
</tbody>
</table>
</form>
</center>
</body>
</html>
Your page does not contain the script to load CKEditor.
Simply add the following code into one of your <script> tags in your page:
$(document).ready(function(){
CKEDITOR.replace('editor1');
}
I have this table layout. I want to align the whole content to the right. So i'm using one cell with width: 100%;. Usually everything looks good and nice.
But there is something, which i don't understand. If the content in cell, which has colspan, becomes bigger than normal cell in this column (you can test this by clicking Click to test button), it brakes whole layout.
This happens on Chrome, Safari 4 and 5, IE8, but on Opera, FF and IE7 is OK.
Any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td><input type="text" value="Field 1" id="field1" size="25"></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td>
<td class="delimiter"> </td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td>
</tr>
</table>
</body>
</html>
I was not surprised when you said it worked in some browsers and not others. Welcome to the real world of developing a web app. I haven't gone down into the nitty gritty of checking why browsers are refreshing their layouts differently, as i've learned that it can be a black hole of time. Instead i put forth the following solution:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td class="delimiter">
<table><tr>
<td><input type="text" value="Field 1" id="field1" size="25" /></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td>
<table><tr>
<td><input type="text" id="field2" value="Field 2" size="25" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>
I know it's not the prettiest solution, but as raw html it does work. Tested in Chrome and IE10.
Use W3C standards to be more save with crossbrowser coding. Beste solution for javascript code crossbrowser safty is to user jQuery. It's even more handy for this kind of tools/functionalities.