Print a table tag with js - javascript

I'm trying to print a table but it captures the whole page and in mobile mode, I would like to just print the addr-table class as below:
HTML
<table class="addr-table">
... table content...
</table>
Print
JS
<script>
$('.js-print-link').on('click', function() {
var printBlock = $(this).parents('.addr-table').siblings('.addr-table');
printBlock.hide();
window.print();
printBlock.show();
});
</script>
I tried many formats including suggestions on SO, this code performed the best, now the last huddle.
How can I capture just the table in normal pc mode not mobile mode

please try it ... it works correctly:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
#media print {
*{visibility:hidden}
.printable,.printable *{
visibility:visible
}
}
</style>
</head>
<body>
<div>
this content is not printable
</div>
<table class="printable">
<tr>
<td>
... table content...
</td>
</tr>
</table>
Print
</body>
</html>

Related

HTML does not display as expected

I have 2 files,
test.html
<!DOCTYPE html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./test/jquery.min.js"></script>
</head>
<body>
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<p id="11" ></p>
<script> $( "#11" ).load( "end.html") </script>
</body>
</html>
end.html
info:No
Creation time:2020.05.01-17.03
Change the time: <script>document.write(document.lastModified);</script>
There are two display effects:
Number One and Number Two
Reproducing this effect:
test1
test2
test3
test4
info:No
Creation time:2020.05.01-17.03
Change the time:05/24/2020 09:19:23
Are you sure your JQuery URL is being picked up, maybe add a direct link in header of your test.html
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
Also, don't forget to close your statements off with a semi-colon
<p>test4</p>
<p id="11" ></p> <script>$("#11").load("end.html");</script>
Also, I don't know if that script is running there, maybe do the following at the bottom of your page instead of putting the script tag there. This will execute the line when the HTML Dom is loaded
<script>
$(document).ready(function(){
$('#11').load("end.html");
});
</script>
test.html
<!DOCTYPE html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./test/jquery.min.js"></script>
</head>
<body>
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<script src="end.js"></script>
</body>
</html>
end.js
document.writeln("<p>info:No");
document.writeln("Creation time:2020.05.01-17.03</p>");
document.writeln("Change the time:<script>document.write(document.lastModified);</script>");
ok

HTML Tags showing up in browser when using CKEditor with ExpressJS

Here's my app.js file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/css/style.css" rel="stylesheet" type="text/css">
<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
<title>Jo Blog</title>
</head>
<body>
{{{body}}}
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
// CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.replace('content', {
plugins: 'wysiwygarea , toolbar, basicstyles, link',
enterMode: CKEDITOR.ENTER_BR,
autoparagraph: false,
uiColor: '#AADC6E',
removePlugins: 'elementspath'
});
</script>
</body>
</html>
and here is the form I'm wanting it to affect - new.handlebars
<h1>New Blog</h1>
<form method="post" action="/blog">
<label>Title</label><br>
<input type="text" name="title"/><br>
<label>Blog Content</label><br>
<textarea name="content" id="ckEdit"></textarea><br>
<input type="submit" name="submit">
</form>
Now the editor comes up just fine and I can write in it but when I hit submit the HTML tags are still all there eg "< p >Hello World< p >"
I've googled the crap out of this problem, and read everything I can find on here about it and tried everything I have read but nothing is working :/ Any ideas??
I got your code to submit the form content and title without displaying the html tags in the browser.
The file ckeditor.js is loaded twice from two sources, once in the head by a cdn and again in the body. It's possible they are conflicting. I commented out the scripts in the body, and kept the cdn.ckeditor[...]ckeditor.js script in the head.
For testing purposes I removed the handlebars {{{body}}} and inserted the form directly into the html file.
I doubt the problem is in the form's action "/blog", but in order to see the returned result I changed the form's action to "form.php" (included below). The file form.php just sends the submitted content back to the browser. It does show the submitted content and title correctly displayed in the browser.
Here's "form.php" and the modified html files.
Hope this helps a little with trouble shooting.
form.php
<?php
$title = $_POST['title'];
$content = $_POST['content'];
print <<< PRINT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>$title</title>
</head>
<body>
$content
</body>
</html>
PRINT;
?>
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link href="/css/style.css" rel="stylesheet" type="text/css">-->
<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
<title>Jo Blog</title>
</head>
<body>
<!-- changed the form's action from /blog to form.php for demo purposes -->
<form method="post" action="form.php">
<label>Title</label><br>
<input type="text" name="title"/><br>
<label>Blog Content</label><br>
<textarea name="content" id="ckEdit"></textarea><br>
<input type="submit" name="submit">
</form>
<!--
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
-->
<script type="text/javascript">
// CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.replace('content', {
plugins: 'wysiwygarea , toolbar, basicstyles, link',
enterMode: CKEDITOR.ENTER_BR,
autoparagraph: false,
uiColor: '#AADC6E',
removePlugins: 'elementspath'
});
</script>
</body>
</html>

