I have a Google Sheet with about six hundred rows of data. I want to be able to display and filter this spreadsheet as an HTML table and have it displayed to a Google Site. I have found this code online along with the 'Display' HTML which I have used.
However when I publish as a web app, I am only seeing the outline of my table but with no data in the rows. The outline of my table looks correct and contains the search filters I need, however there is no data appearing in the table.
Is there an issue with the code below?
function myFunction() {
}function doGet(e){
var SHEET_ID=e.parameter.sheet_id
var html=HtmlService.createTemplateFromFile('Display')
var ss=SpreadsheetApp.openById('My Google Sheet ID')
var sheet=ss.getSheetByName('Sheet2')
html.data=getRowsData(sheet,sheet.getDataRange(),1)
return html.evaluate().setTitle('Log')
Logger.log(getRowsData(sheet,sheet.getDataRange(),1))
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent()
}
function getRowsData(sheet, range, columnHeadersRowIndex){
columnHeadersRowIndex = columnHeadersRowIndex || range.getRowIndex()-1;
var numColumns = range.getEndColumn() - range.getColumn() + 1;
var headersRange = sheet.getRange(columnHeadersRowIndex, range.getColumn(), 1,
numColumns);
var headers = headersRange.getValues()[0];
return getObjects(range.getValues(),normalizeHeaders(headers));
}
function getObjects(data, keys) {
var objects = [];
for (var i = 0; i < data.length; ++i) {
var object = {};
var hasData = false;
for (var j = 0; j < data[i].length; ++j) {
var cellData = data[i][j];
if (isCellEmpty(cellData)) {
continue;
}
object[keys[j]] = cellData;
hasData = true;
}
if (hasData) {
objects.push(object);
}
}
return objects;
}
function normalizeHeaders(headers) {
var keys = [];
for (var i = 0; i < headers.length; ++i) {
var key = normalizeHeader(headers[i]);
if (key.length > 0) {
keys.push(key);
}
}
return keys;
}
function normalizeHeader(header) {
var key ='';
var upperCase = false;
for (var i = 0; i < header.length; ++i) {
var letter = header[i];
if (letter == '' && key.length > 0) {
upperCase = true;
continue;
}
if (!isAlnum(letter)) {
continue;
}
if (key.length == 0 && isDigit(letter)) {
continue; // first character must be a letter
}
if (upperCase) {
upperCase = false;
key += letter.toUpperCase();
} else {
key += letter.toLowerCase();
}
}
return key;
}
function isAlnum(char) {
return char >= 'A' && char <= 'Z' ||
char >= 'a' && char <= 'z' ||
isDigit(char);
}
function isDigit(char) {
return char >= '0' && char <= '9';
}
function isCellEmpty(cellData) {
return typeof(cellData) == 'string' && cellData == '';
}
Display.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!=include('Style')?>
</head>
<body>
<p></p>
<table id="dataTable" border="1" cellpadding="2" cellspacing="0">
<th width="10%">Employee Number</th>
<th width="15%">Name</th>
<th width="15%">Surname</th>
<th width="15%">EmpNo</th>
<th width="10%">Title</th>
<th width="15%">Div</th>
<th width="10%">Office</th>
<th width="10%">Form</th>
<tr>
<td bgcolor="#eb8c00" align="center"><input type="text"
id="EmployeeNumberSearchBox" onkeyup="SearchFunc()"
placeholder="EmployeeNumber..." width="30"></td>
<td bgcolor="#eb8c00" align="center"><input type="text"
id="NameSearchBox"
onkeyup="SearchFunc()" placeholder="Name..." width="35"></td>
<td bgcolor="#eb8c00" align="center"><input type="text" id="SurnameSearchBox"
onkeyup="SearchFunc()" placeholder="Surname..." width="35"></td>
<td bgcolor="#eb8c00" align="center"><input type="text" id="EmpNoSearchBox"
onkeyup="SearchFunc()" placeholder="EmpNo..." width="35"></td>
<td bgcolor="#eb8c00" align="center"><input type="text" id="TitleSearchBox"
onkeyup="SearchFunc()" placeholder="Title..." width="35"></td>
<td bgcolor="#eb8c00" align="center">
<select id="Div" onchange="SearchFunc();">
<option value="">Div...</option>
<option value="DOO">DOO</option>
<option value="PIT">PIT</option>
<option value="FID">FID</option>
<option value="FIS">FIS</option>
<option value="General">General</option>
<option value="Other">Other</option>
<option value="IS">IS</option>
<option value="SAS">SAS</option>
</select>
</td>
<td bgcolor="#eb8c00" align="center">
<select id="Office" onchange="SearchFunc();">
<option value="">Office...</option>
<option value="London">London</option>
<option value="New York">New York</option>
<option value="Berlin">Berlin</option>
<option value="Eindhoven">Eindhoven</option>
<option value="Lille">Lille</option>
<option value="Vienna">Vienna</option>
<option value="Copenhagen">Copenhagen</option>
</select>
</td>
<td bgcolor="#eb8c00" align="center"></td>
</tr>
<? for (var i=1;i<data.length;i++) {?>
<tr style="height:15px;">
<td align="center"><?=data[i]['Employee Number']?> </td>
<td align="left"><?=data[i]['Div']?> </td>
<td align="center"><?=data[i]['EmpNo']?> </td>
<td align="center"><?=data[i]['Name']?> </td>
<td align="center"><?=data[i]['Surname']?> </td>
<td align="center"><?=data[i]['Title']?> </td>
<td align="center"><?=data[i]['Office']?> </td>
<td align="center">
<a href="<?=data[i]['=ARRAYFORMULA(HYPERLINK(K1:K616, "Click here to complete
Access Form"))']?>" target="_blank"><button>Open Form</button>
</a>
</td>
</tr>
<? } ?>
</table>
</body>
</html>
Style.Html
<style>
input[type=text] {
font-size: 12px; /* Increase font-size */
padding: 12px 12px 12px 12px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 3px; /* Add some space below the input */
margin-top: 2px;
}
#EmployeeNumberSearchBox, #EmpNoSearchBox, #NameSearchBox,
#SurnameSearchBox, #OfficeSearchBox, #TitleSearchBox {
text-align:center;
width:50%;
}
#DivSearchBox{
text-align:center;
width:85%;
}
#dataTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 14px; /* Increase font-size */
table-layout: fixed;
}
#dataTable th{
text-align: center; /* Centre-align text */
background-color: #d04a02;
color: #ffffff
}
#dataTable td {
padding: 3px 5px 2px 10px;
}
#dataTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
button {
background-color: #464646;
border:none;
padding: 3px 5px 2px;
text-align: center;
display: inline-block;
font-size: 14px;
font-family: Helvetica Neue;
font-style: Bold;
color: white;
}
button:hover {
background-color: #eb8c00; /* Green */
color: white;
cursor:pointer;
}
select {
border: 0;
width: 100%;
height:35px;
text-align-last:center;
}
</style>
Java.html
<script>
function SearchFunc() {
var EmployeeNumberInput, DivInput, EmpNoInput, NameInput,
SurnameInput, OfficeInput, TitleInput,
EmployeeNumberFilter, DivFilter, EmpNoFilter, NameFilter,
SurnameFilter, OfficeFilter, TitleFilter,
table, tr, i,
EmployeeNumberValue, DivValue, EmpNoValue, NameValue,
SurnameValue, OfficeValue, TitleValue;
EmployeeNumberInput = document.getElementById("Employee Number");
DivInput = document.getElementById("Div");
EmpNoInput = document.getElementById("EmpNo");
NameInput = document.getElementById("Name");
SurnameInput = document.getElementById("Surname");
TitleInput = document.getElementById("Title");
OfficeInput = document.getElementById("Office");
EmployeeNumberFilter = EmployeeNumberInput.value.toUpperCase();
DivFilter = DivInput.value.toUpperCase();
EmpNoFilter = EmpNoInput.value.toUpperCase();
NameFilter = NameInput.value.toUpperCase();
SurnameFilter = SurnameInput.value.toUpperCase();
TitleFilter = TitleInput.value.toUpperCase();
OfficeFilter = OfficeInput.value.toUpperCase();
table = document.getElementById("dataTable");
tr = table.getElementsByTagName("tr");
for (i = 2; i < tr.length; i++) {
EmployeeNumberValue = tr[i].getElementsByTagName("td")[0];
DivValue = tr[i].getElementsByTagName("td")[1];
EmpNoValue = tr[i].getElementsByTagName("td")[2];
NameValue = tr[i].getElementsByTagName("td")[3];
SurnameValue = tr[i].getElementsByTagName("td")[4];
TitleValue = tr[i].getElementsByTagName("td")[5];
OfficeValue = tr[i].getElementsByTagName("td")[6];
if (EmployeeNumberValue) {
if (EmployeeNumberValue.textContent.toUpperCase().indexOf
(EmployeeNumberFilter) > -1
&&
DivValue.textContent.toUpperCase().indexOf(DivFilter) > -1
&&
EmpNoValue.textContent.toUpperCase().indexOf(EmpNoFilter) > -1
&&
NameValue.textContent.toUpperCase().indexOf(NameFilter) >
-1
&&
SurnameValue.textContent.toUpperCase().indexOf(SurnameFilter) > -1
&&
TitleValue.textContent.toUpperCase().indexOf(TitleFilter) > -1)
&&
OfficeValue.textContent.toUpperCase().indexOf(OfficeFilter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("dataTable");
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 2; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
// Check if the two rows should switch place:
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
</script>
Instead of <?= use <?!=
From https://developers.google.com/apps-script/guides/html/templates#force-printing_scriptlets
Force-printing scriptlets
Force-printing scriptlets, which use the syntax <?!= ... ?>, are like printing scriptlets except that they avoid contextual escaping.
Contextual escaping is important if your script allows untrusted user input. By contrast, you’ll need to force-print if your scriptlet’s output intentionally contains HTML or scripts that you want to insert exactly as specified.
As a general rule, use printing scriptlets rather than force-printing scriptlets unless you know that you need to print HTML or JavaScript unchanged.
Related
How to use scriptlets in HTMLOutput in Google Apps Script
Related
Im trying to apply some conditional formatting on a html script. I currently have it 4 different tables, with the first 2 stacked on top of each other, and the bottom two side by side at the bottom. I have a color conditional formatting to where for the first two tables, it is only applied to the last 2 columns. For the last table, I have it applied for all but the first column. I am trying to apply the conditional formatting on the last table (all but first column), but it keeps applying the formatting of the first 2 columns.
<html>
<head>
<script>
setTimeout(function(){
location.reload();
}, 10000);
function changeColor() {
var tables = document.querySelectorAll("table");
for (var i = 0; i < tables.length - 2; i++) {
var rows = tables[i].querySelectorAll("tr");
for (var j = 1; j < rows.length; j++) { // start from the second row (index 1)
var cells = rows[j].querySelectorAll("td:nth-child(n+5)");
for (var k = 0; k < cells.length; k++) {
if (cells[k].innerHTML !== "") {
if (cells[k].innerHTML > 0) {
cells[k].style.backgroundColor = "rgba(144, 238, 144, 0.5)";
} else {
cells[k].style.backgroundColor = "rgba(240, 128, 128, 0.5)";
}
}
}
}
}
var rows = tables[tables.length - 2].querySelectorAll("tr");
for (var j = 1; j < rows.length; j++) { // start from the second row (index 1)
var cells = rows[j].querySelectorAll("td");
for (var k = 0; k < cells.length; k++) {
if (k === 0) continue; // skip the first column
if (cells[k].innerHTML !== "") {
if (cells[k].innerHTML > 0) {
cells[k].style.backgroundColor = "rgba(144, 238, 144, 0.5)";
} else {
cells[k].style.backgroundColor = "rgba(240, 128, 128, 0.5)";
}
}
}
}
var rows = tables[tables.length - 1].querySelectorAll("tr");
for (var j = 1; j < rows.length; j++) { // start from the second row (index 1)
var cells = rows[j].querySelectorAll("td");
for (var k = 0; k < cells.length; k++) {
if (k === 0) continue; // skip the first column
if (cells[k].innerHTML !== "") {
if (cells[k].innerHTML > 0) {
cells[k].style.backgroundColor = "rgba(144, 238, 144, 0.5)";
} else {
cells[k].style.backgroundColor = "rgba(240, 128, 128, 0.5)";
}
}
}
}
}
window.onload = changeColor;
</script>
<style>
body {
background-color: #333;
color: white;
}
table {
display: block;
border-collapse: collapse;
}
td, th {
border: 1px solid white;
padding: 8px;
}
th {
background-color: #666
font-size: 12px;
font-weight: bold;
}
td {
text-align: center;
font-size: 10px;
}
</style>
</head>
</head>
<body>
<table>
{{ df1_html }}
</table>
<br><br>
<table>
{{ df2_html }}
</table>
<br><br>
<div style="display: flex;">
<div style="flex: 1; padding-right: 10px;">
<div class="table-title">ISONE HDD Delta</div>
<table>
{{ df3_html }}
</table>
</div>
<div style="flex: 1; padding-left: 10px;">
<div class="table-title">NYISO HDD Delta</div>
<table>
{{ df4_html }}
</table>
</div>
</div>
</body>
</html>```
I have tried adjusting the boundaries on the formatting, but nothing seems to change it. I am expecting table 3 and 4 to have the color conditional formatting applied to all but the first column.
I've a table inside a div inside the main.
all of this have width = 100% but when i make the window smaller just the div ant the main gets smaller but the table dosent resize. all other elements below the table change position and size and starts lay over it. the table has 25 records and if the window is full-size everything matches perfect.
The div im talkin about has the id home
The html:
<DOCTYPE! html>
<html>
<head>
<meta charset="UTF-8">
<title>Admin Panel | Please Login</title>
<link href='../css/admin.css' type='text/css' rel='stylesheet'>
<meta http-equiv="refresh" content="60">
</head>
<body>
<main>
<div id='container'>
<img src="../img/ipw_quer_rgb.jpg" alt="IPW Logo" id="logo" width="15%">
<header>
<ul id='menu'>
<div id="links">
<li>Home</li>
<li>Schüler verwalten</li>
<li>History</li>
</div>
</ul>
</header>
<div id="home">
<h2 id="date"></h2>
<table id="table">
</table>
</div>
<div id="dropdown" class="dropdown">
<select id="select">
<option value="Nothing">Nichts ausgewählt</option>
<option value="Extern">Extern</option>
<option value="Termin">Termin</option>
<option value="Schule">Schule</option>
</select>
</div>
<div id="legend" class="legend">
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#D3D3D3;" />
</svg>
<a>Extern</a>
<br>
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#FFAEB9;" />
</svg>
<a>Termin</a>
<br>
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#FFFF00;" />
</svg>
<a>Schule</a>
<br>
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#00FF00;" />
</svg>
<a>Visiert</a>
<br>
<button id="edit">Editieren</button>
</div>
</div>
</main>
the css:
*{
margin: 0;
padding: 0;
font-family: monospace;
box-sizing: border-box;
}
main{
height: 100%;
width: 100%;
}
label{
font: 13px Helvetica, Arial, sans-serif;
}
html, body{
background-color: #006975;
overflow-y:auto;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
h3{
margin-right:50%;
}
table{
width:100%;
height:calc(100% -50px);
}
ul {
width:100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #006975;
}
li {
width:25%;
float: left;
}
h1{
text-align:center;
}
li a {
display: block;
color: white;
font-size: 120%;
text-align: center;
padding: 14px 16px;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
color: #006975;
background-color: #fff;
}
button:hover{
color:#fff;
background-color:#84afb8;
}
#container{
position:absolute;
margin: 4% 4% 4% 4%;
padding: 2%;
width: 90%;
height: 90%;
background-color: #fff;
}
#home{
height:60%;
}
#dropdown{
width:100%;
height:2%;
visibility:hidden;
}
.cell {
height: 4%;
width:10%;
text-align: center;
background-color: #D3D3D3;
}
.cell.on {
height: 4%;
width: 10%;
background-color: #00FF00;
}
.cell.les {
height: 4%;
width: 10%;
background-color: #FFFF00;
}
.cell.term {
height: 4%;
width: 10%;
background-color: #FFAEB9;
}
.cell.ext{
height: 4%;
width: 10%;
background-color: #D3D3D3;
}
.cell.spacer {
height: 4%;
width: 10%;
background-color:white;
}
.name {
border: 1px solid black;
}
if you also need the javascript please ask
EDIT:
javascript:
getDataUser('logGLAUSB');
var names = ["Zebra","Benj", "Nico", "Timon","Miro", "Leo"];
var longpresstimer = null;
getData();
window.addEventListener('click', function(){
});
window.addEventListener('load', function () {
var clickcount = 0;
var singleClickTimer;
document.getElementById('table').addEventListener('click', function (event) {
clickcount++;
if(clickcount==1){
if(event.target.tagName != "INPUT" && event.target.classList != 'cell spacer'){
singleClickTimer = setTimeout(function() {
clickcount = 0;
var cell = event.target;
var selected = getSelected();
if(selected == 3){
cell.classList.remove("ext");
cell.classList.remove("term");
cell.classList.remove("les");
cell.classList.add("on");
}else{
cell.classList.remove("ext");
cell.classList.remove("term");
cell.classList.remove("les");
cell.classList.remove("on");
switch(selected){
case 0: cell.classList.add("ext"); break;
case 1: cell.classList.add("les"); break;
case 2: cell.classList.add("term"); break;
}
}
var x = "get";
x += getString(event.target.parentNode.cells[0].childNodes[0].innerHTML);
getData(x);
}, 300);
}
}else if (clickcount == 2){
if(event.target.classList != "name"){
clearTimeout(singleClickTimer);
clickcount = 0;
toInput(event.target);
}
}
});
});
document.getElementById("edit").addEventListener('click', function(){
var legend = document.getElementById("legend");
var dropdown = document.getElementById('dropdown');
var select = document.getElementById('select');
legend.style.visibility = 'hidden';
dropdown.style.visibility = 'visible';
var button = document.createElement('button');
button.innerHTML= "Fertig";
dropdown.appendChild(button);
button.onclick = function(){
legend.style.visibility = 'visible';
dropdown.style.visibility = 'hidden';
dropdown.removeChild(button);
select.value = "Nothing";
}
});
function reset(){
var rows = Array.from(document.getElementsByClassName('row'));
var table = document.getElementById('table');
rows.forEach(function (row){
var cells = Array.from(document.getElementsByClassName('cell'));
for(var i = 0;i< cells.length;i++){
var cell = cells[i]
cell.classList.remove('on');
cell.classList.remove('les');
cell.classList.remove('term');
cell.classList.remove('ext');
}
});
var x = "rep";
x += getResetString();
getData(x);
}
function clearSelection() {
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
function getData(str) {
var requestURL = "http://adopraesenz.ipwin.ch/data/students.php?q=" +str;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(this.readyState === 4 && this.status === 200){
loadJson(request);
}
};
request.open("GET", requestURL, true);
request.send();
}
function getDataHistory(str) {
var requestURL = "http://adopraesenz.ipwin.ch/data/history.php?q=" +str;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(this.readyState === 4 && this.status === 200){
if(request.responseText != ""){
loadDate(request);
}
}
};
request.open("GET", requestURL, true);
request.send();
}
function getDataUser(str){
var requestURL = "http://adopraesenz.ipwin.ch/data/login.php?q=" +str;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(this.readyState === 4 && this.status === 200){
if(request.responseText != ""){
loadDate(request);
} }
};
request.open("GET", requestURL, true);
request.send();
}
function getSelected(cell) {
var value = document.getElementById("select").value;
switch(value){
case "Extern": return 0; break;
case "Schule": return 1; break;
case "Termin": return 2; break;
default: return 3;
}
}
function loadDate(request){
var newDate = new Date();
newDate.setDate(newDate.getDate() -1);
newDate.setHours(0,0,0,0);
var days = request.responseText.split(".");
var oldDate = new Date(days[1]+"."+days[0]+"."+days[2]);
if(newDate > oldDate){
var date = new Date();
date.setDate(date.getDate() - 1);
var dd = date.getDate();
var mm = date.getMonth() + 1;
var yyyy = date.getFullYear();
if(dd < 10) {
dd = '0' +dd;
}
if(mm < 10) {
mm = '0' +mm;
}
var yesterday = dd+"."+mm+"."+yyyy;
getDataHistory('add' + yesterday);
reset();
}
newDate = new Date().toLocaleDateString('de-CH', {
weekday: 'long',
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
document.getElementById('date').innerHTML = newDate;
}
getDataHistory('new');
function loadJson(request){
createTable(request.responseText);
}
function createHeader(array){
var header = document.createElement("thead");
var hRow = document.createElement('tr');
hRow.classList.add('header');
for(var i = 0; i < array.length; i++){
var div = document.createElement('div');
var th = document.createElement('th');
div.innerHTML = array[i];
th.appendChild(div);
hRow.appendChild(th);
}
header.appendChild(hRow);
return header;
}
function createTable(json){
var obj = JSON.parse(json);
var oldBody = document.getElementsByTagName('tbody')[0];
console.log(oldBody);
var oldHeader = document.getElementsByTagName('thead')[0];
var body = document.createElement('tbody');
var header = createHeader(["Name","09:00 – 09:45","10:15 – 11:00","11:00 – 11:45"," ","14:00 – 14:45","15:00 - 15:45","16:00 – 16:45"]);
for (var j = 0; j < obj.length; j++) {
var row = addRow(obj[j],body);
row.classList.add('row');
}
console.log(body);
replaceTable(body, oldBody, header ,oldHeader);
if(obj.length > 25){
var view = document.getElementById('home');
view.setAttribute("style", "overflow-y:scroll");
}
}
function toInput(cell){
var input = document.createElement('input');
setTimeout(function() { input.focus(); }, 200);
cell.appendChild(input);
window.addEventListener('keypress', function(e){
if(e.keyCode == '13'){
var text = input.value;
if(input.parentNode != null){
input.parentNode.removeChild(input);
}
cell.innerHTML = text;
getData("get"+getString(cell.parentNode.cells[0].childNodes[0].innerHTML));
}
}, false);
}
function replaceTable(body, oldBody, header, oldHeader){
if(typeof oldHeader == 'undefined'){
table.appendChild(header);
}else if(oldHeader.parentNode == table){
table.replaceChild(header, oldHeader);
}else{
table.appendChild(header);
}
if(typeof oldBody == 'undefined'){
table.appendChild(body);
}else if(oldBody.parentNode == table){
table.removeChild(oldBody);
table.appendChild(body);
//table.replaceChild(body, oldBody);
}else{
table.appendChild(body);
}
}
function addRow(val,body) {
var rest = val.split(";");
var tr = document.createElement('tr');
for( var i = 0; i < 8; i++){
if(i==0){
var name = rest[0];
addCell(tr, null,name);
}else{
var value = rest[i];
addCell(tr, value, name);
}
}
body.appendChild(tr);
return tr;
}
function addCell(tr, val, name) {
var name;
var cell = document.createElement('td');
var value = "get";
if(val == null){
var input = document.createElement('label');
cell.classList.add("name")
input.innerHTML = name;
input.readOnly = true;
cell.appendChild(input);
}else{
cell = document.createElement('td');
cell.classList.add('cell');
var content = val.split(":");
switch(content[0]){
case '0': cell.classList.add('ext'); break;
case '1': cell.classList.add('les'); break;
case '2': cell.classList.add('term'); break;
case '3': cell.classList.add('on'); break;
case '4': cell.classList.add('spacer'); break;
}
if(val.length > 1){
cell.innerHTML = content[1];
}
}
tr.appendChild(cell);
}
window.onclick = function(event) {
if (!event.target.matches('.dropA')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function getString(name){
var x = "";
var names = document.getElementsByClassName('name');
var values = document.getElementsByClassName('cell');
for(var i = 0;i<names.length;i++){
if(names[i].childNodes[0].innerHTML == name){
x+= names[i].childNodes[0].innerHTML + ";";
for(var j = (7 * i); j < (7 * i) + 7 ; j++){
switch(""+values[j].classList){
case 'cell': x += "0"; break;
case 'cell ext': x += "0"; break;
case 'cell les': x += "1"; break;
case 'cell term': x += "2"; break;
case 'cell on': x += "3"; break;
case 'cell spacer': x += "4"; break;
}
if(values[j].innerHTML != "" && values[j].innerHTML != null){
x+= ":" + values[j].innerHTML
}
x += ";";
}
}
}
return x;
}
function getResetString(){
var names = document.getElementsByClassName('name');
var x = "";
for(var i = 0; i < names.length; i++){
x += names[i].value +";";
for (var j = 0; j < 7 ; j++){
if(j == 3){
x += "4";
}else{
x += "0";
}
x += ";";
}
if(i < names.length-1){
x+="|";
}
}
return x;
}
it seems a tiny problem. on your css, you have to add an space on the calc statement:
height:calc(100% - 50px);
I was able to make it work in here
https://codesandbox.io/s/vibrant-http-ty85k
You can add display: table; to #container
and add:
#legend {
display: table-row;
}
This should work, but I think you should refactor (simplify) the whole page and styles.
I am trying to remove the padding from the cells inside my table. I have set it to not have padding in the relevant CSS selectors but not a success.
As you can see, there is padding on all of these cells.
I would like there to not be. I have tried various different padding settings and changing the vertical alignment makes no difference other than to move the text, the padding just goes from all at the bottom to spread between bottom and top.
Below is the code:
'use strict'
let table = document.getElementById("mainTable")
let rows = table.querySelectorAll("tbody tr")
let columns = table.querySelectorAll("#weeks th")
for (let row of rows) {
for (let o = 0; o<columns.length-1; o++) {
let cell = document.createElement("td")
cell.innerHTML=' '
cell.addEventListener("click", function() {
if (cell.getElementsByTagName("input")[0]) { return } //If cell currently has an input box
//
let oldValue = ""
if (cell.innerHTML !== " ") { //if cell has a saved value
oldValue = cell.innerHTML
}
cell.innerHTML = '<input type="text" class="cellInputs">'
//update input box with old value and focus it
cell.getElementsByTagName("input")[0].focus()
cell.getElementsByTagName("input")[0].value = oldValue
cell.getElementsByTagName("input")[0].addEventListener("keypress", function(e) {
if (e.keyCode === 13) {
cell.innerHTML=cell.getElementsByTagName("input")[0].value
e.preventDefault()
return true
}
})
cell.getElementsByTagName("input")[0].addEventListener("input", function(e) {
console.log(e)
let cellValue = cell.getElementsByTagName("input")[0].value
if (e.data === "." && (cellValue.split('.').length-1 > 1 || cellValue === ".")) {
console.log("stop")
cell.getElementsByTagName("input")[0].value = (cellValue).substring(0, cellValue.length - e.data.length)
}
if (isNaN(e.data) && e.data !==".") {
console.log("Stop")
cell.getElementsByTagName("input")[0].value = (cellValue).substring(0, cellValue.length - e.data.length)
}
//store value inputted into the actual cell
})
cell.getElementsByTagName("input")[0].addEventListener("paste", function(e) {
// clipboardData = e.clipboardData || window.clipboardData;
// pastedData = clipboardData.getData('Text');
let cellValue = cell.getElementsByTagName("input")[0].value
if (cellValue !== "") {
e.preventDefault()
return false
}
if (e.clipboardData.getData('text') === "." && (cellValue.split('.').length-1 > 1 || cellValue === ".")) {
e.preventDefault()
return false
}
if (isNaN(e.clipboardData.getData('text')) && e.clipboardData.getData('text') !==".") {
e.preventDefault()
return false
}
//store value inputted into the actual cell
})
cell.getElementsByTagName("input")[0].addEventListener("focusout", function() {
console.log(document.activeElement)
cell.innerHTML=cell.getElementsByTagName("input")[0].value
})
})
row.appendChild(cell)
}
}
*{
padding: 0;
margin: 0;
font-family: "Trebuchet MS", Times, serif;
box-sizing:border-box;
}
html{
background-color: #35454E;
overflow: hidden;
}
html *{
font-family: "Work Sans", Arial, sans-serif !important;
color: white !important;
}
table{
border-collapse: collapse;
border-spacing: 0px;
color:#35454E;
height:100%;
width:100%;
}
table, th{
border: 2px solid white;
padding:0;
}
th{
vertical-align:top;
font-size: 2.5vw;
}
td{
vertical-align:top;
box-sizing:border-box;
position: relative;
border: 2px solid white;
padding:0;
text-align: center;
font-size: 2.5vw;
padding:0;
}
.cellInputs{
position: absolute;
width:100%;
height:100%;
display: block;
top:0;
left:0;
border:none;
text-align: center;
background-color: #35454E;
word-wrap: break-word;
font-size: 2.5vw;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="MMS.css">
<title>Money Management</title>
</head>
<body>
<table id="mainTable">
<thead>
<tr>
<th>2019</th>
<th colspan="5">January</th>
</tr>
<tr id="weeks">
<th> </th>
<th>31/12/2018</th>
<th>07/01/2019</th>
<th>14/01/2019</th>
<th>21/01/2019</th>
<th>28/01/2019</th>
</tr>
</thead>
<tbody>
<tr>
<th>Balance</th>
</tr>
<tr>
<th>Pay</th>
</tr>
<tr>
<th> </th>
</tr>
<tr>
<th>Rent</th>
</tr>
<tr>
<th>Food</th>
</tr>
<tr>
<th> </th>
</tr>
<tr>
<th>Total</th>
</tr>
</tbody>
</table>
</body>
<script src="MMS.js"></script>
</html>
Remove height:100% from table .
Below code is working for excel to html conversion and partial sorting.
I want when any cells in the header(or first row) is clicked the entire table should get sorted
based on that column(either ascending or descending).
Note:Below Code is tested with any excel input file and supporting settings for activex in internet options in IE9.
<HTML>
<HEAD>
<TITLE>Test</TITLE> <script type="text/javascript" src="../jquery-latest.js"></script>
<script type="text/javascript">
</script>
<STYLE TYPE="text/css">body div * { font-family: Verdana; font-weight: normal; font-size: 10px; } body { background-color: #FFEEFF; } .tableContainer table { border: 0px solid #000000; } .tblHeader { font-weight: bold; text-align: center; background-color: #FFAAEE; color: black; } .oddRow, .evenRow { vertical-align: top; } .tblHeader td, .oddRow td, .evenRow td { border-left: 2px solid #FFFFFF; border-bottom: 0px solid #000000; border-top: 0px solid #000000;} .lastCol { border-right: 0px solid #000000; } .oddRow { background-color: #abcdef; } .evenRow { background-color: #f0f0f0; }</STYLE>
<script LANGUAGE="JavaScript">
function _ge(id) {
return document.getElementById(id);
}
function sortTable(){
var tbl = document.getElementById("tblExcel2Html").tBodies[0];
var store = [];
//alert(tbl.rows.length);
for(var i=0, len=tbl.rows.length; i<len; i++){
var row = tbl.rows[i];
//alert(row.cells[1].innerText);
var sortnr = parseFloat(row.cells[1].textContent || row.cells[1].innerText);
if(!isNaN(sortnr)){
alert(store.push([sortnr, row]));
//store.push([sortnr, row]);
}
}
store.sort(function(x,y){
//alert(x[0] - y[0]);
return x[0] - y[0];
});
//alert(store.length);
for(var i=0, len=store.length; i<len; i++){
alert(tbl.appendChild(store[i][1]));
//alert(tbl.appendChild(store[i][1]));
}
//alert(store);
store = null;
}
function convert2HTML() {
var ex;
try {
ex = new ActiveXObject("Excel.Application");
}
catch (e)
{
alert('Your browser does not support the Activex object.\nPlease switch to Internet Explorer.');
return false;
}
//alert(arraytext);
//var ef = ex.Workbooks.Open("D:\\JS_HTML5\\Vin\\Test.xlsx");
var ef = ex.Workbooks.Open("D:\\JS_HTML5\\docs\\filter4\\tests\\Test.xlsx");
var es = ef.Worksheets(1);
var colsCount = ef.Worksheets(1).UsedRange.Columns.Count;
//alert(colsCount);
var rowsCount = ef.Worksheets(1).UsedRange.Rows.Count;
//alert(rowsCount);
var rStart = parseInt(1,10);
var cStart = parseInt(1,10);
var cEnd = parseInt(colsCount,10);
var rEnd = parseInt(rowsCount,10);
var oc = _ge('tableContainer');
oc.innerHTML = '';
var tbl = document.createElement('TABLE');
tbl.id = 'tblExcel2Html';
tbl.border = '10';
tbl.cellPadding = '4';
tbl.cellSpacing = '0';
oc.appendChild(tbl);
var i,j,row,col,r,c;
for(i = rStart, r = 0; i <= rEnd; i++,r++) {
row = tbl.insertRow(r);
row.className = (i == rStart) ? 'tblHeader' : (i % 2 == 0) ? 'evenRow' : 'oddRow';
for(j = cStart, c = 0; j <= cEnd; j++,c++) {
col = row.insertCell(c);
col.className = (j == cEnd) ? 'lastCol' : '';
col.innerHTML = es.Cells(i,j).value || ' ';
}
}
ex.ActiveWorkbook.Close(true);
ex.Application.Quit();
ex = null;
sortTable();
}
</script>
</HEAD>
<BODY onload = "convert2HTML()">
<h2>Test</h2>
<hr><br>
<!-- <td colspan="6" align="CENTER"><INPUT TYPE="button" VALUE="Convert to HTML" ONCLICK="convert2HTML()"></td> -->
<div id="tableContainer"></div>
<div id="tblExcel2Html"></div>
<footer>
<br>
<center> ©Initial Draft V0.1 </center>
</footer>
<a href="Home.html" >Home</a>
</BODY>
Basically i want to convert excel to html with sorting and filtering support.
Thanks in Advance
Vinoth.S
The creation of the object by calling
ex = new ActiveXObject("Excel.Application");
works only in windows systems with Excel installed. I suggest you to use jqgrid as javascript data-viewer and a php library like phpexcel that parse the excel and return raw data.
I have a codes on Jsfiddle but not showing on realtime project i have consider external resources. Jfiddle has a tab menu and each tab is showing different chart on it like bar chart or pie chart or line chart.
I put both the css and js files on same page and also on the different page than also its not showing the js function on other tab.
Please let me know the solution i am trying from very long but its not working.
Jsfiddle
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="jQueryVisualizeChart1"></div>
<br />
<table id="table1">
<caption>2010 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th scope="col">food</th>
<th scope="col">auto</th>
<th scope="col">household</th>
<th scope="col">furniture</th>
<th scope="col">kitchen</th>
<th scope="col">bath</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>190</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th scope="row">Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
</tbody>
</table>
</div>
<div class="TabbedPanelsContent">
<div id="jQueryVisualizeChart2"></div>
<br />
<table id="table2">
<caption>2010 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th scope="col">food</th>
<th scope="col">auto</th>
<th scope="col">household</th>
<th scope="col">furniture</th>
<th scope="col">kitchen</th>
<th scope="col">bath</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>190</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th scope="row">Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
(function () { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function (element, opts) {
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
if (typeof (this.defaultTab) == "number") {
if (this.defaultTab < 0) this.defaultTab = 0;
else {
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count) this.defaultTab = (count > 1) ? (count - 1) : 0;
}
this.defaultTab = this.getTabs()[this.defaultTab];
}
if (this.defaultTab) this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
};
Spry.Widget.TabbedPanels.prototype.getElement = function (ele) {
if (ele && typeof ele == "string") return document.getElementById(ele);
return ele;
};
Spry.Widget.TabbedPanels.prototype.getElementChildren = function (element) {
var children = [];
var child = element.firstChild;
while (child) {
if (child.nodeType == 1 /* Node.ELEMENT_NODE */ ) children.push(child);
child = child.nextSibling;
}
return children;
};
Spry.Widget.TabbedPanels.prototype.addClassName = function (ele, className) {
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) return;
ele.className += (ele.className ? " " : "") + className;
};
Spry.Widget.TabbedPanels.prototype.removeClassName = function (ele, className) {
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
Spry.Widget.TabbedPanels.setOptions = function (obj, optionsObj, ignoreUndefinedProps) {
if (!optionsObj) return;
for (var optionName in optionsObj) {
if (ignoreUndefinedProps && optionsObj[optionName] == undefined) continue;
obj[optionName] = optionsObj[optionName];
}
};
Spry.Widget.TabbedPanels.prototype.getTabGroup = function () {
if (this.element) {
var children = this.getElementChildren(this.element);
if (children.length) return children[0];
}
return null;
};
Spry.Widget.TabbedPanels.prototype.getTabs = function () {
var tabs = [];
var tg = this.getTabGroup();
if (tg) tabs = this.getElementChildren(tg);
return tabs;
};
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function () {
if (this.element) {
var children = this.getElementChildren(this.element);
if (children.length > 1) return children[1];
}
return null;
};
Spry.Widget.TabbedPanels.prototype.getContentPanels = function () {
var panels = [];
var pg = this.getContentPanelGroup();
if (pg) panels = this.getElementChildren(pg);
return panels;
};
Spry.Widget.TabbedPanels.prototype.getIndex = function (ele, arr) {
ele = this.getElement(ele);
if (ele && arr && arr.length) {
for (var i = 0; i < arr.length; i++) {
if (ele == arr[i]) return i;
}
}
return -1;
};
Spry.Widget.TabbedPanels.prototype.getTabIndex = function (ele) {
var i = this.getIndex(ele, this.getTabs());
if (i < 0) i = this.getIndex(ele, this.getContentPanels());
return i;
};
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function () {
return this.currentTabIndex;
};
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function (ele) {
return Math.min(this.getTabs().length, this.getContentPanels().length);
};
Spry.Widget.TabbedPanels.addEventListener = function (element, eventType, handler, capture) {
try {
if (element.addEventListener) element.addEventListener(eventType, handler, capture);
else if (element.attachEvent) element.attachEvent("on" + eventType, handler);
} catch (e) {}
};
Spry.Widget.TabbedPanels.prototype.cancelEvent = function (e) {
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabClick = function (e, tab) {
this.showPanel(tab);
return this.cancelEvent(e);
};
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function (e, tab) {
this.addClassName(tab, this.tabHoverClass);
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function (e, tab) {
this.removeClassName(tab, this.tabHoverClass);
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabFocus = function (e, tab) {
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabBlur = function (e, tab) {
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
};
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function (e, tab) {
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode)) return true;
var tabs = this.getTabs();
for (var i = 0; i < tabs.length; i++)
if (tabs[i] == tab) {
var el = false;
if (key == this.previousPanelKeyCode && i > 0) el = tabs[i - 1];
else if (key == this.nextPanelKeyCode && i < tabs.length - 1) el = tabs[i + 1];
if (el) {
this.showPanel(el);
el.focus();
break;
}
}
return this.cancelEvent(e);
};
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function (root, func) {
var stopTraversal = false;
if (root) {
stopTraversal = func(root);
if (root.hasChildNodes()) {
var child = root.firstChild;
while (!stopTraversal && child) {
stopTraversal = this.preorderTraversal(child, func);
try {
child = child.nextSibling;
} catch (e) {
child = null;
}
}
}
}
return stopTraversal;
};
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function (tab, panel) {
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "click", function (e) {
return self.onTabClick(e, tab);
}, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function (e) {
return self.onTabMouseOver(e, tab);
}, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function (e) {
return self.onTabMouseOut(e, tab);
}, false);
if (this.enableKeyboardNavigation) {
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function (node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */ ) {
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr) {
tabIndexEle = node;
return true;
}
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a") tabAnchorEle = node;
}
return false;
});
if (tabIndexEle) this.focusElement = tabIndexEle;
else if (tabAnchorEle) this.focusElement = tabAnchorEle;
if (this.focusElement) {
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function (e) {
return self.onTabFocus(e, tab);
}, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function (e) {
return self.onTabBlur(e, tab);
}, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function (e) {
return self.onTabKeyDown(e, tab);
}, false);
}
}
};
Spry.Widget.TabbedPanels.prototype.showPanel = function (elementOrIndex) {
var tpIndex = -1;
if (typeof elementOrIndex == "number") tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount()) return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++) {
if (i != tpIndex) {
if (tabs[i]) this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i]) {
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
}
}
}
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
};
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function (element) {
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
};
})();
$(function () {
$('#table1').visualize({
type: 'bar',
height: '260px',
width: '420px',
appendTitle: true,
lineWeight: 4,
colors: ['#be1e2d', '#666699', '#92d5ea', '#ee8310', '#8d10ee', '#5a3b16', '#26a4ed', '#f45a90', '#e9e744']
}).appendTo('#jQueryVisualizeChart').trigger('visualizeRefresh1');
});
$(function () {
$('#table2').visualize({
type: 'line',
height: '300px',
width: '420px',
appendTitle: true,
lineWeight: 4,
colors: ['#be1e2d', '#666699', '#92d5ea', '#ee8310', '#8d10ee', '#5a3b16', '#26a4ed', '#f45a90', '#e9e744']
}).appendTo('#jQueryVisualizeChart').trigger('visualizeRefresh2');
});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
.dwpeAd {
color: #333;
background-color: #F4F3Ea;
position:fixed;
right: 20px;
top: 20px;
padding: 5px;
}
.visualize {
margin: 20px 0 0 30px;
}
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%;
}
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
.TabbedPanelsTabHover {
background-color: #CCC;
}
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
}
.TabbedPanelsTab a {
color: black;
text-decoration: none;
}
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
}
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
}
.TabbedPanelsContentVisible {
}
.VTabbedPanels {
overflow: hidden;
zoom: 1;
}
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}
/* Styles for Printing */
#media print {
.TabbedPanels {
overflow: visible !important;
}
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
}
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
}
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
}
}
I think you did not copy the 'external resources' on left menu.