Printing a variable from javascript - javascript

I have a variable named contract that has some HTML content received from the server. What is the simplest way to get this variable to get printed? By printing I mean hitting my button would: pop up the print window in Chrome with the document showing contents of my variable (since it is already a HTML formatted with CSS paged media, it looks a ready to be printed/saved pdf )
var contract = <HTML content>
$('#print').click(function () {
<Pops up the print window of chrome with 'contract' opened>
})
I have browsed through answers that suggest using iframes (here, here ) and answers which suggest window pop-ups (here) but to be honest, it is a little confusing as it shouldn't really be very difficult.
Could you please suggest a straightforward way to get this done?

Let's say that the content of the HTML has the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contract</title>
</head>
<body>
<h1>Contract</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eum soluta ullam, in, qui iusto omnis rerum nisi alias, ducimus, dignissimos rem deserunt excepturi illo sint unde harum quas! Id.</p>
<p>Signed: <br> Dated:</p>
</body>
</html>
Get them stored in a value, say myHTML.
$("input").click(function () {
myHTML = '';
myWin = window.open("about:blank", "_blank");
myWin.document.write(myHTML);
myWin.print();
});
Update using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Print Preview</title>
<style>
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, strong, b, th {font-weight: 600;}
textarea, tt, pre, pre *, code, code * {font-family: 'Consolas';}
/* End Praveen's Reset for Fiddle ;) */
h1 {font-size: 1.2em;}
h1, p {margin: 0 0 10px; line-height: 1.5;}
.logo img {display: block; max-width: 75%; margin: 0 auto;}
#dont-print {padding: 10px;}
#dont-print h1 {background-color: #eef; padding: 5px 10px; margin: -10px -10px 10px;}
#print-this {display: none;}
#media print {
#dont-print {display: none;}
#print-this {margin: 10px; display: block;}
}
</style>
</head>
<body>
<div id="dont-print">
<div class="logo">
<img src="https://www.microsoft.com/about/corporatecitizenship/en-us/downloadhandler.ashx?Id=07-03-02" alt="" />
</div>
<h1>Contract</h1>
<p>Print this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia dicta id, doloribus perspiciatis nam fugiat consequatur at inventore similique error excepturi praesentium vitae alias voluptatibus modi officiis atque dignissimos debitis.</p>
<p>Signed: <br>Dated:</p>
</div>
<div id="print-this">
<h1>Contract</h1>
<p>Print this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia dicta id, doloribus perspiciatis nam fugiat consequatur at inventore similique error excepturi praesentium vitae alias voluptatibus modi officiis atque dignissimos debitis.</p>
<p>Signed: <br>Dated:</p>
</div>
</body>
</html>
Live Demo: http://output.jsbin.com/vuzixonajo

Related

div doesn't respond when clicking on it in a show more/less container

