I have a footer file which is rendered on every page (with the numerotation).
I'd like it not to be rendered on the first page. Do you have an idea ?
This is my code:
<html><head><script>
function subst() {
var vars={};
var x=document.location.search.substring(1).split('&');
for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
for(var i in x) {
var y = document.getElementsByClassName(x[i]);
for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script></head><body style="border:0; margin: 0;" onload="subst()">
<table style="border-bottom: 1px solid black; width: 100%">
<tr>
<td style="text-align:left"><font face="Century Gothic">
Page <span class="page"></span> sur <span class="topage"></span>
</font> </td>
</tr>
</table>
use this js in your script....first store page value in var and then use it to remove the footer.
your html code..set the page value either by ruby/js(any way you prefer)
<p id="page_value" data-value="<%= #page.value %>"></p>
after setting ,use it to remove the footer
<script type="text/javascript">
window.onload = function () {
var value= $("#page_value").data("value");
if (value==1){
$('#footer').remove()
}
}//if ends
</script>
..hope it helps...
Related
Could someone guide me, I have tried many different ways but can't find out the problems.
<!DOCTYPE html>
<html>
<body>
<head>
<base target="_top">
</head>
<body style="font-family:roboto,light,300;font-size:14px;font-style:normal;">
<div >
<p>
Hi there,<br/><br/>
The following case requires to be process.<br/>Please have a look and update the spreadsheet, click here to open: <br/>
https://docs.google.com/spreadsheets/d/1hPfBxMpXABG09cPOvzAQu0SDZLf-TSUTvv4_02BA8HE/edit#gid=0 <br/>
</p>
</div>
</body>
<head>
<style>
table {width:75%;}
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
}
th, td
{
padding: 14px;
text-align: left;
}
#t01 tr:nth-child(even)
{
background-color: #eee;
}
#t01 tr:nth-child(odd)
{
background-color: #fff;
}
#t01 th
{
background-color: #3e8cbd;
color: white;
}
</style>
</head>
<body>
<table id="t01">
<tr>
<th width="100" scope="col" >Status</th>
<th scope="col" >Language</th>
<th scope="col" >P/R</th>
<th scope="col" >DJID F-Code</th>
<th scope="col" >Deadline</th>
</tr>
<tr>
<td><?= subVals[0][1] ?></td>
<td><?= subVals[0][5] ?></td>
<td><?= subVals[0][6] ?></td>
<td><?= subVals[0][7] ?></td>
<td><?= deadline ?></td>
</tr>
</table>
</body>
<body>
<br/>
<head>
<base target="_top">
</head>
<body style="font-family:roboto,light,300;font-size:14px;font-style:normal;">
<div >
<p> Should you have any questions or doubts please reach out to us: xxxxxx#gmail.com <br/> <br/> Best Regards, </p>
</div>
</body>
</html>
I'd like to sendEmail to the different receivers with all NEW ITEM (rows) that are submitted in google sheet.
So far when I run the script, only 1 row will be sent, row3. What part am I missing for "all rows with data" to be sent?
Add Email to Distribution List from "Backstage" tab with a list of recipience email, is running without an error but it won't send an email the list of people . I supposed something is missing here?
[![enter image description here][3]][3]
function sendEmail() {
var ss = SpreadsheetApp.getActiveSpreadsheet(),
sheet = ss.getSheetByName('ESCALATION'); //Code running off "ESCALATION" tab
var row = 3;
subVals = sheet.getRange(row, 1, 1, 22).getValues(),
deadline = sheet.getRange(3, 13).getDisplayValue(), //Gets display value of deadline date to pass to html file due to time/date formatting
subject = "Escalations Report"; //Create subject variable
var template = HtmlService.createTemplateFromFile('Email Table'); //Create template of html file
template.subVals = subVals; //Send subVals variables to template so can reference in html using scriplets
template.deadline = deadline; //Send deadline variable to template so can reference in html using scriplets
var html = template.evaluate().getContent(); //Evalutate and create html output
var sendto = "xxxxxx#gmail.com"; //Test send Email only to myself
// Add Email to Distribution List > is not working!!???
var BACKsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Backstage"); // "Backstage" tab with a list of recipience email
var columnValues = BACKsheet.getRange(1, 10, BACKsheet.getLastRow()).getValues(); //1st is header row
GmailApp.sendEmail(sendto, subject, '', {htmlBody:html}); //send email with recipients from subVals and options set htmlBody to html variable we created
}
I modified your html and provide some fake data of mine and sent two emails. I also modified the recipient portion of the code it needed to be flattened and joined with a comma.
The gs:
function sendEmail() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const esh = ss.getSheetByName('ESCALATION');
const subVals = esh.getRange(3, 1, 1, 22).getValues();
const deadline = esh.getRange(3, 13).getDisplayValue();
const subject = "Escalations Report";
let template = HtmlService.createTemplateFromFile('ah1');
template.subVals = subVals;
template.deadline = deadline;
let html = template.evaluate().getContent();
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),'Test')
let bsh = ss.getSheetByName("Backstage");
let recipient = bsh.getRange(1, 11, bsh.getLastRow()).getValues().flat().join(',');
GmailApp.sendEmail(recipient,subject, '', { htmlBody: html });
}
The html:
<!DOCTYPE html>
<html>
<body>
<head>
<base target="_top">
<style>
table {width:75%;}
table, th, td {border: 1px solid black;border-collapse: collapse;}
th, td {padding: 14px;text-align: left;}
#t01 tr:nth-child(even) {background-color: #eee;}
#t01 tr:nth-child(odd) {background-color: #fff;}
#t01 th {background-color: #3e8cbd;color: white;}
</style>
</head>
<body style="font-family:roboto,light,300;font-size:14px;font-style:normal;">
<div >
<p> Hi there,<br/><br/>The following case requires to be process.<br/>Please have a look and update the spreadsheet, click
here to open: <br/>
</p>
</div>
<table id="t01">
<tr><th width="100" scope="col" >Status</th><th scope="col" >Language</th><th scope="col" >P/R</th><th scope="col" >DJID F-Code</th><th scope="col" >Deadline</th>
</tr>
<tr> <td><?= subVals[0][1] ?></td><td><?= subVals[0][5] ?></td><td><?= subVals[0][6] ?></td><td><?= subVals[0][7] ?></td><td><?= deadline ?></td></tr>
</table>
<br/>
<div >
<p> Should you have any questions or doubts please reach out to us: xxxxxx#gmail.com <br/> <br/> Best Regards, </p>
</div>
</body>
</html>
The email:
The code for three lines:
GS:
function sendEmail() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const esh = ss.getSheetByName('Sheet1');
const bsh = ss.getSheetByName("Sheet2");
const recipient = bsh.getRange(1, 11, bsh.getLastRow()).getValues().flat().join(',');
const vs = esh.getRange(3, 1, 3, 22).getValues();
const subject = "Escalations Report";
vs.forEach(r => {
let template = HtmlService.createTemplateFromFile('ah1');
template.subVals = r;
let html = template.evaluate().getContent();
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), 'Test');
let end = "is near";
GmailApp.sendEmail(recipient, subject, '', { htmlBody: html });
});
}
HTML:
<!DOCTYPE html>
<html>
<body>
<head>
<base target="_top">
<style>
table {width:75%;}
table, th, td {border: 1px solid black;border-collapse: collapse;}
th, td {padding: 14px;text-align: left;}
#t01 tr:nth-child(even) {background-color: #eee;}
#t01 tr:nth-child(odd) {background-color: #fff;}
#t01 th {background-color: #3e8cbd;color: white;}
</style>
</head>
<body style="font-family:roboto,light,300;font-size:14px;font-style:normal;">
<div >
<p> Hi there,<br/><br/>The following case requires to be process.<br/>Please have a look and update the spreadsheet, click
here to open: <br/>
</p>
</div>
<table id="t01">
<tr><th width="100" scope="col" >Status</th><th scope="col" >Language</th><th scope="col" >P/R</th><th scope="col" >DJID F-Code</th><th scope="col" >Deadline</th>
</tr>
<tr> <td><?= subVals[1] ?></td><td><?= subVals[5] ?></td><td><?= subVals[6] ?></td><td><?= subVals[7] ?></td><td><?= subVals[12] ?></td></tr>
</table>
<br/>
<div >
<p> Should you have any questions or doubts please reach out to us: xxxxxx#gmail.com <br/> <br/> Best Regards, </p>
</div>
</body>
</html>
Note: Both the gs and the html have changed
I've this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testPage</title>
<style>
table td {
width: 50%;
}
</style>
</head>
<body>
<div id="titlebar">
<center>
Select option:
<select onchange="onSelect.call(this, event)">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<script>
function onSelect(event) {
switch (this.options[this.selectedIndex].text) {
case "One":
var td = document.getElementById("one");
td.style.borderColor = "red";
td.style.borderWidth = "5px";
td.style.borderStyle = "solid";
td.style.width = "99%";
var td = document.getElementById("two");
td.style.borderColor = "black";
td.style.borderWidth = "1px";
td.style.borderStyle = "solid";
td.style.width = "100%";
break;
case "Two":
var td = document.getElementById("two");
td.style.borderColor = "red";
td.style.borderWidth = "5px";
td.style.borderStyle = "solid";
td.style.width = "99%";
var td = document.getElementById("one");
td.style.borderColor = "black";
td.style.borderWidth = "1px";
td.style.borderStyle = "solid";
td.style.width = "100%";
break;
}
}
</script>
</center>
</div>
<div id="images">
<table width="100%" height="100%" border=1 cellpadding=1>
<!-- first row -->
<tr id="row1">
<td id="xxx">
<div id="xxx_div" style="width:100%;height:370px"></div>
</td>
<td id="yyy">
<div id="one" style="width:100%;height:370px"></div>
</td>
</tr>
<!-- second row -->
<tr id="row2">
<td id="zzz">
<div id="zzz_div" style="width:100%;height:370px"></div>
</td>
<td id="kkk">
<div id="two" style="width:100%;height:370px"></div>
</td>
</tr>
</table>
</div>
<div id="bottom">
Bottom ...
</div>
</body>
</html>
that works fine, but if I rescale my browser page you can see that scrollbars appears (I know, I'm using absolute values for div height and the problem probably is about this, but it's only to show the problem ... ).
I'd like to obtain the same behaviour at this site
http://tools.geofabrik.de/mc/
where you can see that if you rescale the browser scale, no scrollbars appears and the maps (so the tables and its contents ... ), rescale ...
Suggestions / examples?
This is what you're looking for:
html, body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
table {
width: 100vw;
height: 100vh;
}
td {
width: 50%;
height: 50%;
background: red;
}
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Of course, you might adapt your table size if you need to add inputs or text outside.
Just consider always occupying a total 100% of the visible area.
I have two different tables in my html, and lets assume they all have the same data collection - meaning the rows are representing the same object in the collection. I would like to apply a following functionality: when I hover on the row N in Table 1, it highlights row N in Table 1 and the same row in Table 2. I was able to get it done, however I had to manipulate my collection - I added .hover property on object, and treated it as a flag on mouse enter and mouse leave, and added specific styles according. However, I know this should not be done this way - as it breaks the two way data binding rule.
Any ideas on how I can achieve that without manipulating my data?
You could achieve this by using little jQuery:
var tr_class;
$('.table1 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table2 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table2 ' + tr_class).removeClass('highlightBg');
});
$('.table2 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table1 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table1 ' + tr_class).removeClass('highlightBg');
});
Both of your table rows need to have a class like a row number for example counting them:
<tr class='1'>...</tr>
<tr class='2'>...</tr>
.highlightBg defines a background-color for highlighted state, in this example .table1 and .table2 are the classes of the tables.
Think that should do the work.
is this what you want.but I used bit jquery with this.hope this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
div.tableone{
margin:50px;
}
div.tabletwo{
margin: 50px;
}
table{
border:1px solid black;
}
table tr th{
width: 200px;
}
table tr td{
text-align: center;
}
.classOne{
background-color: orange;
color: white;
}
</style>
<body>
<h1>table one</h1>
<div class="tableone">
<table border="2">
<thead>
<tr class="trone">
<th>one</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>dataone</td>
<td>datetwo</td>
</tr>
</tbody>
</table>
</div>
<h1>table two</h1>
<div class="tabletwo">
<table border="2">
<thead>
<tr class="trtwo">
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>datatwo</td>
<td>datethree</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".trone").mouseenter(function(){
$(this).addClass("classOne");
$(".trtwo").addClass("classOne");
});
$(".trone").mouseleave(function(){
$(this).removeClass("classOne");
$(".trtwo").removeClass("classOne");
});
$(".trtwo").mouseenter(function(){
$(this).addClass("classOne");
$(".trone").addClass("classOne");
});
$(".trtwo").mouseleave(function(){
$(this).removeClass("classOne");
$(".trone").removeClass("classOne");
});
});
</script>
</body>
</html>
A solution to the problem, without using jQuery, would be the following:
const table1 = document.getElementsByClassName("table-one")[0];
const table2 = document.getElementsByClassName("table-two")[0];
const table1Rows = table1.querySelectorAll("tr:not(.table-header)");
const table2Rows = table2.querySelectorAll("tr:not(.table-header)");
for (let i = 0; i < table1Rows.length; i++) {
const table1Row = table1Rows[i];
const table2Row = table2Rows[i];
table1Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table1Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
table2Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table2Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
}
Here you can see the solution in action: JSFiddle
Hi i m using in my project a simple functionality.
i have a table and some data is fetch data in json file .
Data is coming and if i click to name than edit mode is on if i blur than hide the edit mode and show the view mode is fine i have do this .
now i have a update button if i click to this button than only updated data in insert next row how to do this please check to this and help me .
My code is this
var myApp = angular.module('myApp', []);
myApp.controller('myCntrl', function($scope, $http){
$http.get('js/list.json').success(function(data){
$scope.emplyeList = data;
});
$scope.updateSec= function(employe){
alert("Rohit");
}
});
.click{
cursor: pointer;
text-decoration: underline;
}
.normal-table{
width: 50%;
border-collapse: collapse;
}
.normal-table th{
border: solid 2px rgba(0,0,0,0.1);
}
.normal-table td{
border: solid 2px rgba(0,0,0,0.1);
text-align: center;
padding: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
<body>
<table class="normal-table">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employe in emplyeList">
<td>
<div ng-show="!data" ng-click="data=true" class="click">{{employe.name}}</div>
<div ng-show="data"><input ng-blur="data=false" type="text" ng-model="employe.name" /></div>
</td>
<td>
<div ng-show="!data">{{employe.ID}}</div>
<div ng-show="data"><input type="text" ng-model="employe.ID" /></div>
</td>
<td>
<div ng-show="!data">{{employe.add}}</div>
<div ng-show="data"><input type="text" ng-model="employe.add" /></div>
</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="updateSec(employe)">Update</button>
</td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="updatEm in employe">
<td>{{updatEm.name}}</td>
<td>{{updatEm.ID}}</td>
<td>{{updatEm.add}}</td>
</tr>
</tbody>
</table>
</div>
My Json file is
[
{"name":"Rohit", "ID":"5Rt", "add":"Delhi"},
{"name":"Kiran", "ID":"4Kn", "add":"UP"},
{"name":"Abhay", "ID":"3Ay", "add":"HR"},
{"name":"Rahul", "ID":"2Rl", "add":"UK"}
]
HTML
<tr ng-repeat="employe in emplyeList" ng-click="updateSec(employe)">
</tr>
<tr>
<td colspan="3">
<button ng-click="showData()">Update</button>
</td>
</tr>
<tr ng-if="showEmployee" ng-repeat="employe in modifiedEmplyee">
<td>{{employe.name}}</td>
<td>{{employe.ID}}</td>
<td>{{employe.add}}</td>
</tr>
Script
//Display list
$scope.showEmployee = false;
//Create an array to hold updated employee
$scope.modifiedEmplyee = [];
//Set updated field to identify updated employee
$scope.updateSec = function (employe) {
employe.updated = true;
$scope.showEmployee = false;
}
//Show data and copy modilfied list
$scope.showData = function () {
$scope.showEmployee = true;
$scope.modifiedEmplyee = [];
for(var i = 0; i< $scope.emplyeList.length; i++)
{
var emp = $scope.emplyeList[i];
if(emp.updated && emp.updated == true){
$scope.modifiedEmplyee.push(emp);
}
}
}
DEMO
Here is the jsfiddle of the below code. http://jsfiddle.net/ux4DD/. What I want is the name Harry Pham to be in one line, so I make the width very small and do white-space:nowrap. It work on Firefox, but not IE. Help please
<table cellpadding="0" cellspacing="0" style="width: 450px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:20px;border-top:1px solid gray;white-space: nowrap;"><span class="linkColor">Harry Pham</span>
</td>
<td style="height:15px;background:url('images/line.png') no-repeat;width:28px;" width="35px"></td>
<td style="border-bottom:1px solid gray;" width="auto"></td>
</tr>
</table>
</td>
</tr>
</table>
For IE 6 and 7 you need to wrap your text with a <span> tag and give it a white-space property. Since you already have a <span> tag wrapped around your text and you have a class for it, just add the white-space property to your <span> class .linkColor.
.linkColor{
white-space:nowrap;
}
Check working example at http://jsfiddle.net/ux4DD/1/
Hope this will be helpful:
var buttons = document.getElementsByTagName('button');
for(var j=0; j < buttons.length; j++) {
var button = buttons[j];
var textNode = button;
while(textNode.children[0]) {
textNode = textNode.children[0];
}
var text, words, numSplits;
var spacing = 0;
while(button.scrollWidth !== 0 && button.clientWidth !== 0 &&
button.scrollWidth > button.clientWidth) {
if(!spacing) {
text = textNode.innerHTML;
words = text.split(' ');
numSplits = Math.ceil(button.scrollWidth / button.clientWidth);
spacing = Math.round((words.length)/numSplits);
}
for(var i = spacing; i < words.length; i+=spacing+1) {
words.splice(i , 0, '<br />');
}
textNode.innerHTML = words.join(' ');
spacing--;
words = text.split(' ');
}
}
Ref: Word wrapping for button with specified width in ie7?