I am trying to align tick marks on a horizontal slider that steps by 5 units. I have two issues:
1 - How do I make the slider longer to accommodate the tick marks?
2 - How do I properly align these tick marks directly under the slider, each representing each 5units point on the slider?
Right now, I used a table for the markers because I felt that would push the start marker to the beginning of the slider line - not getting desired output.
Here is my HTML:
<!-- Slider.html-->
<html>
<link rel="stylesheet" type="text/css" href="slider.css">
<head>
<title>Slider</title>
</head>
<body>
<form action="action_page.php" method="get">
Steps:
<input type="range" name="points" min="0" max="40" step="5">
<input type="submit">
</form>
<table>
<td>
<table>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">5</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">10</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">15</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">20</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">25</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">30</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">35</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">40</div>
</td>
</table>
</td>
</table>
</body>
</html>
Here is my .css:
/*slider.css*/
.checkpoint {
text-align: center;
float: center;
}
.tick {
border-left: 1px solid #454545;
width: 41px;
height: 5px;
display: inline-block;
}
.value {
border-left: 1px;
font-size: 12px;
width: 41px;
height: 5px;
display: below-block;
}
.checkpoint:not(:last-child) {
margin-right: 20px;
}
.style {
left: 56.5px;
position: relative;
}
My output gives me this:
what you could do is use the css property width to change the length of the slider at which point you could then use the margin on the table in order to align the two. if you don't want to have to do a lot of guessing you could use jquery to get those lengths using jquery. to make it easier ive edited your tic marks to be a horizontal line and added some other css to appropriately compensate
$(document).ready(function(){
$('.slider').css('width',$('table').css('width'));
$('.measure').css('margin-left',$('.steps').css('width'));
});
.checkpoint {
text-align: center;
float: center;
}
.tick {
text-align:right;
border:none;
width: 41px;
height: 5px;
display: inline-block;
}
.value {
text-align:center;
border-left: 1px;
font-size: 12px;
width: 41px;
height: 5px;
display: below-block;
}
.checkpoint:not(:last-child) {
margin-right: 20px;
}
.style {
left: 56.5px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Slider</title>
</head>
<body>
<form action="action_page.php" method="get">
<span class='steps'>Steps:</span>
<input class='slider' type="range" name="points" min="0" max="40" step="5">
<input type="submit">
</form>
<table class='measure'>
<td>
<table>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">5</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">10</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">15</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">20</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">25</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">30</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">35</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">40</div>
</td>
</table>
</td>
</table>
</body>
</html>
Related
I'm creating an application that takes elements from a web page and exports json data.
I'm selecting all parent elements with jQuery and iterating over them. But I need to sort the collection before iterating so that the json exporter has the objects in a specific order and I need to do it based on nested child's input value.
I don't want to change the actual DOM, so my attempt so far has been to convert the jQuery collection to an actual array using toArray() but I'm not sure if that makes any sense. I'm stuck trying to sort the parent elements based on a value from the nested input in this array.
Here is my failed attempt at sorting:
//select all blockWraps
let blockWraps = $('.blockWrap');
beforeSort = blockWraps;
jqueryArray = blockWraps.toArray();
//lets try to sort to storyId order
function getSorted(arrayToSort) {
return arrayToSort.sort(function (a, b) {
console.log();
var aVal = parseInt(a.children[1].children[1].children[0].children[1]),
bVal = parseInt(b.children[1].children[1].children[0].children[1]);
return aVal - bVal;
});
}
afterSort = getSorted(jqueryArray);
My current attempt is pretty terrible, since it's very prone to failure should some elements have a different amount of children.
Next I will paste in a sample element from a single parent element from the jQuery array. Let's say I have six of these kinds of elements in my array. How can I sort the six ".blockWrap" elements in memory (but not in DOM) based on the value of the input of class ".blockid"?
So here's how an entire parent element from the array looks like (there are several of these blockWrap parents in the array, but I didn't want to repeat the code unnecessarily):
<div class="blockWrap characterRoot ui-draggable ui-draggable-handle" style="left: 0px; top: 2px;"><div class="line" data-block1="id0" data-block2="id1" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(54.0234deg); width: 123.068px; top: 210.906px; left: 196.297px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id0" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="1">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the dialogue here" value="FIRST NODE" style="box-sizing: border-box;"></textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
</div>
</div><!-- end contentwrap -->
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 294.969px; left: 145.297px;"><div class="line" data-block1="id1" data-block2="id2" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(166.449deg); width: 83.6247px; top: 218.969px; left: 125.282px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id1" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="2">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the dialogue here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
</div>
</div>
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: -120.703px;"><div class="line" data-block1="id2" data-block2="id5" data-buttonindextoconnectto="2" style="position: absolute; transform: rotate(4.05637deg); width: 276.991px; top: 223.956px; left: 216px;"></div><div class="line" data-block1="id2" data-block2="id4" data-buttonindextoconnectto="1" style="position: absolute; transform: rotate(14.4028deg); width: 78.7726px; top: 223.812px; left: 184px;"></div><div class="line" data-block1="id2" data-block2="id3" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(166.449deg); width: 83.6247px; top: 218.969px; left: 151.985px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id2" class="block selected">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the question" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1">
Answers: <input class="answerNumber" type="number" min="2" max="9" value="3">
</div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
<div class="blockPlusButton disabled" data-buttonindex="1" data-acceptclicks="false">-</div><div class="blockPlusButton disabled" data-buttonindex="2" data-acceptclicks="false">-</div></div>
</div>
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: -94px;">
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id3" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="answer0">answer</option>
</select>
<textarea class="dialogue" placeholder="Type the answer option here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton" data-buttonindex="0" data-acceptclicks="true">+</div>
</div>
</div>
</div><div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: 138px;">
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id4" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="answer1">answer</option>
</select>
<textarea class="dialogue" placeholder="Type the answer option here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton" data-buttonindex="0" data-acceptclicks="true">+</div>
</div>
</div>
</div><div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: 371px;"><div class="line" data-block1="id5" data-block2="id6" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(166.449deg); width: 83.6247px; top: 212.969px; left: 122.282px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id5" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="answer2">answer</option>
</select>
<textarea class="dialogue" placeholder="Type the answer option here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
</div>
</div>
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 219.969px; left: -123.703px;">
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id6" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="4">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the dialogue here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton" data-buttonindex="0" data-acceptclicks="true">+</div>
</div>
</div>
</div></div></div></div></div>
Let me finish by saying that my whole approach to this might be unnecessarily complicated and might very well be missing something obvious.
Since the a and b passed to your sort callback function are DOM elements, you can call methods like querySelector on them.
So instead of trying to find your input by its specific "position" within the descendant structure, you can select it via its class, and then get its value:
a.querySelector('.blockid').value
EDITED: the first one was already solved but this is the project that I've been working on the one that i deleted was just a test, anyways the answer on the previous post before i edit this was solved, i applied the same solution but can't seem to be solve the problem. can someone tell me the difference why this won't work compare to the previous one, thanks :).
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="src/jquery.timepicker.min.css">
<script src="src/jquery.timepicker.min.js"></script>
</head>
<style>
#media print {
.active {
background-color: #ff0000;
}
}
.card-default {
color: #333;
background: linear-gradient(#fff,#ebebeb) repeat scroll 0 0 transparent;
font-weight: 600;
border-radius: 6px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
.signature {
border: 0;
border-bottom: 1px solid #000;
}
.active {
background-color: #ff0000;
}
input {
text-align: center;
}
</style>
<script type="text/javascript">
var total = 0;
var meal_allow_table = document.getElementsByClassName("meal_allow");
var days = [];
$(document).ready(function() {
$("table").find("input").attr("disabled", true);
$('input[name="inlineRadioOptions"]').change(function () {
$("table").find("input").removeAttr("disabled");
if ($('#pay_period_from').prop('checked')) {
$('.first-period').addClass('active');
$('.second-period').removeClass('active');
}else if ($('#pay_period_to').prop('checked')) {
$('.second-period').addClass('active');
$('.first-period').removeClass('active');
}
});
});
function printForm() {
window.print();
}
</script>
<body>
<div class="container">
<div id="accordion">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<h3>LINA GROUP OF COMPANIES</h3>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header">
<h4 class="card-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<i class="glyphicon glyphicon-search text-gold"></i>
<b>Meal and Overtime Authorization Form</b>
</a>
</h4>
</div>
<div id=hideDiv>
<form action="index.php" method="POST">
<div id="collapse1" class="collapse show">
<div class="card-body">
<div class="row">
<div class="col-md-3 col-lg-6">
<div class="form-group">
<label class="control-label">Company:</label>
<input id="inputCompany" name="company" type="text" class="form-control" />
</div>
</div>
<div class="col-md-1 col-lg-4">
<!-- <div class="form-group">
<label class="control-label">Dept/Location:</label>
<input type="text" class="form-control" />
</div> -->
</div>
</div>
<div class="row">
<!-- <div class="col-md-2 col-lg-3">
<div class="form-group">
<label class="control-label">City</label>
<input type="text" class="form-control" />
</div>
</div> -->
<div class="col-md-2 col-lg-6">
<div class="form-group">
<label class="control-label">Pay Period:</label>
<div class="row">
<div class="form-check col-lg-2"></div>
<div class="form-check col-lg-5">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="pay_period_from" value="option1">
<label class="form-check-label" for="inlineRadio1">Day 1 - 15 </label>
</div>
<div class="form-check col-lg-5">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="pay_period_to" value="option2">
<label class="form-check-label" for="inlineRadio2">Day 16 - 31 </label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button class="btn btn-success btn-lg" type="submit" name="btnSubmit" id="btnSubmit"><i class="fa fa-save"></i> Save</button>
<button class="btn btn-success btn-lg" type="submit" name="btnPrint" id="btnPrint" onclick="printForm()"><i class="fa fa-save"></i> Print</button>
<a class="btn btn-warning btn-lg" href="#" id="btnToTop"><i class="fa fa-arrow-up"></i> Top</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="div">
<table class="table" style="width:100%">
<tr>
<th colspan="2" rowspan="3" style="vertical-align: middle;" >Date</th>
<th colspan="2" style="vertical-align: middle;">OT Field</th>
<th rowspan="3" style="vertical-align: middle;">Purpose of Overtime</th>
<th rowspan="3" style="vertical-align: middle;">OT hours</th>
<th rowspan="3" style="vertical-align: middle;">Meal Allow</th>
<th rowspan="3" style="vertical-align: middle;">Boss</th>
</tr>
<tr>
<th colspan="2">() rarbk & file ()</th>
</tr>
<tr>a
<th style="max-width: 40px">From</th>
<th style="max-width: 40px">To</th>
</tr>
<tr>
<td colspan="2">December</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="width:10%" class="first-period">1</td>
<td style="width: 10%" class="second-period">16</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 250px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td style="width: 100px; table-layout: fixed; padding: 0">
<input class="meal_allow" value="0" type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 200px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
</tr>
<tr>
<td class="first-period">2</th>
<td class="second-period">17</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 250px; table-layout: fixed; padding: 0">
<input type="textarea" style="width: 100%; height: 50px;">
</td>
<td class="ot" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td style="width: 100px; table-layout: fixed; padding: 0">
<input class="meal_allow" value="0" type="text" style="width: 100%; height: 50px;">
</td>
<td class="boss" style="width: 200px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
</tr>
<tr>
<td class="total"><b>TOTAL</b></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td id="total"></td>
<td></td>
</tr>
</table>
<div style="margin-top: 15px" class="footer">
<p>Note: Pls Encircle corresponding meal allowance and always indicate covered pay period.</p>
</div>
</div>
</div>
</div>
</div>
<input type="text" id="inputMultiDate" class="form-control" placeholder="Pick the multiple dates">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
By default the majority (afaik) of browsers disable backgrounds when printing html. In chrome, after clicking the button and the print dialog appears, click on "more settings" -> "background graphics"
Add a #media rule to the CSS file
#media print {
.print-para {
background-color: #ff0000;
}
}
add this class when printing the clicking the button
$('#btnChange').click(function() {
$('body').addClass('print-para');
window.print();
});
Enable background display in the print preview settings in your browser
Print Preview > More Settings > Background Graphics
This is the table where I'm getting the list of my ToolRequests.After Clicking the Assign Button I'll be hiding The table and showing another table.
Here is my table addUser where I'm getting all the previous data specific to a particular row. Here how to get a Checkbox having Assets for Given ToolNumber
This is my Html Page.
`
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
/* padding: 15px 32px; */
text-align: center;
text-decoration: none;
display: inline-block;
/* font-size: 16px;
margin: 4px 2px; */
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
</style>
</head>
<body ng-app="myApp" ng-controller="myController7">
<div class="container-fluid">
<div class="card">
<div class="header">
<h4 class="title">UnassignedTool Requests List</h4>
<p class="category">Details of Requests for Tools</p>
</div>
<div class="content table-responsive table-full-width">
<table class="table table-striped" ng-show="table">
<thead>
<th>Order Number</th>
<th>Customer Request Number</th>
<th>Field Engineer Name</th>
<th>Tool Number</th>
<th>Tool Name</th>
<th>Tool Quantity</th>
<th>Details</th>
<th>Action1</th>
<th>Action2</th>
</thead>
<tbody>
<tr ng-repeat="request in Unassignedrequests">
<td>{{request.orderNumber}}</td>
<td>{{request.customerRequestNo}}</td>
<td>{{request.user.userName}}</td>
<td>{{request.tool.toolNumber}}</td>
<td>{{request.tool.toolName}}</td>
<td>{{request.quantity}}</td>
<td>{{request.details}}</td>
<td><button class="btn btn-info btn-fill btn-wd" ng-click="edit(request)" >Assign</button> </td>
<td><button class="btn btn-info btn-fill btn-wd" ng-click="deleteUser(user.customer_id)" >Reject</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div>
<pre>
<form ng-show="addUser">
<label> ORDER NUMBER </label> <input type="text" ng-model="request.orderNumber"> <br>
<label> CUSTOMER REQUEST NUMBER</label> <input type="text" ng-model="request.customerRequestNo"> <br>
<label> FIELD ENGINEER NAME</label> <input type="text" ng-model="request.user.userName"> <br>
<label> TOOL NUMBER</label> <input type="text" ng-model="request.tool.toolNumber"> <br>
<label> TOOL NAME</label> <input type="text" ng-model="request.tool.toolName"> <br>
<label> QUANTITY</label> <input type="text" ng-model="request.quantity"><br>
<label> DETAILS</label> <input type="text" ng-model="request.details"> <br>
<label> REQUIRED FROM DATE</label> <input type="date" id="myDate">
<!-- <button ng-click="insertUser(user)" ng-show="insert">insert</button> -->
<button ng-click="updateUser(request)" ng-show="edit" > ✎submit</button>
</form>
</pre>
</div>
</body>
</html>
`
This is My Angular Controller
myApp.controller("myController7", function($scope, $http, $state,UnassignedRequests) {
$scope.table=true;
$scope.addUser=false;
UnassignedRequests.getAllUnassignedRequests().then(function(response) {
if (response != undefined) {
$scope.Unassignedrequests = response.data;
}
});
$scope.edit=function(request){
$scope.table=false;
$scope.addUser=true;
$scope.update=true;
$scope.insert=false;
$scope.request=request;
} ; });
This is My Angular Service
myApp.factory('UnassignedRequests',function($http) {
return {
getAllUnassignedRequests : function() {
return $http
.get('/Tool_Management/WareHouseManager/getAllUnassignedRequests',
{
'Content-Type' : 'application/json'
}).then(function(response) {
return response;
});
}
}});
How to get the Assets for Selected ToolNumber
I'm trying to pass values from a table to a modal window, but I'm not getting it
I tried something from jQuery, but I do not know what I might be doing wrong. I'll post the code, which is working, but no changes I made In the attempts.
When you click change, I would like to take the values and move to the dialog.
<c:if test="${fn:length(lista) > 0 }">
<table class="table table-hover">
<tr>
<th >Código</th>
<th>Nome</th>
<th>Descrição</th>
<th>Medida</th>
<th>Fornecedor</th>
<th>Quantidade Mínima</th>
<th>Quantidade Máxima</th>
<th>Estoque</th>
<th>Categoria</th>
<th>Preço</th>
<th></th>
</tr>
<c:forEach items="${lista }" var="mat">
<tr>
<td>${mat.codigo }</td>
<td>${mat.nome }</td>
<td>${mat.descricao }</td>
<td>${mat.medida }</td>
<td>${mat.fornecedor }</td>
<td>${mat.qtd_Min }</td>
<td>${mat.qtd_Max }</td>
<td>${mat.estoque }</td>
<td>${mat.categoria.categoria }</td>
<td>${mat.preco }</td>
<td>Alterar
<a href="remover.html?id_material=${mat.id_material }"class="btn btn-xs btn-danger" >Remover</a>
</td>
</tr>
</c:forEach>
</table>
</c:if>
Panel to change
<div id="DialogAlterarMaterial" class="modal fade"
aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
tabindex="-1" style="display: none;">
<div class="modal-dialog" style="width: 800px;">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" data-dismiss="modal"
type="button">×</button>
<h4 class="modal-title">Cadastro de Materiais</h4>
</div>
<div class="modal-body" style="min-height: 500px;">
<form action="alterar.html" method="post">
<div class="form-group" style="width: 80px; float: left;margin-top: 0%">
<label for="codigo">Código</label> <input name="codigo"
class="form-control" type="text" value="${mat.codigo }">
</div>
<div class="form-group"
style="width: 300px; float: left; margin-top: 9%; margin-left: -10.5%">
<label for="nome">Nome</label> <input name="nome"
class="form-control" type="text">
</div>
<div class="form-group"
style="width: 430px; float: left; margin-left: 2%; margin-top: 9%;">
<label for="descricao">Descrição</label> <input
name="descricao" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 130px; float: left; margin-left: 0%; margin-top: 0%">
<label for="unimed">Unidade de Medida</label> <input
name="unimed" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 155px; float: left; margin-left: 2%;margin-top: 0%">
<label for="preco">Preço</label> <input name="preco"
class="form-control" type="text">
</div>
<div class="form-group"
style="width: 430px; float: left; margin-left: 2%;margin-top: 0%">
<label for="fornecedor">Fornecedor</label> <input
name="fornecedor" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 85px; float: left; margin-left: 0%;">
<label for="qtdMin">Qtd. Mínima</label> <input
name="qtd_Min" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 85px; float: left; margin-left: 2%;">
<label for="qtdMax">Qtd. Máxima</label> <input
name="qtd_Max" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 85px; float: left; margin-left: 2%;">
<label for="estoque">Estoque</label> <input
name="estoque" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 130px; float: left; margin-left: -38%;margin-top: 10%;">
<label for="categoria">Categoria</label> <select
name="categoria" class="form-control" type="text" onchange='CheckCat(this.value);'>
<option selected disabled hidden>Categoria</option>
<c:forEach items="${cBean.listarCategoria}" var="cat">
<option value="${cat.categoria }">${cat.categoria }</option>
</c:forEach>
</select>
</div>
<div class="form-group"
style="width: 130px; float: left; margin-left: -19%;display: none; margin-top: 10%" id="Outros">
<label for="catOutros">Outros</label> <input name="catOutros"
class="form-control" type="text" >
</div>
<div style="width: 30px; margin-top: 25%;float: right;margin-right: 8%">
<button class="btn btn-primary" type="submit">Cadastar</button>
</div>
</form>
</div>
</div>
</div>
</div>
You can add a click event handler on Alterar.
When click "Alterar" button, use jquery to find data in tds, then set data to modal dialog.
snippet for reference:
var $tds = $(this).parent().siblings();
var codigo = $tds.eq(0).html();
...
I'm making a Jquery popup / dialog and I've manged to position it on the page at a click so that the div renders over the other elements but the page is transparent and when I drag it, I can drag it upwards and downwards but when I drag it sideways it resizes instead of moves. can you tell me what I could do to resolve these 2 issues?
It looks like this
My popup HTML is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
<tr>
<td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2>
</td>
<td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td>
</tr>
</table>
<br><br>
<h2 class="pusher">Sök person/företag</h2>
<div id="Vsok">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa sökformulär</span>
</div>
</div>
<div id="sokF">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">Dölj sökformulär</span>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80">
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend>
<div class="fl30"> Förnamn:</div>
<div class="fl50"><input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Efternamn:</div>
<div class="fl50"><input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset>
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend>
<div class="fl30"> Företag:</div>
<div class="fl50"><input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Organisationsnummer:</div>
<div class="fl50"><input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset> <br><br>
<!-- <div class="fl30">Attention, c/o etc.:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postadress:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postnummer:</div>
<div class="fl50"><input type="text" size="30"></div>
<div class="clear"></div> -->
<div class="fl30">Postort:</div>
<div class="fl50"><input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">Land:</div>
<div class="fl50"><input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">---------------------------------</option>
</select></div>
<div class="clear"></div>
<!-- <div class="fl30">Region:</div>
<div class="fl20"><select name="">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">-----------------------------------------------</option>
</select></div>
<div class="clear"></div>
<div class="fl30">Tel:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">Fax:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">E-post:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
-->
<div class="fl50"> </div>
<div class="fl5"><input type="button" value="Rensa"></div>
<div class="fl10"><input type="button" value=" Sök " onclick="javascript:doSubmit('Namnsokning', 'search')"></div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td><h3>Sökresultat:</h3></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">En massa text <span class="link">Hjälp!</span> </td>
</tr>
<tr>
<td><input type="button" value="Visa alla"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="smallb">
<td>Antal ärenden: 527</td>
<td> </td>
<td>Visa ärenden: << 1-200 201-400 401-527 >> </td>
<td> </td>
</tr>
</table>
<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id">
<tr>
<th class="thkant">Förnamn</th>
<th class="thkant">Efternamn</th>
<th class="thkant">Adress</th>
<th class="thkant">Postnr</th>
<th class="thkant">Postort</th>
<th class="thkant">Region</th>
<th class="thkant">Land</th>
<th class="thkant">Telefonnummer</th>
</tr>
</table>
<div id="bottomV">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td>
</tr>
</table>
</div>
<div id="bottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" value="Ändra i register" style="width:150px;"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td>
</tr>
</table>
</body>
</html>
The CSS is
.newpopup {
position: absolute;
top:50%;
left:50%;
}
The Javascript is
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
//popup.html('<p>Where is pancakes house?</p>');
//popup.show('fast');
$.get('/PandoraArendeWeb/popup.jsp', function(data) {
popup.html(data);
popup.show('fast');
});
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
Please tell me how to
1) make the popup not transparent
2) make the popup sideways draggable
The HTML that actually activates the popup is trivial:
<div class='newpopup'>
</div>
<button>popup</button>
Thank you
Ok I created simple test case using jsfiddle here, i dont think theres anything wrong with your jquery but i believe it the ajax call so to test this as on your server to make sure your ajax call is working (as i cant), if your ajax call falls it will not popup. in the test case it will alert "Error".
HTML:
<button>popup</button>
<div class='newpopup'>
</div>
jQuery:
function popup() {
alert('opening popup');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
//popup.html('<p>Where is pancakes house?</p>');
//popup.show('fast');
//Comment me out and use the version below to show working
$.ajax({url:'/PandoraArendeWeb/popup.jsp',
error: function() {
alert('Error');
},
success: function(data) {
popup.html("test");
popup.show('fast');
}
}
);
/*
popup.html("test");
popup.show('fast');
*/
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
CSS:
.newpopup {
position: absolute;
top:50%;
left:50%;
background-color:#ff0; //Yellow
}
EDIT
Just remembered try commenting out the ajax and use the bit below. the popup shows and you can drag it :)