So this div doesn't respond when I click on the h3 inside it or on the span
I used flex box in the "question-title" div, I guess that what causes the problem, is there a way I can make this div showing more/less when I click on it, not specifically outside h3 and the span, because it only works when I click in the space between h3 and the span.
let downBtn = document.querySelectorAll(".main-question .question-title");
downBtn.forEach(dbtn => {
dbtn.addEventListener("click", (e)=> {
let paragraphElement = e.target.parentNode.querySelector("p");
paragraphElement.classList.toggle("showHide");
let spanSign = dbtn.querySelector("span");
if (paragraphElement.classList.contains("showHide")) {
spanSign.innerHTML = "--";
} else {
spanSign.innerHTML = "+";
}
});
});
.question {
width: 60%;
margin: 0 auto;
}
.part-one h3 {
color: var(--main-color);
font-size: 30px;
margin: 0 0 20px;
}
.main-question {
margin: 20px auto;
padding: 20px;
text-align: center;
border: 1px solid rgb(207, 207, 207);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.main-question h4 {
margin: 0;
color: #607d8b;
}
.main-question h4::selection {
background-color: transparent;
}
.main-question p {
margin: 34px 0 0;
text-align: justify;
color: var(--main-color2);
display: none;
}
.main-question p.showHide {
display: block;
}
.question-title {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
height: 20%;
width: 100%;
background-color: #EEE;
padding: 20px;
}
.question-title span {
font-size: 20px;
font-weight: bold;
color: #607d8b;
letter-spacing: -3px;
}
.question-title span::selection {
background-color: transparent;
}
<!-- Start questions -->
<div class="container">
<div class="question">
<div class="part-one">
<h3>Some Frequent Questions</h3>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
<div class="main-question">
<div class="question-title">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
<span>+</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum fugiat ullam molestias dignissimos deleniti inventore aspernatur nam excepturi vitae nihil, temporibus accusantium tempore deserunt error libero, itaque earum sapiente sequi.</p>
</div>
</div>
</div>
</div>
<!-- End questions -->
Your issue here is this line of code:
let paragraphElement = e.target.parentNode.querySelector("p");
Since you didn't set the indentations on your HTML properly, I didn't notice this issue in the first place.
You need to use this instead:
let paragraphElement = e.target.closest(".main-question").querySelector("p")
The answer of your question in the comment is NO, but when you click h4, you also click div because they are occupying the same area, unless you added stopPropagation to your function. But "e.target" is the item you clicked directly. If it's h4, its parentNode is "question-title" and it has no "p" child.
When you work with JS, always use console.log(). You can see the problem most of the time.
//This part is not necessary because the class "showHide" will be toggled below
document.querySelectorAll(".main-question").forEach(el ...
Also change your CSS for ".question-title" => "justify-content: space-around;" to show the icon
let downBtn = document.querySelectorAll(".main-question .question-title");
downBtn.forEach(dbtn => {
dbtn.addEventListener("click", (e) => {
let paragraphElement = e.target.parentNode.parentNode.querySelector("p");
paragraphElement.classList.toggle("showHide");
let spanSign = dbtn.querySelector("span");
if (paragraphElement.classList.contains("showHide")) {
spanSign.innerHTML = "--";
} else {
spanSign.innerHTML = "+";
}
});
});

Accordion component hide on initial state with CSS + Javascript

So i have been trying to build this accordion component for a review section for a couple of days...I'm really new to javascript and have figured it out mostly except the review section that collapses out is being shown in the initial state so on a page reload you see the section expanded right away, and only is hidden when you click the expand arrow. I would rather it be hidden on the initial state so it only is shown after the user clicks the expand arrow.
I have a div with the class="reviewsHide" as a wrapper and another div with the class="reviewsActive" as a wrapper. Its written in sass and any solution i try to come up with in targeting the wrapper with javascript doesn't apply its children class styles so it ends up not looking right. Inside the main container wrappers i have 3 more container sections each is its own container. with a couple of classes inside each of those containers.
<div class="reviewsHide">
<div class="reviewsActive">
<div class="reviewsActive__top">
<button href="#" class="reviewsActive__top-smallTxt">Write A Review →</button>
<span class="reviewsActive__top-largeTxt">Reviews(10)</span>
<button href="#" class="reviewsActive__top-smallTxt">More Reviews →</button>
</div>
<div class="reviewsActive__bottomL">
<div class="reviewsActive__bottomL-title">
<img class="starSmall"src="img/main/StarRating.svg" alt="Star Rating"> Title
</div>
<p class="reviewsActive__bottomL-reviewP">
&nbsp Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, dolorem quae! Quidem officiis rerum nam, veritatis ullam, placeat est doloremque exercitationem, a quis sequi tempora blanditiis eligendi consequuntur. Ipsam a hic eligendi? Facilis vero fugit omnis ducimus inventore ipsam libero ad expedita numquam, ullam delectus ratione modi, atque esse veritatis.
</p>
</div>
<div class="reviewsActive__bottomR">
<div class="reviewsActive__bottomR-title">
<img class="starSmall"src="img/main/StarRating.svg" alt="Star Rating"> Title
</div>
<p class="reviewsActive__bottomR-reviewP">
&nbsp Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, dolorem quae! Quidem officiis rerum nam, veritatis ullam, placeat est doloremque exercitationem, a quis sequi tempora blanditiis eligendi consequuntur.
</p>
</div>
</div>
</div>
.reviewsHide.show {
height: 15rem;
display: none;
}
.reviewsActive {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: white;
height: 22.5rem;
font-family: 'Montserrat Alternates', sans-serif;
&__top {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
height: 3rem;
width: 100%;
&-smallTxt {
cursor: pointer;
font-size: 1.05rem;
}
&-largeTxt {
font-size: 2rem;
}
}
&__bottomL {
#include reviewsBottom;
margin: auto 1rem .75rem 1rem;
&-title {
#include reviewsTitle;
}
&-reviewP {
#include reviewsParagraph;
}
}
&__bottomR {
#include reviewsBottom;
margin: 1rem 1rem .75rem auto;
&-title {
#include reviewsTitle;
}
&-reviewP {
#include reviewsParagraph;
}
}
}
// Get the button, and when the user clicks on it, execute myFunction
document.querySelector(".span").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.querySelector(".reviewsHide").classList.toggle("show");
/* This selector below is for the arrow animation to rotate on click */
document.querySelector(".span").classList.toggle("spanshow");
}
Re-wrote my javascript to this and its working as intended
const reviewsOpen = () => {
var expandArrow = document.querySelector(".span");
var hide = document.querySelector(".reviewsHide");
expandArrow.addEventListener('click', () => {
hide.classList.toggle("reviewsHide");
expandArrow.classList.toggle("spanshow")
});
}
reviewsOpen();

Is it possible to set a max on how far a component can scroll horizontally before text is wrapped?

I'd like for users to be able scroll horizontally across text in a React component, but I'd like to still have some bounded width that's larger than the component's bounding rectangle. This way, I could just have regular paragraphs without worrying about any line breaking on-the-fly. I know I would need to set the overflow-x property to auto, but I'm not sure what to do past that. Thanks for the help!
Here would be my solution.
body {
width: 100%;
max-width: 800px;
margin: 30px auto;
}
.wrapper {
border: 1px solid #afafaf;
width: 100%;
overflow-x: scroll;
box-sizing: border-box;
}
.inner {
padding: 10px;
width: 130%;
}
<div class="wrapper">
<div class="inner">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex labore, provident dolorum repellendus earum aliquid voluptatem nobis odit. Deserunt corrupti repellendus voluptate harum quaerat adipisci aut sequi consequuntur voluptas cum?</div>
</div>

Text slider increases offset from the left after each iteration

I am basically transferring existing slider from existing site to a new one, and I didn't want to waste additional time by figuring out how to create a text slider from scratch, since the client wants the same thing on his new site.
I found the code and modified it a bit to work on the new site. Except it doesn't really works as it should. The slider looks like this:
var counter = 1;
var total_width = 0;
function slider_total_width() {
$('.items a').each(function() {
total_width += parseInt($(this).width(), 10);
});
$('.items').width(total_width);
}
slider_total_width();
function job_slider(wrapper) {
var first_link = $('#active');
var width = first_link.width();
$(wrapper + ' a').each(function() {
total_width += $(this).width() + 50;
});
first_link.removeAttr('id');
$(wrapper).animate({
left: '-=' + width
}, 1000, function() {
$(first_link).clone().appendTo(wrapper);
$(first_link).css('color', 'transparent');
var links = $(wrapper + ' a');
var new_first_link = links[counter];
counter++;
$(new_first_link).attr('id', 'active');
$(wrapper).width(total_width);
total_width = 0;
});
}
var activate = function() {
job_slider('.items');
};
var interval = setInterval(activate, 5000);
$('.items').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(activate, 5000);
});
.container {
margin: 0 auto;
width: 700px;
}
a {
text-decoration: none;
}
#ads_scroller .container {
font-size: 0;
position: relative;
}
#ads_scroller .icon_holder {
display: inline-block;
width: 3%;
margin-top: 8px;
}
#ads_scroller .icon_holder i {
font-size: 22px;
color: #fe9700;
}
#ads_scroller .scroller_container {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 97%;
height: 31px;
position: relative;
}
#ads_scroller .scroller_container .items {
position: relative;
display: block;
}
#ads_scroller .scrollable_title {
position: relative;
color: #727272;
font-size: 14px;
font-weight: 400;
line-height: 41px;
display: inline;
white-space: nowrap;
padding: 0 0 0 2px;
box-sizing: border-box;
}
#ads_scroller .scrollable_title:last-of-type {
margin-right: 0;
}
#ads_scroller #active.scrollable_title {
color: #1a171b;
}
#ads_scroller .scrollable_title:hover {
color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="ads_scroller">
<div class="container">
<div class="icon_holder"><i class="fa fa-bell-o"></i>
</div>
<div class="scroller_container">
<div class="items" style="width: 2642px;">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>
Now I think I know what the issue is, but I don't know how to fix it. For some reason, my .items wrapper, if it doesn't have set width, won't have all the links in one line, so after a while I won't have any links inside to scroll.
Strangely this isn't set on the client side and I couldn't figure out what css rule they used that will allow this (move to left infinitely without width being set). So to circumvent this I'm calculating total width, and then setting it each time the slider clones the element that passed.
But what this does (at least that's my guess) is that after a while the gap between the .items wrapper start on the left (where the icon is), and the link that slides in, becomes progressively bigger. After a minute or so the gap becomes really big.
So is there a way to prevent this? What am I doing wrong here? :\
Hi try this sample i hope it help you
<html>
<head>
<title>Demo Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
<div class="item " >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
<div class="item" >
<div class="caption">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can try outerwidth() instead of width() as I think the solution is to add +2px to the width which is actually the padding-left of each anchor item.
var counter = 1;
var total_width = 0;
function slider_total_width() {
$('.items a').each(function() {
total_width += parseInt($(this).outerWidth(), 10);
});
$('.items').width(total_width);
}
slider_total_width();
function job_slider(wrapper) {
var first_link = $('#active');
var width = first_link.outerWidth();
$(wrapper + ' a').each(function() {
total_width += $(this).width() + 50;
});
first_link.removeAttr('id');
$(wrapper).animate({
left: '-=' + width
}, 1000, function() {
$(first_link).clone().appendTo(wrapper);
$(first_link).css('color', 'transparent');
var links = $(wrapper + ' a');
var new_first_link = links[counter];
counter++;
$(new_first_link).attr('id', 'active');
$(wrapper).width(total_width);
total_width = 0;
});
}
var activate = function() {
job_slider('.items');
};
var interval = setInterval(activate, 5000);
$('.items').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(activate, 5000);
});
.container {
margin: 0 auto;
width: 700px;
}
a {
text-decoration: none;
}
#ads_scroller .container {
font-size: 0;
position: relative;
}
#ads_scroller .icon_holder {
display: inline-block;
width: 3%;
margin-top: 8px;
}
#ads_scroller .icon_holder i {
font-size: 22px;
color: #fe9700;
}
#ads_scroller .scroller_container {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 97%;
height: 31px;
position: relative;
}
#ads_scroller .scroller_container .items {
position: relative;
display: block;
}
#ads_scroller .scrollable_title {
position: relative;
color: #727272;
font-size: 14px;
font-weight: 400;
line-height: 41px;
display: inline;
white-space: nowrap;
padding: 0 0 0 2px;
box-sizing: border-box;
}
#ads_scroller .scrollable_title:last-of-type {
margin-right: 0;
}
#ads_scroller #active.scrollable_title {
color: #1a171b;
}
#ads_scroller .scrollable_title:hover {
color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="ads_scroller">
<div class="container">
<div class="icon_holder"><i class="fa fa-bell-o"></i>
</div>
<div class="scroller_container">
<div class="items" style="width: 2642px;">
Lorem ipsum dolor sit amet –
Consectetur adipisicing elit –
Incidunt tempore explicabo ea autem, eligendi excepturi –
Sapiente sint officiis non minima ex –
Tenetur provident, ipsum dignissimos autem earum nobis dolor –
Obcaecati iste animi cumque culpa –
Vero asperiores illum rerum –
Test to see how announcements look –
</div>
</div>
</div>
</div>

scrollLeft does not work in Safari with RTL

I have issue with scrollLeft for Safari when page in RTL direction.
In Safari when i do click on button (that has a handler scrollLeft(-200)) i will scroll to 0 position of page. And this is big issue.
Safari: 7.0.1
OS: OS X 10.9.1
Following code has structure like as my page but more easier:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<style>
.main {
}
.content {
direction: rtl;
width: 2000px;
}
.button-scroll {
width: 50px;
height: 50px;
background: red;
color: white;
text-align: center;
position: fixed;
left: 10px;
top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, sapiente illo dignissimos odit nisi. Voluptatibus, temporibus, recusandae totam libero architecto veniam unde quod nisi facere perspiciatis fugiat harum odit tenetur.
</p>
</div>
<div class="button-scroll"></div>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$('.button-scroll').bind('click', function(){
console.log('scrolling... ' + document.body.scrollLeft);
// $(document.body).scrollLeft(100);
document.body.scrollLeft -= 100;
console.log(document.body.scrollLeft);
})
});
</script>
</body>
</html>

Categories