Make a popover over a table - javascript

I want to make a popover that covers a table
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.popover {
width: 2000px;
}
.popover-table th, td {
padding: 0px 15px;
white-space:nowrap;
}
</style>
</head>
<body>
4
<div id="popover4-html" style="display: none">
abcdefghi:
<table class="popover-table">
<tr></tr>
<tr>
<th>alongtitleisverylong</th>
<th>linked to event3</th>
<th>100 lines</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</div>
<script>
$('[data-toggle="popover4"]').popover({
html: true,
content: function() {
return $("#popover4-html").html()
}});
</script>
</body>
</html>
JSBin
There are two problems:
1) the width of the popover cannot cover the width of the table
2) I don't want to bold the first row of the table, but I don't know how to do it
Could anyone help?


You can use the following code
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.popover {
width: 2000px;
max-width:50%
}
.popover-table th, td {
padding: 0px 15px;
white-space:nowrap;
}
</style>
</head>
<body>
4
<div id="popover4-html" style="display: none">
abcdefghi:
<table class="popover-table">
<tr></tr>
<tr>
<td>alongtitleisverylong</td>
<td>linked to event3</td>
<td>100 lines</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</div>
<script>
$('[data-toggle="popover4"]').popover({
html: true,
content: function() {
return $("#popover4-html").html();
}});
</script>
</body>
</html>
The <th> tag will always bold the text within it so i have replaced it with <td> tag.
The max-width in the popover class has been given as 276px in the bootstrap.css so i have overridden that by replacing it with max-width:50%.

Related

Core scaling in javascript equal to Excel

I need a logic that handles color gamut for any color.
I started by trying to work with the color red. I have a date column and the older the date, the redder the color needs to be.
So that's basically it, the date of a day ago for example would have a lighter red and as the time passes it gets darker.
This was my attempt:
<!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.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div id="id">
<div class="table-responsive">
<table class="table table-striped w-auto">
<thead>
<tr>
<th>Due Data</th>
</tr>
</thead>
<tbody>
<tr>
<td v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-08')+',0,0)'">2022-07-08</td>
</tr>
<tr>
<td v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-09')+',0,0)'">2022-07-09</td>
</tr>
<tr>
<td v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-10')+',0,0)'">2022-07-10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
var myApp = new Vue({
el: '#id',
data() {
return {
}
},
methods: {
getLateDays(date) {
return Math.ceil((new Date().setHours(0, 0, 0, 0) - new Date(date + ' 00:00:00').setHours(0, 0, 0, 0)) / (1000 * 60 * 60 * 24));
}
},
});
</script>
</html>

Bootstrap-table export pdf - header is not included in the output

i'm using bootstrap-table plugin with export option, when i download content in pdf format, i've a row and colspan header, in which main header is missing in the pdf output, below is my code
var $table = $('#table')
function buildTable($el, cells, rows) {
var columns = []
var data = []
var classes = $('.toolbar input:checked').next().text()
$el.bootstrapTable('destroy').bootstrapTable({
columns: columns,
data: data,
exportDataType: "all",
exportTypes: ['csv', 'excel', 'pdf'],
exportOptions: {
fileName: 'Data Export -' + n,
jspdf: {
orientation: 'l',
format: 'a4',
autotable: {
tableWidth: 'auto'
}
}
},
search: true,
stickyHeader: true,
stickyHeaderOffsetLeft: '0',
stickyHeaderOffsetRight: '0',
theadClasses: classes,
pageSize: 25,
pagination: false
})
}
$(function() {
$('.toolbar input').change(function() {
buildTable($table, 0, 0)
})
buildTable($table, 0, 0)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/sticky-header/bootstrap-table-sticky-header.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript" src="libs/pdfmake/pdfmake.min.js"></script>
<script type="text/javascript" src="libs/pdfmake/vfs_fonts.js"></script>
<script type="text/javascript" src="libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="tableExport.min.js"></script>
<style>
table td {
overflow: hidden;
}
table {
width: 600px;
table-layout: fixed;
}
td {
word-wrap: break-word;
}
</style>
</head>
<body>
<table class="table table--cells table--comfy table--hover table--striped table--dark" data-page-list="[50, 100, 150, ALL]" data-toolbar="#toolbar" id="table" data-show-columns="true" data-search="true" data-export-header="true" data-show-export="true"
style="text-align:center; ">
<thead name="theadClasses" class="bg-dark text-white">
<tr>
<th style="text-align:center" rowspan=2>Header 1</th>
<th style="text-align:center" rowspan=2>Header 2</th>
<th style="text-align:center" rowspan=2>Header 3</th>
<th style="text-align:center" colspan=3>Colspan Header</th>
</tr>
<tr>
<th style="text-align:center">Sub_header 1 </th>
<th style="text-align:center">Sub_header 2 </th>
<th style="text-align:center">Sub_header 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" rowspan=2>some_data</td>
<td align="center" rowspan=2>some_data</td>
<td align="center" rowspan=2>some_data</td>
<td align="center">some_data</td>
<td align="center">some_data</td>
<td align="center">some_data</td>
</tr>
<tr>
<td align="center">some_data </td>
<td align="center">some_data </td>
<td align="center">some_data</td>
</tr>
</tbody>
</table>
</body>
</html>
Table image
PDF output image
Export option plugin - https://github.com/hhurz/tableExport.jquery.plugin
Please help me to fix this

"'toggleRow' is not defined" in javascript. My function is not found or being 'defined' as the error message sais

I have a function called "toggleRow" but when I am runing the application it seems like the function is not found when calling on it in my tag. What the function is supposed to do is to expand and collapse a row in a table whenever I click on that specific row. In the example below I have only showed one of the rows.
I have tried to Writing the function and the Calling-on-the-function part a few times now but I Think I am missing something...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<body>
<table>
<tr onclick="toggleRow('hidden_row1')"><td>Ankit</td><td>25</td><td>60000</td><td>Com
puter Programmer</td></tr>
<tr id="hidden_row1" class="hidden_row">
<td colspan=4>Ankit is 25 years old and he is a programmer</td>
</tr>
</table>
<script type="text/javascript">
function toggleRow(row)
{
$("#" + row).toggle();
}
</script>
</body>

declare your JavaScript code at the end of your HTML file just before finishing your body
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Demo</title>
<meta name="author" content="Santhosh Thottingal">
<!-- Libs -->
</head>
<body>
<table>
<tr onclick="toggleRow('hidden_row1')"><td>Ankit</td><td>25</td><td>60000</td><td>Com
puter Programmer</td></tr>
<tr id="hidden_row1" class="hidden_row">
<td colspan=4>Ankit is 25 years old and he is a programmer</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function toggleRow(row)
{
$("#" + row).toggle();
}
</script>
</body>
</html>

How to make 'Swipe div tag' in js / jQuery

I'm looking for new datetime picker look like datetime picker on android. I searched on google and found it.
https://nehakadam.github.io/AnyPicker/
But I don't know how it work. I want to make simple example like that. Anyone help me, please.

There is some examples in their GitHub repository in the demo folder.
<!DOCTYPE html>
<html>
<head>
<title>Time - AnyPicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="msapplication-tap-highlight" content="no" />
<style type="text/css">
body {
margin: 0px;
}
.input-cont {
width: 300px;
padding: 20px;
}
input {
width: 200px;
height: 30px;
padding: 3px 10px;
margin-bottom: 16px;
}
</style>
<link rel="stylesheet" type="text/css" href="../src/anypicker-font.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-ios.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-android.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-windows.css" />
<script type="text/javascript" src="vendors/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../src/anypicker.js"></script>
<script type="text/javascript">
$("#ip-android").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "hh:mm aa",
theme: "Android"
});
});
</script>
</head>
<body>
<table class="input-cont">
<tr>
<td>Time : (Android)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-android" readonly>
</td>
</tr>
</table>
</body>
</html>

