This question already has an answer here:
Print in Landscape format [duplicate]
(1 answer)
Closed 1 year ago.
I created a project using JavaScript where user can generate PDF document on button click. Everything is perfect except two things though I am not sure if it can be made worked. So here's the below that I did so far:
HTML:
<div class="card-body" id="card">
</div>
<input type="button" id="createDoc" value="Generate PDF" />
JavaScript:
//Generate pdf
$("body").on("click", "#createDoc", function () {
var sTable = document.getElementById('card').innerHTML;
var style = "<style>";
style = style + "body { border: 2px solid #1f497d; padding: 4%; margin: 0; }";
style = style + "table { width: 100%; font: 17px Calibri; } #showImages { height: 140px; width: 180px; } #BoxLeft { font-size:14px; width: 100%; margin: 0 auto; margin-top: 6%; height: 40px; } .Box1, .Box2 { float: left; width: 15%; } .box { height: 25px; border: 1px solid #bdbdbd; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px #bdbdbd; -webkit-box-shadow: 0 0 10px #bdbdbd; box-shadow: 0 0 10px #bdbdbd; } .Box1 { background-color: #1f497d; color:white; -webkit-print-color-adjust: exact; } .Box2 { background-color: white; -webkit-print-color-adjust: exact; } #BoxRight { font-size:14px; width: 100%; margin: 0 auto; margin-top: -12%; height: 40px; } .Box3, .Box4 { float: right; width: 15%; } .Box3 { -webkit-print-color-adjust: exact; } .Box4 { background-color: #1f497d; color:white; -webkit-print-color-adjust: exact; }";
style = style + "table, td { border: solid 2px #1f497d; border-collapse: collapse; font-size:14px;";
style = style + "padding: 2px 3px;text-align: center; } #projects th { height:10px; font-size:14px; background-color: #1f497d; -webkit-print-color-adjust: exact; color: white; }";
style = style + ".detailsWidth { width:60%; } .checked { color: gray; } #projects { margin-top: 9%; } .action, .hideId, .hide, .hideDate { display:none; } .top { margin-top: -5%; margin-left: 4%; } .topAside { margin-top: -5%; margin-left: 4%; } .heading { margin-top:3%; text-align:center; } .logoGpp { -webkit-print-color-adjust: exact; height: 140px; width: 250px; display: block; margin-left: auto; margin-right: auto; }";
style = style + "</style>";
var win = window.open('', '', 'height=700,width=700');
win.document.write("<html><head>");
win.document.write(style);
win.document.write("</head>");
win.document.write("<body><img class='logoGpp' src='/img/logo.jpg' /><div class='top topAside'><div id='BoxLeft'><div class='Box1'><div class='box'><h4 class='heading'>Job Reference: </h4></div></div><div class='Box2'><div class='box'><h4 class='heading'>" + $(".card-title").html() + "</h4></div></div></div></div>");
win.document.write("<div class='top'><div id='BoxRight'><div class='Box3'><div class='box'><h4 class='heading'>" + $(".card-title").html() + "</h4></div></div><div class='Box4'><div class='box'><h4 class='heading'>Initiation Date: </h4></div></div></div></div><br />");
win.document.write(sTable);
win.document.write("</body></html>");
win.document.close();
win.print();
});
So using the above, I am retrieving all data from a table that's appended to div a card (With a id). It renders content perfectly in the print preview with PDF format. But I am willing to know if it's possible to render the format in landscape and A4 paper size using the above JavaScript code, so I can render it by default with those properties. Right now, I've to do it manually in the print preview section.
There is an experimental CSS feature to set a suggestion for the default settings inside the print preview dialog, currently only supported by Chrome and browsers with a Chromium base:
https://developer.mozilla.org/en-US/docs/Web/CSS/#page/size
But in general, my impression of your provided code is that it's not generating a PDF file but it opens a new window or tab with an HTML page so the user has to print this page using a virtual PDF printer.
There are many libraries for PHP which generate a real PDF file from HTML content. Maybe one of them could be a sustainable solution for you.
One of many libraries doing that is Dompdf:
https://github.com/dompdf/dompdf
Related
I am working on a chatbot at the moment and trying to connect a GUI I have been working with to the project.
It is running smooth but my output is a little messed up; in particular, the chat boxes should alternate between the user and the BOT, but they are stacking on top and not formatting correctly.
I want to fix this issue, but keep the screen dividing in half down the middle so that the bot outputs are on the right and the users on the left. I just need to get them to alternate back and forth.
I've tried anchoring the newest box with a margin-top, tried setting a counter variable to update the placement of each new box, etc., but am having trouble spacing them relative to each other.
Below is the code without the backend work. So, this won't run perfect but it should get the setup I have across...
Here is the CSS code:
body {
font-family: Cambria;
color: rgb(122, 4, 4);
background-color: rgb(136, 175, 175);
}
h1 {
color: black;
margin-bottom: 0;
margin-top: 0;
text-align: center;
font-size: 40px;
}
h2 {
color: black;
font-size: 20px;
margin-top: 3px;
text-align: center;
}
#user_chatbox {
margin-left: 0;
margin-right: auto;
width: 50%;
margin-top: 30%;
}
#bot_chatbox {
margin-left: 50%;
margin-right: auto;
width: 50%;
margin-top: 10%;
/* height: 80%; */
/* background-color: pink; */
/* border-radius: 10px; */
}
#userInput {
margin-left: auto;
margin-right: auto;
width: 95%;
margin-top: 150px;
}
#textInput {
width: 92%;
border: 3px solid Black;
border-bottom: 3px solid #660096;
font-family: Cambria;
font-size: 16px;
}
#buttonInput {
padding: 10px;
font-family: Cambria;
font-size: 72;
}
.userText {
color: rgb(0, 0, 0);
font-family: Georgia;
font-size: 16px;
text-align: left;
line-height: 20px;
}
.userText span {
display:block;
width:auto;
background-color: rgb(87, 201, 152);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
.botText {
color: Black;
font-family: Consolas, monaco, monospace;
font-size: 16px;
text-align: left;
/* line-height: calc(29 + var(--chatbox_spacing))px; */
line-height: 20px;
}
.botText span {
display:block;
width:auto;
background-color: rgb(73,196,199);
padding: 10px;
border-radius: 10px;
/* counter-increment: var(--chatbox_spacing); */
}
... and here are the .html with .js code (within index.html) that is updating the blocks to be printed out with new information (input from the user and a reply from the bot):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Analysis Chatbot</h1>
<!-- The main chat environment for interacting with the bot. -->
<div>
<!-- The text of the bot. -->
<div id="bot_chatbox">
<p class="botText"><span>Welcome! How can I help you analyze your dataset?</span></p>
</div>
<div id="user_chatbox"></div>
<!-- The input text of the user interacting with the bot. -->
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message">
<input id="buttonInput" type="submit" value="Send">
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
$("#textInput").val("");
$("#user_chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("/get", { msg: rawText }).done(function(data) {
var botHtml = '<p class="botText"><span>' + data + '</span></p>';
$("#bot_chatbox").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if(e.which == 13) {
getBotResponse();
}
});
$("#buttonInput").click(function() {
getBotResponse();
})
</script>
</div>
</body>
</html>
Nothing breaks, but I have attached some images below of the current output. Again, it isn't as much that the replies are basic right now, but rather that I want the displayed text blobs to be alternating from the bot (right side) to the user (left side) while keeping the screen split in the middle.
I want that image to be: the top blue on the right (Welcome...) then the first green on the left (can you find me sales in...) then next blue on right and so on so forth...
I put together a basic example of what you're trying to do using a 100% width wrapper that holds the message inside. The wrapper has display:flex; so that the <div>s inside don't expand. Check it out:
$(document).ready(function() {
$('#sendUser').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message user"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
$('#sendBot').click(function(){
if($('#userText').val()!=""){
$('#chatbox').append('<div class="message bot"><div>'+$('#userText').val()+'</div></div>');
$('#userText').val('');
}
});
});
#chatbox{
width: 300px;
height: 400px;
border: 1px solid black;
margin: auto;
margin-top: 20px;
overflow-y: scroll;
}
#inputs{
display: grid;
padding: 10px 0;
width: 300px;
margin: auto;
grid-template-columns: auto 40px 40px;
grid-gap: 4px;
}
.button{
text-align: center;
border: 1px solid #a0a0a0;
cursor: pointer;
}
.button:hover{
background-color: grey;
color: white;
}
.message{
display: flex;
}
.message.user{
text-align: left;
}
.message > div{
margin: 10px 10px 0;
padding: 6px 8px;
border-radius: 15px;
color: white;
}
.message.bot > div{
margin-left: auto;
background-color: teal;
}
.message.user > div{
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chatbox">
<div class="message bot">
<div>
hello
</div>
</div>
<div class="message user">
<div>
hello!
</div>
</div>
</div>
<div id="inputs">
<input type="text" id="userText">
<div class="button" id="sendBot">Bot</div>
<div class="button" id="sendUser">User</div>
</div>
Here's the CodePen if you wanted to mess with it.
Thank you for the help in advance.
This project is a signup form that will use a chat system to collect the user's profile details during their onboarding process. This is my first jQuery project, so I am struggling to spot my mistakes.
My jQuery should append the value in the textarea to the #message-feed div and apply the CSS classes of .message, .bubble and .user to the new element it creates.
However, when I type into the text area and click submit, it flashes the value I have just typed with no styling in the message feed, but it instantly disappears.
The reason for this CSS structure is the interchangeability between the .bot and .user classes depending on whether it is a question presented to the user by the website, or a user's response to a question.
Here is a link for a JSFiddle but it loads very differently than on my local machine (JSFiddle shows errors.
HTML
<div id="container">
<div id="message-feed">
<h1>Let's get to know you a little bit more…</h1>
</div>
<form method="POST">
<div id="text-response">
<textarea id="text-response" placeholder="Type in here…"></textarea>
</div>
<input type="submit" class="submit-response">
</form>
</div>
CSS
#container {
width: 320px;
height: 480px;
background-color: #fff;
position:absolute;
left:50%;
top:50%;
margin:-240px 0 0 -160px;
}
#message-feed {
width: 100%;
height: 100%;
margin: auto;
overflow-y: scroll;
}
.message {
padding: 0px 15px 15px 15px;
width: 90%;
}
.message:after {
content:"";
display: block;
clear: both;
}
.bubble {
border: 0.5px solid #005393;
max-width: 80%;
padding: 10px;
}
.bot {
color: #005393;
float: left;
border-radius: 12px 12px 12px 0px;
}
.user {
float: right;
background-color: #005393;
border-radius: 12px 12px 0px 12px;
color: #fff;
}
#text-response {
height: 23px;
width: 220px;
border-top: 1px solid #eee;
background-color: #fff;
float: left;
}
textarea {
height: 20px;
width: 220px;
float: left;
resize: none;
border: none;
padding: 10px;
line-height: 22px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
overflow: auto;
}
.submit-response {
height: 45px;
width: 80px;
background-color: #005393;
color: #fff;
float: right;
text-align: center;
line-height: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
border: 0;
}
.submit-response:hover {
opacity: 0.5;
}
jQuery
$(document).ready(function() {
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
});
2 problems over there :
1/ You're not preventing the event default behavior. That means whenever you're clicking on the button which is a submit input, it will send a POST request. So the page will change. To prevent this :
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
2/ You're not actually adding the classes. $.append appends elements, not classes. So :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessageText = $('textarea[name=text-response]').val(),
$newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>');
$('#message-feed').append($newMessage);
});
Now obviously it doesn't have to be a span, it could be anything else. It still has to be an element.
Also, this is only resolving the issues you had on the front end. You'll need AJAX to send the POST to the server side and get the data without refreshing/leaving the page. But that's another topic.
I am trying to change the UL image in the CSS folder using jQuery. This is for a Twitter stream, where the avatar of the account posting is changed alongside the tweet.
Using .css is pretty straight forward, but I am struggling to change the URL for the new image.
Here is my client code:
$(document).ready(function(){
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('info', function(data){
console.log("this is teh question" + " " + data);
$("#tweets").prepend("<li>" + data + "</li>");
});
socket.on('reply', function(data){
console.log("this is my reply" + " " + data);
$("#messages").prepend("<li>" + data + "</li>");
});
socket.on('userPic', function(data) {
console.log("the userPic: " + data);
$("ul#tweets").css("list-style-image: url", data);
});
});
And the CSS:
body {
font: 13px Helvetica, Arial;
max-width: 1250px;
width: 100%;
margin: auto;
}
form {
background: #fff;
padding: 10px;
width: calc(100% - 20px);
display: inline-block;
border-bottom: 1px solid #ccc;
}
form input {
border: 3px inset;
padding: 7px 5px;
width: calc(100% - 140px);
margin-right: 10px;
display: inline-block;
font-size: 15px;
}
form button {
width: 110px;
background: #177cc1;
color: #fff;
border-radius: 6px;
text-transform: uppercase;
font-size: 22px;
border: none;
padding: 5px 10px;
display: inline-block;
cursor: pointer;
}
form button:hover {
background: #177cee;
}
form button:active {
background: #177caa;
}
form button:focus {
outline: 0;
}
.container {
display: inline-block;
width: calc(100% - 60px);
padding: 20px;
margin: 5px 10px 20px;
background: #222;
}
.content {
display: inline-block;
width: 100%;
box-shadow: 1px 1px 1px 1px #555;
border: 1px solid #555;
}
.tweets_container {
display: inline-block;
width: 100%;
background: #fff;
}
.header {
font-size: 32px;
text-align: center;
text-transform: uppercase;
color: #fff;
background: #333;
padding: 15px;
}
#messages, #tweets {
display: inline-block;
margin: 5px;
padding: 10px;
width: calc(50% - 32px);
}
#tweets li, #messages li {
padding: 10px;
font-size: 18px;
}
#messages {
background: #444;
color: #fff;
}
ul#tweets {
list-style-image: url("");
height: 100px;
width: 100px;
}
ul#messages {
list-style-image: url("");
height: 100px;
width: 100px;
}
#tweets {
background: #fff;
color: #333;
}
.footer {
}
I believe this:
$("ul#tweets").css("list-style-image: url", data);
should be changed to:
$("ul#tweets").css("list-style-image", "url('"+data+"')");
Without looking at your nodejs and socket.io, check if socket.on('userPic', function(data) {, the userPic event is being fired. If so, check if the valid of data is valid for this scenario.
The way list-style-image works is that it requires a working url in a format of list-style-image:url(''), so your data argument needs to be a valid image path wrapped by parentheses as well as quotes.
Because css just deals with simple property value pairs, your JS will need to update the entire of the value in order to work. Here is an example, click on the image to see the change (I used background image for simplicity, there's no difference beyond the name of the property and the principle of providing a fully formed property value is demonstrated) ...
$('.image').css(
'background-image',
'url("http://lorempixel.com/400/200/sports/")'
);
You would use something like this to take a variable:
$('.image').css(
'background-image',
'url("' + data + '")'
);
This is the same as any other css property change. The whole value on the right needs to be updated in order for it to work. A similar problem people sometimes encounter is forgetting to add a unit to size value such as width and putting a number straight in:
.css('width', number); // wrong
.css('width', number + '%'); // right
I am new in PHP. I have a code file which contain php and html code. In my code i print an HTML page by
<script type="text/javascript">
window.print();
</script>
I use some CSS for my print page like i set page size etc. But problem is that if content on the page is increase its result will be destroy of formatting of page. I want to restrict that content will be on only ONE page. Is it possible?
My CSS
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 210mm;
min-height: 297mm;
padding: 20mm;
margin: 8mm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-top: 2px solid #009;
}
}
</style>
You can use word counting ... I'm just breaking it up on spaces so it obviously isn't going to be an exact science but it will probably work for most cases.
<script>
(function($){
$(function(){ //document.ready
var data = $("#myContent").text();
var arr = data.split(' ');
var count = arr.length;
runResize(count);
$( window ).resize(runResize(count));
}); /end document ready
function runResize(count) {
if (count > 500) {
$("#myContent").css('font-size', '90%');
} else if (count > 1000) {
$("#myContent").css('font-size', '80%');
} else if (count > 1500) {
// etc..
} else {
$("#myContent").css('font-size', '100%');
}
};
})(jQuery);
</script>
Create the following .htaccess file under "static-files":
Order Deny,Allow
Deny from all
Allow from 000.000.000.000
<?php
session_start();
session_regenerate_id();
if((!isset($_SESSION['username']))&&(!isset($_SESSION['name']))&&(!isset($_SESSION['role']))){ // if there is no valid session
header("Location: login.html");
}
if($_SESSION['role']=='1'){
$login=$_SESSION['name'];
}
if($_SESSION['role']=='0'){
$login='Hello '.$_SESSION['name'].' you have successufully logged in as User!';
}
?>
Use Sessions for such kind of restriction.
Authoriz the user by checking its type
If unauthorized then redirect them to some error dispaying page.
In my project, I have this <div> which receives, via jquery function, the content read from several pages and display them as a popup window:
<div id="popup">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
The css associated to this is the following:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
width: 1000px;
height: 900px;
max-width: 1500px;
max-height: 1000px;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
background-color: #FFFFFF;
border-style: solid;
border-color: #E0E0E0;
text-decoration-color: #E0E0E0;
font: 24px sans-serif;
overflow: auto;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
and the content is appended in this <div> through this jquery code:
<script>
$('document').ready(function(){
$('#popup').draggable({
cointainment: "#container"
});
$('#popup').resizable({
cointainment: "#container"
});
$('#popup').hide();
$('#button').click(function(){
$('#popup').hide();
});
$('a').click(function(e){
if($(this).attr('href') != '<c:out value="${pageContext.request.contextPath}/acesso/logout.html"/>') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#popup').show();
});
}
});
});
</script>
My problem is the content attached to <div> being displayed ou of the boundaries of the popup, like this:
Someone knows how to solve this?
UPDATE
new code for the css file:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
max-width: 85%;
max-height: 85%;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
overflow: scroll-y;
}
It depends on how you want to solve it:
Make the popup scroll:
#popup {
overflow:scroll-y;
}
The ideal thing is to make the popup fit the content. But the problem is, that size depends on what is generated inside the popup. If it is predictable, maybe you can define some styles to force the geerated stuff to use relative (%) sizes, in this case your problem is solved. I mean, kind of:
#popup {
position:relative;
display:block;
}
#popup > div {
width: 100% !important;
height: 100% !important;
}
This will work if inside #popup there's one div with the rest of the contents. Find out what's inside to make this fit your needs. You can overwrite styles with the !important tag.
If, on the other hand, you really have no idea what will be inside the popup, or everytime is different, you can detect the size of what's inside via javascript, and adjust #popup accordingly. Take a look at clientHeight and clientWidth properties of DOM elements.