Change meta tag content dynamically through javascript

I want to change the meta tag content i.e. refresh rate and url dynamically using javascript. Using a button to enable javascript function. Tried 3 alternatives but not working. Please help.
Thanks,Amresh
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag"
content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
<!--document.querySelector('meta[name="description"]').setAttribute("content","5;URL=http://google.co.in");-->
<!--document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");-->
var m = document.createElement('meta');
m.name = 'description';
m.id = 'mymetatag';
m.content = '5;URL=http://google.co.in';
m.HTTP-EQUIV= 'refresh';
document.head.appendChild(m);
}
</script>
This works for me.
The issue could have been that you tried a first code which did not work and you commented the code with HTML comments <!-- [...] -->instead of Javascript comments: // [...] or /** [...] */.
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag" content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");
}
</script>
</body>
</html>
I looks like you misuse the functionality of metatags, JS doesn't save the state between requests. And, BTW, you can do reload/redirect using the javascript itself.

Click Div make another Div Appear

I am trying to make a prompt box of sorts in which you click one div and another transitions from visibility = hidden to visibility = visible. This is my code so far and I don't know why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="C.K.">
<title></title>
<link rel="stylesheet" href="./css/main.css">
<script type="text/js">
document.getElementById("addpanel").onclick = document.getElementById("selector").style.visibility = "visble";
</script>
</head>
<body>
<div id="selector">
SELECTOR
</div>
<div id="addpanel">
<table id="add">
<tr>
<td id="plus">+</td>
</tr>
<tr>
<td>Add New Item</td>
</tr>
</table>
</div>
</body>
</html>
Check this out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="C.K.">
<title></title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="selector">
SELECTOR
</div>
<div id="addpanel">
<table id="add">
<tr>
<td id="plus">+</td>
</tr>
<tr>
<td>Add New Item</td>
</tr>
</table>
</div>
<script type="text/javascript">
document.getElementById("selector").style.visibility = "hidden";
document.getElementById("addpanel").onclick = function(){document.getElementById("selector").style.visibility = "visible";};
</script>
</body>
HTML is parsed top to bottom. Your script will be run immediately just in case it produces any more HTML for the parser to handle (e.g. with document.write). At the point of document.getElementById("addpanel").onclick, addpanel does not exist because the HTML parser hasn't reached it yet.
Move your <script> block to after your apppanel element's closing tag.
Also, onclick needs to be a function. So it would be:
document.getElementById("addpanel").onclick = function() {
document.getElementById("selector").style.visibility = "visible"
}
Quick working example: https://jsfiddle.net/m2q6ubuv/
Try this
function show(){
document.getElmenetById('selector').style.visibility = 'visible'; }
Then just put onclick='show()' as an attribute in the tag you want to be the button.
Plus, you should put JavaScript at the end of the page, just first of the </body> tag.

tinyMCE - Add style to <head> on getContent() method

I'm using timyMCE version 3 { majorVersion : '3', minorVersion : '5.4.1' }. When I put Content in textarea, I got below data.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p> Content </p>
</body>
</html>
What should I do to change it to below output as I call getContent() method?
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="UTF-8">
<style>
/** Specify a font named "MyFont",
and specify the URL where it can be found: */
#font-face {
font-family: "MyFont";
src: url('file:///android_asset/fonts/RSU_Regular.ttf');
}
body { font-family:"MyFont"}
</style>
</head>
<body>
<p> Content </p>
</body>
</html>
Can you help me please?

Categories