how to move dojo datagrid after a hidden control is shown

1 - a simple form that contains a select (let's call it select1) and a dojo datagrid below it.
2 - when you change the value of select1 it toggles the visibility of another select, let's call it select2, located between select1 and datagrid1
3 - when select2 appears, datagrid1 doesn't move to make room for it. I need that to happen
PLEASE NOTE: due to something with arcgis.com, sometimes the snippet does not run at first click.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
,
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require(
[
"dojo/parser",
'dijit/layout/BorderContainer',
"dojo/domReady!"
],
function(parser, BorderContainer) {
parser.parse();
var layout = [{
name: "f1",
field: "f1",
width: '165px',
noresize: 'true'
}, {
name: "f2",
field: "f2",
width: '125px',
noresize: 'true'
}, {
name: "id",
field: "id",
width: '40px',
noresize: 'true'
}, ];
initGrid(layout, "_myGrid", "myGrid", "id");
});
function initGrid(layout, gridId, divId, itemId) {
require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
var grid = new DataGrid({
id: gridId,
store: new ItemFileWriteStore({
data: {
items: []
}
}),
structure: layout,
rowSelector: '0px'
});
grid.placeAt(divId);
grid.startup();
});
}
function changeSelect() {
if (document.getElementById("secondaryTable").style.display == 'none') {
document.getElementById("secondaryTable").style.display = "block";
} else {
document.getElementById("secondaryTable").style.display = "none";
}
}
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:30%;">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<table>
<tr>
<td>
<select onchange="changeSelect()">
<option value="op1" selected="selected">op1</option>
<option value="op2">op2</option>
</select>
</td>
</tr>
</table>
<div>
<table id="secondaryTable" style="display:none;">
<tr>
<td>xxxx</td>
<td>
<select></select>
</td>
</tr>
</table>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="myGrid" style="height:76%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

What you need is to resize the BorderContainer after changing the content height.
So you need to call borderContainer.resize();
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
,
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require(
[
"dojo/parser",
'dijit/layout/BorderContainer',
"dojo/domReady!"
],
function(parser, BorderContainer) {
parser.parse();
var layout = [{
name: "f1",
field: "f1",
width: '165px',
noresize: 'true'
}, {
name: "f2",
field: "f2",
width: '125px',
noresize: 'true'
}, {
name: "id",
field: "id",
width: '40px',
noresize: 'true'
}, ];
initGrid(layout, "_myGrid", "myGrid", "id");
});
function initGrid(layout, gridId, divId, itemId) {
require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
var grid = new DataGrid({
id: gridId,
store: new ItemFileWriteStore({
data: {
items: []
}
}),
structure: layout,
rowSelector: '0px'
});
grid.placeAt(divId);
grid.startup();
});
}
function changeSelect() {
if (document.getElementById("secondaryTable").style.display == 'none') {
document.getElementById("secondaryTable").style.display = "block";
} else {
document.getElementById("secondaryTable").style.display = "none";
}
borderContainer.resize();
}
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:30%;">
<div data-dojo-id="borderContainer" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<table>
<tr>
<td>
<select onchange="changeSelect()">
<option value="op1" selected="selected">op1</option>
<option value="op2">op2</option>
</select>
</td>
</tr>
</table>
<div>
<table id="secondaryTable" style="display:none;">
<tr>
<td>xxxx</td>
<td>
<select></select>
</td>
</tr>
</table>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="myGrid" style="height:76%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Categories