I need to print my HTML content in all the browsers with the header/footer repeating on every page. I have been successful in doing so perfectly in Chrome. Though in IE and Firefox also it is working but both these browsers do not work properly with css style - "page-break-inside: avoid" due to which it does not print content on first page but still on other pages it does print the header and footer.
Problem is with MAC safari. It just prints the header only once and does not print footer at all. My requirement is to print both header and footer repeatedly on each page.
Following is my sample print code. This code might prove helpful for somebody looking for printing in Chrome but can anyone please help me in printing the same in MAC safari as well.
Any help would be greatly appreciated.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
Print();
});
function Print() {
let data1 = [];
for (var i = 0; i < 140; i++) {
data1.push({ Title: "Item1." + (i + 1).toString(), Value1 : Math.random(), Value2 : Math.random() })
}
let data2 = [];
for (var i = 0; i < 50; i++) {
data2.push({ Title: "Item2." + (i + 1).toString(), Value1 : Math.random(), Value2 : Math.random() })
}
var printWindow = this.window; // window.open("", "", "location=1,status=1,scrollbars=1");
printWindow.document.write("<body>");
printWindow.document.write("<style type='text/css' media='print'>");
printWindow.document.write("#page {margin: 10mm; }");
printWindow.document.write(" thead {display: table-header-group;} ");
printWindow.document.write(" tfoot {display: table-footer-group;} ");
printWindow.document.write(" #footerforprinter {");
printWindow.document.write("position: fixed;");
printWindow.document.write("bottom: 0;");
printWindow.document.write("}");
printWindow.document.write(" #footerforprinter td{");
printWindow.document.write("width: 100%;");
printWindow.document.write("overflow: hidden;");
printWindow.document.write("word-wrap: break-word;");
printWindow.document.write("}");
printWindow.document.write(" tr {page-break-inside: avoid;}\n ");
printWindow.document.write("</style><style type='text/css' media='screen'> thead {display: table-header-group} tfoot {display: table-footer-group}</style>\n");
let style = '<style>\n ';
style += ' .t1{border: 1px solid black;border-collapse: collapse; font-size: 11px; margin-left:0px} \n';
style += ' .t1 th, .t1 td {border: 1px solid black;border-collapse: collapse;} \n';
style += ' .headerCol {text-align:left; background-color:lightgray; font-weight:bold; vertical-align: top;} \n ';
style += ' .firstCol {max-width:80px; vertical-align:top; min-width: 30px;padding:2px; padding-right:3px; text-align:right}\n ';
style += ' .dataCol1 {max-width:200px;vertical-align:top; min-width: 150px;padding:2px;}\n ';
style += ' .dataCol2 {max-width:150px;vertical-align:top; min-width: 80px; text-align:right;padding:2px;} \n ';
style += '</style>';
printWindow.document.write(style);
printWindow.document.write("<form id='form1' runat='server'><div><table style='width:100%; margin: 0 auto;'>");
printHeader(printWindow);
printWindow.document.write("<tbody><tr><td>");
printData(printWindow, data1);
printData(printWindow, data2);
printWindow.document.write("</td></tr>");
printWindow.document.write("</tbody>");
printFooter(printWindow);
printWindow.document.write("</div></form></body>");
//printWindow.print();
printWindow.focus();
// printWindow.document.close();
}
function printData(printWindow, data) {
printWindow.document.write('<table class="t1">');
printWindow.document.write('<tr style="text-align:center; background-color:lightgray; font-weight:bold;"><td colspan="5">Sample Data</td></tr>');
printWindow.document.write('<tr><td class="headerCol"></td>');
printWindow.document.write('<td class="headerCol">Title 1</td>');
printWindow.document.write('<td class="headerCol" style="text-align:right">Value 1</td>');
printWindow.document.write('<td class="headerCol" style="text-align:right">Value 2</td></tr>');
for (let x = 0; x < data.length; x++) {
printWindow.document.write('<tr><td class="firstCol">' + (x + 1).toString() + '</td>');
printWindow.document.write('<td class="dataCol1">' + data[x].Title + '</td>');
printWindow.document.write('<td class="dataCol2">' + data[x].Value1 + '</td>');
printWindow.document.write('<td class="dataCol2">' + data[x].Value2 + '</td></tr>');
}
printWindow.document.write('</table>');
printWindow.document.write('<br/>');
}
function printHeader(printWindow) {
let fileName = "-------";
printWindow.document.write("<thead><tr><td>");
printWindow.document.write("<div style='width:100%; border:1px solid black;text-align:center;'>");
printWindow.document.write("<table style='width:100%;'>");
printWindow.document.write("<tr><td colSpan='2' style='text-align:center; font-weight:bold;'>Report</td></tr>");
printWindow.document.write("<tr><td>Report Date: " + new Date() + "</td>");
printWindow.document.write("<td style='float:right;'>Version: 1.0.0.0</td></tr>");
printWindow.document.write("<tr><td>File Name: " + fileName + "</td></tr>");
printWindow.document.write("</table>");
printWindow.document.write("</div></td></tr><tr style='height:20px;'></tr></thead>");
}
function printFooter(printWindow) {
printWindow.document.write("<tfoot>");
printWindow.document.write('<tr style="height: 30mm;"><td></td></tr>');
printWindow.document.write("</tfoot>");
printWindow.document.write("<table style='width:100%; left: 0; right: 0; padding-left:7px; padding-right:7px;' id='footerforprinter'>");
printWindow.document.write("<tr>");
printWindow.document.write("<td>");
printWindow.document.write("<table style='width:100%; border:1px solid black;'>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span>Footer Line 1</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span>Footer Line 2</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span>Footer Line 3</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("</table> ");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span style='font-size:10px !important;'>© Dummy Info.</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("</table> ");
}
</script>
</head>
</html>
Related
I have this code below that moves the value from Random Fruits to Green Fruits but the problem is i'm trying to make it so that after i move the value into Green Fruits i will be also able to move it back to the Random Fruits Table but i keep getting this error message "message": "Uncaught TypeError: Cannot read property 'indexOf' of undefined", am i doing something wrong with the code below? Any help would be greatly appreciated thanks!
var obj = {};
var obj2 = {};
var key = "Red Fruits";
obj[key] = ['Apple', 'Cherry', 'Strawberry'];
var myArray = [];
myArray.push(obj);
var key2 = "Green Fruits";
obj[key2] = ['Watermelon', 'Durian', 'Avacado'];
var myArray2 = [];
myArray2.push(obj);
var key3 = "Random Fruits";
obj2[key3] = ['Kiwi', 'Pomegranate', 'Honeydew', 'Plum'];
var myArray3 = [];
myArray3.push(obj2);
function redraw(obj) {
var $header = $("<tr>"),
cols = 0,
bodyString = "";
$.each(obj, function(key, values) {
cols = Math.max(cols, values.length);
$header.append($('<th class="total_count_' + key.replace(/\s/g, '_') + '"/>').text(key + ": " + values.length));
});
for (var i = 0; i < cols; i++) {
bodyString += '<tr>';
$.each(obj, function(key, values) {
bodyString += '<td>' +
(values[i] ? values[i] : "") +
'</td>';
});
bodyString += '</tr>';
}
$('.fruitsclass thead').html($header);
$('.fruitsclass tbody').html(bodyString);
var bodyString = '';
var headString = '';
$.each(obj2[key3], function(index) {
bodyString += ('<tr><td>' + obj2[key3][index] + '</td></tr>');
});
headString += ('<tr><th>' + 'Random Fruits' + '</th></tr>');
$('.fruityclass tbody').html(bodyString);
$('.fruityclass thead').html(headString);
}
function addNewRow(fruitName) {
var tds = '<tr><td class="new-row">' + +'</td></tr>';
}
function listener(obj) {
$(document).ready(function() {
$("#fruityid td").click(function() {
data = this.innerHTML;
k1 = Object.keys(obj2).find(k => obj2[k].indexOf(data) >= 0)
index = obj2[k1].indexOf(data);
obj2[k1].splice(index, 1);
obj[key2].push(data);
$(".total_count_Green_Fruits").html(key2 + ': ' + obj[key2].length);
var element = $(this).detach();
$('#fruitsid > tbody').append('<tr><td></td><td class="new-green-fruit">' + element.html() + '</td></tr>');
});
});
$(document).ready(function() {
$('body').on('click', '.new-green-fruit', function() {
console.log("Fruit : " + (this.innerHTML));
data2 = this.innerHTML;
k2 = Object.keys(obj).find(j => obj[j].indexOf(data2) >= 0)
index2 = obj[k2].indexOf(data2);
obj[k2].splice(index2, 1);
obj2[key3].push(data2);
});
});
}
redraw(obj);
listener(obj);
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center
}
.skillsTable th {
border-left: 1px solid #AAA5A4;
border-right: 1px solid #AAA5A4;
}
table {
float: left;
border-collapse: collapse;
width: 70%
}
td {
border-left: 1px solid #AAA5A4;
border-right: 1px solid #AAA5A4;
padding-top: 8px;
padding-left: 11px;
font-size: 15px;
}
th {
color: #0080ff;
font-weight: normal;
border-bottom: 1px solid #AAA5A4;
padding-bottom: 5px;
}
div {
margin-bottom: 50px;
}
.new-green-fruit {
color: lime;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
<div id="result"> </div>
<div class="center">
<table id="fruitsid" class="fruitsclass skillsTable class">
<thead></thead>
<tbody></tbody>
</table>
</div>
<div class="center">
<table id="fruityid" class="fruityclass skillsTable class">
<thead></thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
actually all you have to do is update the view. You have done the item shifting correctly.
You see no error first time you do the shift back, because the item is there. You only see the error second time you click the item in the list again. It is because view did not update and the item is gone already!
I need help with running an if and else statement that will retrieve certain amounts of entries using XMLRequest and only return 10 entries instead of 30. I would like some assistance on how to make a function that will get the next set of entries so an example would be get 5 entries the first time and then 2nd click get 10 entries and so on.. I have been stuck and really would like to understand what I am not seeing clearly
<!DOCTYPE html>
<html lang="en">
<head>
<title>AJAX High Score Example</title>
<style>
body { background-color: lightgreen; }
h1 { color: black;
text-align: center;}
button { display: block;
margin-left: auto;
margin-right: auto; }
#box1 { background-color: grey;
color: green;
border: 2px solid black;
width: 550px;
padding: 20px;
margin-left: auto;
margin-right: auto; }
th, td { color: black;
min-width: 120px;
text-align: center;
border: 1px solid black;}
table { margin: 20px auto 0px auto;
border: 5px solid black;
background-color: yellow;}
</style>
</head>
<body>
<h1>Cedrics Music List 1990 XML Part A</h1>
<div id="box1"></div>
<button type="button" onclick="getScores()">Display
Scores</button>
<script>
var request1;
var ratingValue = new Array();
var trackValue = new Array();
var singerValue = new Array();
var arraySelected = 0;
function getScores() {
request1 = new XMLHttpRequest();
request1.onreadystatechange = callback;
request1.open("GET", "topSongs1990.xml", true);
request1.send();
}
function callback() {
if ((request1.readyState == 4) && (request1.status ==
200)) {
var parser;
var xmlDoc;
var scoreDataXML = request1.responseText;
console.log(scoreDataXML);
parser = new DOMParser();
xmlDoc =
parser.parseFromString(scoreDataXML,"text/xml");
var outputs = xmlDoc.getElementsByTagName("entry");
console.log(outputs);
var output = "<table>";
output += "<tr><th>RATING</th><th>TRACK</th>
<th>SINGER</th></tr>";
if (arraySelected > 0; arraySelected < 10; ) {
ratingValue[i].getElementsByTagName("rating")
[0].childnodes[0].nodeValue + "</td><td>"
+ trackValue[i].getElementsByTagName("track")
[0].childnodes[0].nodeValue + "</td><td>"
+ singerValue[i].getElementsByTagName("singer")
[0].childnodes[0].nodeValue + "</td><td>";
document.getElementsByTagName("entry").innerHTML;
}else if (arraySelected > 10; arraySelected > 20; ){
} else {
for(i=0; i < outputs.length; i++) {
var ratingElement =
outputs[i].getElementsByTagName("rating");
var trackElement =
outputs[i].getElementsByTagName("track");
var singerElement =
outputs[i].getElementsByTagName("singer");
var s1 = ratingElement[0].firstChild.nodeValue;
var i1 = trackElement[0].firstChild.nodeValue;
var d1 = singerElement[0].firstChild.nodeValue;
/*ratingValue[i] = s1;
trackValue[i] = i1;
singerValue[i] = d1;*/
var row = "<tr>";
row += "<td>" + s1 + "</td>";
row += "<td>" + i1 + "</td>";
row += "<td>" + d1 + "</td>";
row += "</tr>";
output += row;
}
/*console.log("The rating Array is " + ratingValue);
console.log("The initials Array is " + trackValue);
console.log("The dates Array is " + singerValue); */
output += "</table>";
document.getElementById("box1").innerHTML = output;
}
}
</script>
</body>
</html>
I would like to have my function spit out 10 entries per click and if im able to complete that I would like to know how to decrement those values.
(im actually really new to javascript, so I apologize)
I keep getting errors because I cant properly form the right syntax
ajaxXML6Modified.html:31 Uncaught ReferenceError: getScores is not
defined
at HTMLButtonElement.onclick (ajaxXML6Modified.html:31)
onclick # ajaxXML6Modified.html:31
Constructive Criticism Welcomed
I have a product list and I use in css at
var dishByCategory = _.groupBy(menu.dishes, d => d.categoryName);
var mywindow = window.open('', 'PRINT', 'height=auto,width=auto'); //Create window for print
mywindow.document.write('<html><head><title>' + menu.name + '</title>');
mywindow.document.write('<style>' +
'body{text-align: right; font-family: calibri; }' +
'h1{text-align: center;}' +
'h2{text-align: center; text-decoration: underline; direction: rtl;}' +
'h3{margin: 0.2cm;}' +
'h4{font-size: 22px; margin: 0cm 3cm;}' +
'.menuList{margin: 0cm 5cm;}' +
'#media print { .content{ page-break-inside: avoid; } }' +
'.logo{text-align: center; height: 5cm;}' +
'.footer{text-align: center; height: 3cm; font-family: times new roman;}' +
'img{height: 5cm; width: auto; }' +
'</style>');
mywindow.document.write('</head><body >');
mywindow.document.write('<div class="A4">'); //start of A4
for (let cat of menu.categories) {
var categoryDishes = dishByCategory[cat.categoryName];
var includeDishes = categoryDishes.filter(d => { return !d.extraPrice })
var notIncludeDishes = categoryDishes.filter(d => { return d.extraPrice })
mywindow.document.write('<div class="content">'); //start of content
mywindow.document.write('<br><h1>' + menu.name + ' - ' + cat.categoryName + '</h1>');
if (cat.dishesCount) {
mywindow.document.write('<h2> ' + cat.dishesCount + ' type to select</h2>');
}
mywindow.document.write('<div class="menuList">');
for (let dish of includeDishes)
{
mywindow.document.write('<h3>' + dish.name + '</h3>');
}
mywindow.document.write('</div>');
if (notIncludeDishes.length > 0)
{
mywindow.document.write('<h4>some title</h4>');
mywindow.document.write('<div class="menuList">');
for (let dish of notIncludeDishes) {
mywindow.document.write('<h3>' + dish.name + '</h3>');
}
mywindow.document.write('</div>');
}
mywindow.document.write('</div>'); //end of content
}
mywindow.document.write('</div>'); //end of A4
mywindow.document.write('</body></html>');
for each product div. it's start a new page if the div overfllow to the next page.
I want to add header and footer in each page. how can i know which created a new page?
edit
the header height is 5cm and footer: 3cm, so the solution from here not relevant. there the header and footer take just the white space on page.. I want to margin the body but only in first div each page
I have tried the code from the article to print my wide table in a single page, that worked great only for Google Chrome. Couldn't get it working on IE as mentioned in the article and comments. Below is my sample code with IE I tried almost for hours and couldn't get the issue.
function printGrid() {
var gridElement = $('#grid'),
printableContent = '',
win = window.open('', '', 'scrollbars=1,resizable=1,width=1150,height=650,left=0,top=0'),
doc = win.document.open(),
dataSource = $("#grid").data("kendoGrid").dataSource;
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<link href="../Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />' +
'<style>' +
'html { font: 11pt sans-serif; }' +
'.k-grid { border-top-width: 0;}' +
'.k-grid, .k-grid-content { height: auto !important;}' +
'.k-grid-content { overflow: visible !important; }' +
'div.k-grid table { table-layout: fixed; border:1px solid #000000; width: 100% !important; }' +
'.k-grid .k-grid-header th { border-top: 1px solid; border:1px solid #000000;}' +
'.k-grid td {border:1px solid #000000;} ' +
'.k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
'#media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) {table, thead, tbody, th, td, tr { display:block;width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float:left;clear:left;}' +
'thead tr {position: absolute;top: -9999px;left: -9999px;}' +
'tr {border: 1px solid #ccc;}' +
'td {border: none;border-bottom: 1px solid #eee;position: relative;padding-left: 50%;height:10px;}' +
'td:before {position: absolute;top: 6px;left: 6px;width: 45%;padding-right: 10px;white-space: nowrap;}' +
'td:nth-of-type(1):before {content: "Column1";}' +
'td:nth-of-type(1):before {content: "Column2";}' +
'td:nth-of-type(1):before {content: "Column3";}' +
'td:nth-of-type(1):before {content: "Column4";}' +
'td:nth-of-type(1):before {content: "Column5";}' +
'td:nth-of-type(1):before {content: "Column6";}' +
'td:nth-of-type(1):before {content: "Column7";}' +
'td:nth-of-type(1):before {content: "Column8";}' +
'td:nth-of-type(1):before {content: "Column9";}' +
'td:nth-of-type(1):before {content: "Column10";}' +
'td:nth-of-type(1):before {content: "Column11";}' +
'td:nth-of-type(1):before {content: "Column12";}' +
'td:nth-of-type(1):before {content: "Column13";}' +
'td:nth-of-type(1):before {content: "Column14";}' +
'td:nth-of-type(1):before {content: "Column15";}' +
'}' +
'#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {' +
'body {padding: 0;margin: 0;width: 320px;}' +
'}' +
'#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {' +
'body {width: 495px;}' +
'}' +
'</style>' +
'</head>' +
'<body>';
var htmlEnd =
'</body>' +
'</html>';
var gridHeader = gridElement.children('.k-grid-header');
if (gridHeader[0]) {
var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
printableContent = gridElement
.clone()
.children('.k-grid-header').remove()
.end()
.children('.k-grid-content')
.find('table')
.first()
.children('tbody').before(thead)
.end()
.end()
.end()
.end()[0].outerHTML;
} else {
printableContent = gridElement.clone()[0].outerHTML;
}
doc.write(htmlStart + printableContent + htmlEnd);
doc.close();
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/ ') >= 0;
var isChrome = !!window.chrome && !isOpera;
if (!isChrome)
win.print();
}
Tried a different solution to print as shown in the demo here http://salman-w.blogspot.com/2013/04/printing-wide-html-tables.html. It worked !
Note: I am using a Kendo grid, with that the following solution perfectly works ! This has some additional filter display stuff.etc. Please remove the same if not required. I am sure it can be optimized, but this is the quick code that works.
function printGrid() {
var gridElement = $('#grid'),
firstprintableContent = '',
lastprintableContent = '',
win = window.open('', '', 'scrollbars=1,resizable=1,width=1150,height=650,left=0,top=0'),
doc = win.document.open(), dataSource = $("#grid").data("kendoGrid").dataSource;
//get the filter values
var filterHtml = "", operator = "", fieldName = "", localCounter = 0;;
var fieldArray = new Array("Field1", "Field2", "Field3", "Field4", "Field5", "Field6", "Field7", "Field8", "Field9", "Field10", "Field11", "Field12", "Field13", "Field14", "Field15");
var nameArray = new Array("Column1", "Column2", "Column3", "Column4", "Column5", "Column6", "Column7", "Column8", "Column9", "Column10", "Column11", "Column12", "Column13", "Column14", "Column15");
//Logic for getting the filters and displaying them on the print page
var currentFilter = dataSource.filter();
if (currentFilter) {
currentFilter.filters.forEach(function (filter, index) {
localCounter = localCounter + 1;
if (filter.operator == "neq")
operator = "not equals to";
if (filter.operator == "eq")
operator = "equals to";
if (filter.operator == "startswith")
operator = "starting with";
for (var iCounter = 0; iCounter < 15; iCounter++) {
if (filter.field == fieldArray[iCounter]) {
fieldName = nameArray[iCounter];
break;
}
}
if (localCounter > 1)
filterHtml += "<p style='padding-left:9.1em'>" + fieldName + " " + operator + " " + "'" + filter.value + "'" + "</p>";
else
filterHtml += fieldName + " " + operator + " " + "'" + filter.value + "'" + "<br/> ";
});
}
else
filterHtml = "None";
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<style>' +
'html { font: 11pt sans-serif; }' +
'table { width: 100%; border-collapse: collapse;table-layout:fixed;}' +
'tr:nth-of-type(odd) { background: #eee;}' +
'th { background: #DDDDDD;white-space: nowrap; color: white; font-weight: bold; pointer-events:none;cursor:default;text-decoration:none;}' +
'td, th { padding: 6px; border: 1px solid #ccc; text-align: left;outline:1px solid #ccc}' +
'tr {border: 1px solid #ccc;}' +
'</style>' +
'</head>' +
'<body>' +
'<div class="site-header__logo col-xs-4">' +
'<img src="/Content/images/mark-red-48x52.png" alt=" Products">' +
'<img src="/Content/images/logo-299x63.png" alt="Products">' +
'</div>' + '<br/><br/>' +
'Applied Data Filters' + ':' + " " + filterHtml + '<br/>' +
'<center><strong><h2>' + 'My grid' + '</h2></strong> </center>' + '<br/>';
var htmlEnd = '</body>' + '</html>';
//get the total columns, hidden columns and shown columns
var totalColumns = $("#grid").data("kendoGrid").columns.length;
var hiddencolumnsarray = [];
var showncolumnsarray = [];
if (totalColumns > 0) {
for (i = 0; i < totalColumns; i++) {
if ($("#grid").data("kendoGrid").columns[i].hidden) {
hiddencolumnsarray.push(i);
}
else {
showncolumnsarray.push(i);
}
}
}
if (showncolumnsarray.length > 8) {
iMoreColumns = 1;
//show only the first eight columns if user is viewing more than 8 columns
printfirsteightcolumns();
firstprintableContent = getPrintableContent(gridElement);
printlastsevencolumns();
lastprintableContent = getPrintableContent(gridElement);
} else {
iMoreColumns = 0;
firstprintableContent = getPrintableContent(gridElement);
}
//set the columns visibility back to normal once the print HTML is captured with the respective number of columns
printshowhidecolumns();
if (showncolumnsarray.length > 8)
doc.write(htmlStart + firstprintableContent + "<br/>" + "<div style='page-break-before:always;'>" + lastprintableContent + "</div>" + htmlEnd);
else
doc.write(htmlStart + firstprintableContent + htmlEnd);
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/ ') >= 0;
var isChrome = !!window.chrome && !isOpera;
if (!isChrome)
win.print();
}
function getPrintableContent(gridElement) {
var gridHeader = gridElement.children('.k-grid-header');
if (gridHeader[0]) {
var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
printableContent = gridElement.css('height', '')
.clone()
.children('.k-grid-header').remove()
.end()
.children('.k-grid-content').css('height', '')
.find('table')
.first()
.children('tbody').before(thead)
.end()
.end()
.end()
.end()[0].outerHTML;
} else {
printableContent = gridElement.clone()[0].outerHTML;
}
return printableContent;
}
function printfirsteightcolumns() {
var counter = 0;
var columns = $("#grid").data("kedoGrid").columns;
jQuery.each(columns, function (index) {
if (counter > 8) {
$("#grid").data("kendoGrid").hideColumn(parseInt(counter));
}
counter = counter + 1;
});
}
function printlastsevencolumns() {
var counter = 0;
var columns = $("#grid").data("kedoGrid").columns;
jQuery.each(columns, function (index) {
if (counter > 8) {
$("#grid").data("kendoGrid").showColumn(parseInt(counter));
}
else {
$("#grid").data("kendoGrid").hideColumn(parseInt(counter));
}
counter = counter + 1;
});
}
Cheers,
Srini
I've found a number of tutorials online for dragging and dropping images and shapes within an HTML canvas. But they all seem to be aimed at moving objects that are generated within the canvas when the page loads. I'm building an app that lets the user click a button on a virtual keyboard, then click on the canvas to have the corresponding number or character appear. This is my code:
<script type="text/javascript">
var mathCanvas = document.getElementById("matharea");
var ctx = mathCanvas.getContext("2d");
ctx.font="20px Arial";
var placementCallback = function(){}
mathCanvas.onselectstart = function(){return false;}
function insertOne(){placementCallback = function(x, y){ctx.fillText('1', x-6,y+6);}};
function insertTwo(){placementCallback = function(x, y){ctx.fillText('2', x-6,y+6);}};
function insertThree(){placementCallback = function(x, y){ctx.fillText('3', x-6,y+6);}};
mathCanvas.onclick = function(event){
placementCallback(event.offsetX, event.offsetY);
}
</script>
I cut out some of the insert functions to keep this shorter (the buttons in my HTML have an onclick attribute that calls these functions). I need to be able to select the characters that are placed on the screen and implement drag/drop and delete functionality, but I can't think of a way to do this for text that gets placed on the screen after the page loads (I'm fairly new to Javascript). How would I do this? I'm not expecting anyone to give me the code to do this, but if I could get a push in the right direction, that'd be great.
The problem is that canvas is immediate-mode. Whatever you tell it to put on the canvas it will put on the canvas, instantly. It will not give you the ability to modify that value in any way, shape or form.
Think of it like the difference between MS Paint (or your OS' equivalent) and Photoshop.
In PS, you can have layers which can be moved around and edited, and when you decide your image is done, you save it and it flattens all of that data.
When you make an image in MS Paint, as soon as you click or type, that thing that you put there is there, and it's not moving/being edited unless you erase it, draw over it, or draw a rectangle around a section and move that whole rectangle (including the pixels around what you're trying to edit).
Just calling fillText will paint the words on, that instant, but will not remember what it drew, where it is, what it is, how the text is different from the surrounding pixels, et cetera.
So your generalized solution is that you need to turn your text into objects, and then draw an aspect (the text-content) of those objects to the screen.
If your text changes, you can make a change in the object, and redraw it (because your object will have its X and Y coordinates stored, and will have its width value stored, using the context.measureText(textObj.text).width method/property), and when you click on the canvas, you can check the coordinates of the click, and if those coordinates intersect with your text-object's stored coordinates, then you can modify its position on the screen.
In that regard, you should look into those examples which deal with dragging objects on the canvas.
The button click should be treated as a way to CREATE one of those objects.
I know this is a lot of code ... But I didn't want to go through it .. It's PART of something I built a long time ago ... Just copy and paste into a html file ... I hope it helps with what you need:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script>
;(function($) {
$.fn.insertAtCaret = function (myValue) {
return this.each(function() {
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
} else if (this.selectionStart || this.selectionStart == '0') {
//MOZILLA / NETSCAPE support
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
})(jQuery);
$(function go_prev() {
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 90) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'top' : 10,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<script>
var NumIms = 0;
var NumTxts = 0;
//IMAGE VARIABLES
var ImIds=[];
var ImNm=[];
var ImWdth=[];
var ImHght=[];
//TEXT VARIABLES
var TxtIds=[];
var Txt=[];
var TxtFnt=[];
var TxtCol=[];
var TxtSz=[];
var MyWidth;
var MyHeight;
var img;
function MoveOver(id,Rid) {
var img = new Image();
img.src = Rid;
MyWidth = img.width;
MyHeight = img.height;
$("#UpIm" + id).append("W=" + MyWidth + " H=" + MyHeight);
$("#containment-wrapper").append('<div id="AdIm' + id + '" class="draggable ui-widget-content" style="width:' + MyWidth + 'px; height:' + MyHeight + 'px; background-image: url(' + Rid + '); position:absolute; left:18px; top:18px;"></div>');
ImIds[id]="AdIm" + id;
ImNm[id]=Rid;
ImWdth[id]=MyWidth;
ImHght[id]=MyHeight;
$( "#AdIm" + id ).draggable();
var f = document.getElementById('UpIm' +id);
var Olddiv = document.getElementById('ul' + id);
f.removeChild(Olddiv);
}
</script>
<script>
function removeIm(id) {
var f = document.getElementById('files');
var Folddiv = document.getElementById('UpIm' + id);
f.removeChild(Folddiv);
var d = document.getElementById('containment-wrapper');
var Dolddiv = document.getElementById('AdIm' + id);
d.removeChild(Dolddiv);
ImIds.splice(id,1,"deleted");
}
</script>
<script type="text/javascript" >
var iid = -1;
var pic_real_width, pic_real_height, img;
function removeFormIm(Rid,id) {
var f = document.getElementById('files');
var Folddiv = document.getElementById('UpIm' + id);
f.removeChild(Folddiv);
var d = document.getElementById('containment-wrapper');
var Dolddiv = document.getElementById('AdIm' + id);
d.removeChild(Folddiv);
}
</script>
<style>
#containment-wrapper { width: 845px; height:150px; border:2px solid #ccc; }
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.t_t{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
<script>
function changeTxt(id){
var my_txt;
my_txt = document.getElementById('TxtIn' + id).value;
document.getElementById('AdText' + id).innerHTML = my_txt;
Txt[id] = my_txt;
}
</script>
<script>
function makebold(id){
$('#TxtIn' + id).insertAtCaret('<b></b>');
changeTxt(id);
}
function makeitalic(id){
$('#TxtIn' + id).insertAtCaret('<i></i>');
changeTxt(id);
}
function makecenter(id){
var my_txt;
my_txt = document.getElementById('TxtIn' + id).value;
$("textarea#TxtIn" + id).val('<center>' + my_txt + '</center>');
changeTxt(id)
}
function makebr(id){
$('#TxtIn' + id).insertAtCaret('<br>');
changeTxt(id);
}
function makelink(id){
get_color = document.getElementById('fcolor' + id).value;
$('#TxtIn' + id).insertAtCaret('');
changeTxt(id);
}
function makeh2(id){
$('#TxtIn' + id).insertAtCaret('<H2></H2>');
changeTxt(id);
}
function makeh3(id){
$('#TxtIn' + id).insertAtCaret('<H3></H3>');
changeTxt(id);
}
</script>
<script>
function callFontType(id){
var type;
type = document.getElementById('ftype' + id).value;
document.getElementById('AdText' + id).style.fontFamily=type;
TxtFnt[id] = type;
}
</script>
<script>
function CxColor(id){
var Clor;
Clor = document.getElementById('fcolor' + id).value;
Clor = '#' + Clor;
document.getElementById('AdText' + id).style.color=Clor;
TxtCol[id] = Clor;
}
</script>
<script>
function changeFSize(id){
var my_size;
my_size = document.getElementById('SizeIn' + id).value;
my_size = my_size + 'px';
document.getElementById('AdText' + id).style.fontSize = my_size;
TxtSz[id] = my_size;
}
</script>
<script>
var id = -1;
function addFormField() {
id = id + 1;
$("#divTxt").append("<span id='row" + id + "'><small>Add: to textbox:</small><input value=\"b\" onclick=\"makebold(" + id + ")\" title=\"bold: <b>text</b>\" type=\"button\"><input value=\"i\" onclick=\"makeitalic(" + id + ")\" title=\"italic: <i>text</i>\" type=\"button\"><input value=\"center\" onclick=\"makecenter(" + id + ")\" title=\"center: <center>text</center>\" type=\"button\"><input value=\"BR\" onclick=\"makebr(" + id + ")\" title=\"BR: <br>\" type=\"button\"><input value=\"link\" onclick=\"makelink(" + id + ")\" title=\"link: <a href= >URL</a>\" type=\"button\"><input value=\"H2\" onclick=\"makeh2(" + id + ")\" title=\"H2: <H2>text</H2>\" type=\"button\"><input value=\"H3\" onclick=\"makeh3(" + id + ")\" title=\"H3: <H3>text</H3>\" type=\"button\"><br><table><tr><td><a onClick='removeFormField(\"#row" + id + "\",\"" + id + "\"); return false;'>REMOVE</a></td><td> <textarea cols=50 rows=5 name='txt[]' id='TxtIn" + id + "' onKeyUp=\"changeTxt(" + id + ");\">Text " + id + "</textarea></td><td>Font:<select onChange=\"callFontType(" + id + ");\" id=\"ftype" + id + "\"><option value=\"Arial, Helvetica, sans-serif\">Arial</option><option value=\"Impact, Charcoal, sans-serif\">Impact</option><option value=\"Palatino Linotype, Book Antiqua, Palatino, serif\">Palatino</option><option value=\"Tahoma, Geneva, sans-serif\">Tahoma</option><option value=\"Century Gothic, sans-serif\">Century Gothic</option><option value=\"Lucida Sans Unicode, Lucida Grande, sans-serif\">Lucida Grande</option><option value=\"Arial Black, Gadget, sans-serif\">Arial Black</option><option value=\"Times New Roman, Times, serif\">Times New Roman</option><option value=\"Arial Narrow, sans-serif\">Arial Narrow</option><option value=\"Verdana, Geneva, sans-serif\">Verdana</option><option value=\"Copperplate, Copperplate Gothic Light, sans-serif\">Copperplate</option><option value=\"Lucida Console, Monaco, monospace\">Lucida Console</option><option value=\"Gill Sans, Gill Sans MT, sans-serif\">Gill Sans</option><option value=\"Trebuchet MS, Helvetica, sans-serif\">Trebuchet</option><option value=\"Courier New, Courier, monospace\">Courier New</option><option value=\"Georgia, Serif\">Georgia</option></select><br>Color: <input id=\"fcolor" + id + "\" class=\"color\" value=\"000000\"><img src=\"go.png\" style=\"vertical-align:middle;\" onClick='CxColor(" + id + ");'><br>Size: <input type='text' size='4' value=\"12\" name='txt[]' id='SizeIn" + id + "' onKeyUp=\"changeFSize(" + id + ");\"></td></tr></table><br><hr style=\"width:800px; float:left;\"><br></span>");
$("#containment-wrapper").append('<span id="AdText' + id + '" class="draggable ui-widget-content" style="position:absolute; left:18px; top:18px; font-size:16px; font-family:Arial, Helvetica, sans-serif;">Text ' + id + '</span>');
$( "#AdText" + id ).draggable();//{ containment: "#containment-wrapper", scroll: true }
$('#fcolor' + id).load(jscolor.init());
TxtIds[id] = "AdText" + id;
Txt[id] = "Ad Text";
TxtFnt[id] = "Arial";
TxtCol[id] = "#000000";
TxtSz[id] = "16";
$('#row' + id).highlightFade({
speed:1000
});
document.getElementById("id").value = id;
}
function removeFormField(Rid,id) {
$(Rid).remove();
var d = document.getElementById('containment-wrapper');
var olddiv = document.getElementById('AdText' + id);
d.removeChild(olddiv);
TxtIds.splice(id,1,"deleted");
}
function GetURL(id) {
var gurl;
var Ims = "";
var len=ImIds.length;
NumIms = 0;
NumTxts = 0;
//############ Start Get Images for URL ##############
for(var i=0; i<len; i++) {
NumIms++;
var value = ImIds[i];
Ims += '&ImName' + i + '=' + value;
if (value != "deleted"){
value = ImNm[i];
Ims += '&ImNm' + i + '=' + value;
value = ImWdth[i];
Ims += '&ImWidth' + i + '=' + value;
value = ImHght[i];
Ims += '&ImHeight' + i + '=' + value;
value = $('#AdIm' + i).position().left - $('#AdIm' + i).closest('#containment-wrapper').position().left;
Ims += '&ImLt' + i + '=' + value;
value = $('#AdIm' + i).position().top - $('#AdIm' + i).closest('#containment-wrapper').position().top;
Ims += '&ImTop' + i + '=' + value;
}
}
//########### End Get Images For URL #####################
len=TxtIds.length;
//############ Start Get Texts for URL ##############
for(var i=0; i<len; i++) {
NumTxts++;
var value = TxtIds[i];
Ims += '&TxtName' + i + '=' + escape(value);
if (value != "deleted"){
value = Txt[i];
Ims += '&Txt' + i + '=' + escape(value);
value = TxtFnt[i];
Ims += '&TxtFnt' + i + '=' + escape(value);
value = TxtCol[i];
value = value.substring(1);
Ims += '&TxtCol' + i + '=' + escape(value);
value = TxtSz[i];
Ims += '&TxtSz' + i + '=' + escape(value);
value = $('#AdText' + i).position().left - $('#AdText' + i).closest('#containment-wrapper').position().left;
Ims += '&TxtLt' + i + '=' + value;
value = $('#AdText' + i).position().top - $('#AdText' + i).closest('#containment-wrapper').position().top;
Ims += '&TxtTop' + i + '=' + value;
}
}
//########### End Get Texts For URL #####################
gurl = "ad.php?AdType=hero&ImNum=" + NumIms + "&TxtNum=" + NumTxts;
gurl = gurl + Ims;
//alert(gurl);gurl = escape( gurl );
$("#genurl" + id).html('<textarea id="fe_text" cols=50 rows=5 name="ad_url">' + gurl + '</textarea><br><br><table><tr><td><font style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#009999">Preview Gernerated Ad:</font></td><td><img src="view.png"></td></tr></table><br>');
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform1").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform1").serialize(), function(data) {
$('#results').fadeIn('fast');
var mySplitResult = data.split("|||");
if(mySplitResult[1] !== "fail" && mySplitResult[1] !== "disable"){
$('#upd1').html('<textarea id="fe_text" cols=50 rows=5 readonly="readonly">' + mySplitResult[1] + '</textarea><br />');
}
$('#results').html(mySplitResult[0]);
$('#prev1').html(mySplitResult[1]);
setTimeout(function() {
$('#results').fadeOut('slow');
}, 2500);
});
}
});
});
</script>
<script type="text/javascript" src="jscolor.js"></script>
</head>
<body>
<div id="containment-wrapper">
<!--<span id="AdText0" class="draggable ui-widget-content">For Testing ... </span> -->
</div>
<div style="margin-left:50px;">
<center><p style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#FF0099">Text Field Input</p>
<p>Add Text Field</p></center>
<form action="#" method="get" id="form1" style="font-family:Arial, Helvetica, sans-serif; font-size:16px;">
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
</form>
</div>
<!-- End Hidden Divs -->
</body>
</html>