I am using the following code to print a document:
function print(html) {
$('<iframe>', {
name: 'myiframe',
class: 'printFrame'
}).appendTo('body').contents().find('body').append(html);
window.frames['myiframe'].focus();
window.frames['myiframe'].print();
setTimeout(() => { $(".printFrame").remove(); }, 1000);
}
var html = '<head>' +
'<link rel="stylesheet" href="/static/css/main.css" type="text/css" media="print">' +
'<link rel="stylesheet" href="/static/css/vahan.css" type="text/css" media="print">' +
'</head>' +
'<body>' +
'<div>Test</div>' +
'</body>';
print(html);
The problem is that I see pure html without any of css applied. There's definitely something simple that I can't figure out. Any hints?
You need to first append the html to the document before you can add the iframe.
function print(html) {
// Add the html
document.innerHTML = html
// Append the iframe to the body
$('<iframe>', {
name: 'myiframe',
class: 'printFrame'
}).appendTo('body').contents();
window.frames['myiframe'].focus();
window.frames['myiframe'].print();
setTimeout(() = > {
$(".printFrame").remove();
}, 1000);
}
Related
I am making an HTML terminal, and have done most of the styling. I am trying to add one command, though, which will change the color. You can run these code snippets, and see why I'm asking this, but when you type in color and then a color, instead of doing what I'm trying to make it do, it just gives you a (mostly) white screen. Please help, as this needs to be finished before tommorow.
$('body').terminal({
iam: function(name) {
this.echo('Hello, ' + name +
'. Welcome to Coding Class!');
},
echo: function(what) {
this.echo(what)
},
link: function(link) {
window.location.replace("http://www." + link);
},
color: function(color) {
var body = document.querySelector("body");
body.className = "test";
var temp = document.querySelectorAll(".test");
for (var i = 0; i < temp.length; i++) {
temp[i].style.color = color;
temp[i].style.fontSize = "40px";
}
}
}, {
greetings: 'Hi!',
prompt: 'root> '
})
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
</script>
<link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
</head>
<body>
</body>
let $ = jQuery.noConflict();
$('body').terminal({
iam: function(name) {
this.echo('Hello, ' + name +
'. Welcome to Coding Class!');
},
echo: function(what) {
this.echo(what)
},
link: function(link) {
window.location.replace("http://www." + link);
},
color: function(color) {
var body = document.querySelector("body");
body.classList.add('test');// add class name `test` to body.
var temp = document.querySelectorAll(".test");
for (var i = 0; i < temp.length; i++) {
temp[i].style.setProperty('--background', color);// use set variable instead of `background-color`.
//temp[i].style.backgroundColor = color;// not recommended
temp[i].style.fontSize = "40px";
}
}
}, {
greetings: 'Hi!',
prompt: 'root> '
})
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js">
</script>
<link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" />
</head>
<body>
</body>
I'm showing you how to use add() CSS class name to body.
To make background color change on command color, I change the code to use setProperty() to set CSS variable instead because the CSS file itself is already use that variable (in .terminal class) and it is easier this way.
I need to strip all the tags containing a specific string,
How can I achieve this in javascript?
this is the string
<link rel="stylesheet" href="https://REMOVEME">
<link rel="stylesheet" href="https://ccc">
<link rel="stylesheet" href="https://abc/REMOVEME">
<div>yes</div>
and this the result
<link rel="stylesheet" href="https://ccc">
<div>yes</div>
Such tasks are better not done with regular expressions.
Instead use the DOM interface available to JavaScript, for instance with this ES6 function:
function removeLinks(html, match) {
var container = document.createElement('span');
container.innerHTML = html;
Array.from(container.querySelectorAll('link[href*=' + CSS.escape(match) + ']'))
.forEach( link => link.parentNode.removeChild(link) );
return container.innerHTML;
}
// Sample input
var html = '<link rel="stylesheet" href="https://REMOVEME">' +
'<link rel="stylesheet" href="https://ccc">' +
'<link rel="stylesheet" href="https://abc/REMOVEME">' +
'<div>yes</div>';
// Remove links that match REMOVEME
html = removeLinks(html, 'REMOVEME');
// Output result
console.log(html);
htmlString.replace(/<link[^>]*href="[^>]*REMOVEME[^>]*"[^>]*>/gi,'')
I use this function to make print
function printContent(el,tble,img) {
var printcontent = document.getElementById(el).innerHTML
+" <div class='row'><span class='glyphicon glyphicon-tasks'></span><b></b></div>"
+ document.getElementById(tble).innerHTML
+ document.getElementById(img).innerHTML;
var w = window.open();
$(w.document.body).html(printcontent);
w.print();
}
this works fine for me but the problem is it didn't contain the same page design and the print page has no design
please help
You should use a link in the head of your page:
<link rel="stylesheet" type="text/css" media="print" href="style.css">
Note the media attribute.
Edit:
var bodyContent = document.getElementById(el).innerHTML
+" <div class='row'><span class='glyphicon glyphicon-tasks'></span><b></b></div>"
+ document.getElementById(tble).innerHTML
+ document.getElementById(img).innerHTML;
var windowHTML = '<html><head><title>Print page</title><link rel="stylesheet" type="text/css" media="print" href="style.css"></head><body>' + bodyContent + '</body>';
var w = window.open();
w.document.write(windowHTML);
w.print();
I am new to bootstrap and working in D3.js, crossfilter.js to generate the table contents. I like to get the dataTable as in the following URL with some pagination and searching with in the datatable using bootstrap.
In that example the table is statically defined with id and class. I am able to run the html page with the desired output as in the example page source code.
But in my case I am generating a table from function and not able to get the pagination and searchBox on top of the table. I added all the supported files such as js and css files.
Here is my code and I just reduced the code to avoid more spaces in this portal. May I know where I am doing mistake.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=us-ascii">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DataTables example - Bootstrap</title>
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.js"></script>
</head>
<body>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<script type='text/javascript' src="crossfilter.js"></script>
<div id="Default" class="default"></div>
<script>
$(document).ready(function () {
$('#example').dataTable();
$('#Default').show();
});
d3.json("myJson.json", function (desing) {
var data = desing;
var ndx = crossfilter(data);
var state1 = ndx.dimension(function (d) {return d.region;});
var dist1 = ndx.dimension(function (d) { return d.cluster;});
var taluk1 = ndx.dimension(function (d) { return d.center;});
var village1 = ndx.dimension(function (d) { return d.loan_type_id;});
cfds = ndx.dimension(function (d) {return d.region; });
$("#Default").html(totable(cfds.top(Infinity)));
cfds.filterAll();
});
function totable(json) {
var html = "";
html += "<thead>"
html += "<tr>"
html += "<th>REGION</th>"
html += "<th>CLUSTER</th>"
html += "<th>CENTER</th>"
html += "<th>GLP MONTH</th>"
html += "<th>LOAN AMT DISBURSED</th>"
html += "<th>NEW MEMBERS</th>"
html += "<th>DEMAND</th>"
html += "<th>PRINCIPAL</th>"
html += "<th>INTEREST</th>"
html += "<th>WRITTEN OFF</th>"
html += "<th>HM-PROCESSED</th>"
html += "<th>HM-ELIGIBLE</th>"
html += "<th>Eligible %</th>"
html += "<th>LOAN TYPE</th>"
html += "</tr>"
html += "</thead>"
json.forEach(function (row) {
html += "<tr role='row'>";
for (key in row) {
html += "<td>" + row[key] + "</td>";
};
html += "</tr>";
});
return "<table id='example' class='table table-striped table-bordered' cellspacing='0' width='100%' role='grid' aria-describedby='example_info'>" + html + "</table>";
}
</script>
</body>
</html>
It is working after I put the supported js files has been defined upon the end of the body tag.Also I initiate the dataTable under d3 function. All goes well now.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
</body>
</html>
Hope its useful for someone..
So I have a website with a Header.html. In the header are three buttons. I've copied the Header.html into all of my other pages with jquery's load. Now what I would like to do is change the colour of one of the buttons depending on the page it's on. But when I use document.GetElementById in javascript it can't find the div of the button I've copied from the Header.html
Here's the Header.html
<div id="Header_Wrapper">
<div id="Header_PageLinksWrapper">
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_Games" href="..\Pages\Games.html">Games</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_AboutMe" href="..\Pages\AboutMe.html">About Me</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_CV" href="..\Pages\CV.html">CV</a>
</div>
</div>
</div>
The javascript file:
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html");
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
}
);
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = document.getElementById(id);
if (divElement == null)
{
console.log("Could not find element " + id);
}
divElement.style.color = 0xffffff;
}
One of the pages (eg. Games.html)
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Adabelle Combrink - Games</title>
<link rel="stylesheet" type="text/css" href="..\Templates\Header.css"/>
<link rel="stylesheet" type="text/css" href="..\Templates\Page.css"/>
<link rel="stylesheet" type="text/css" href="..\Pages\Games.css"/>
<script type="text/javascript" src="..\Scripts\jQuery.js"></script>
<script type="text/javascript" src="..\Scripts\Defaults.js"></script>
</head>
<body>
<header>
<div id="Header"></div>
</header>
</body>
</html>
What this gives me in the console is Could not find element PageLink_Games. I don't get that error if I use something that is in Games.html like Header.
Is there any other way of doing the same thing. I know you can include files into eachother with php but I haven't gotten that right and don't seem to be able to run .php files in Visual Studio.
jQuery.load has a success callback. Use it to assure your code is only executed after the loading is complete.
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", null, function() {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);
Also your SetPageLinkColours function can be improved with jQuery:
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = $("#"+id);
if (!divElement.length)
{
console.log("Could not find element " + id);
}
else
{
divElement.css('color','white');
}
}
load function makes async request , so your code tries to find element before it rely appears. U need to use load function callback http://api.jquery.com/load/
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", function () {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);