I have a specific page the container some information with a specific design
this design exist in a separate page print.css
I want to print this page with the same style and this page containe an image also
function printContent() {
var divContents = document.getElementById("terms").innerHTML;
var a = window.open('', '', 'height=1000, width=1000');
a.document.write('<html>');
a.document.write("<link rel=\"stylesheet\" href=\"print.css\" type=\"text/css\" media=\"print\"/>");
a.document.write('<body >');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.focus();
setTimeout(function () {
a.print();
}, 1000);
a.print();
}
p {
display: inline-block;
}
.container header .top {
display: flex;
align-items: center;
gap: 30px;
margin-top: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #2c2a6b;
}
.container header .top h1 {
color: white;
background-color: #2c2a6b;
padding: 10px 20px;
width: fit-content;
width: -moz-fit-content;
border-top-left-radius: 20px;
}
.container header .top .print-header {
display: flex;
gap: 20px;
}
.container header .top .print-header h2{
color: #2c2a6b;
align-self: flex-end;
}
.container header .print-subheader {
padding: 20px 0;
color: #2c2a6b;
}
.container main .print-content .top {
display: flex;
align-items: flex-end;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #2c2a6b;
}
.container main .print-content .top img {
width: 50px;
}
.container main .print-content .top h3 {
color: #2c2a6b;
}
.container main .print-content .content{
margin-top: 20px;
}
.container main .print-content .content .inner-box{
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}
.container main .print-content .content .inner-box p{
color: #000;
font-weight: 500;
font-size: 16px;
}
<body>
<div class="container" id="terms">
<header>
<div class="top">
<h1>قطاع السياحة</h1>
<div class="print-header">
<img src="images/title-icon.png" alt="title">
<h2> اصدار رخصة الإيواء السياحي</h2>
</div>
</div>
<div class="print-subheader">
<h2>الحصول على رخصة استثمار (المستثمر الاجنبي)</h2>
</div>
</header>
<main>
<div class="print-content">
<div class="top">
<img src="images/terms.png" alt="terms">
<h3>الاشتراطات العامة</h3>
</div>
<div class="content">
</div>
</div>
</main>
</div>
<input type="button" class="btn-print" onclick="printContent()" value="Print">
</body>
the problem is that the image and the style don't appear after i click the print button
after a search i found that i should put a timeout, and i should include the print.css file with media print but after all that the problem still exist i can't print the page with the image and the css style anyone can help please
This seems like an overly complicated solution to a really simply requirement, but perhaps there are details you've left out of the question.
It seems like you're including the CSS file dynamically just for printing purposes, but CSS already has a feature for this. I recommend removing all of your JavaScript, and instead wrapping your CSS in a print media query, like so:
#media print {
p {
display: inline-block;
}
/* the rest of your styles here */
}
Simply include these print styles with the rest of your page's CSS and the browser will take care of applying them for the print media.
If you absolutely must do this with JavaScript, you're going to need to wait until the stylesheet is finished loading. You can do that by creating the element, attaching an event listener for the onload event, then appending it to the DOM.
Something like:
let styles = document.createElement('link');
styles.addEventListener('load', function(){
window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);
Perhaps this will help
HTML
<body>
<div class="container" id="terms">
<header>
<div class="top">
<h1>قطاع السياحة</h1>
<div class="print-header">
<img src="images/title-icon.png" alt="title">
<h2> اصدار رخصة الإيواء السياحي</h2>
</div>
</div>
<div class="print-subheader">
<h2>الحصول على رخصة استثمار (المستثمر الاجنبي)</h2>
</div>
</header>
<main>
<div class="print-content">
<div class="top">
<img src="images/terms.png" alt="terms">
<h3>الاشتراطات العامة</h3>
</div>
<div class="content">
</div>
</div>
</main>
</div>
<button onclick="window.print();" class="noPrint">
Print Me
</button>
</body>
CSS
#media print {
.noPrint{
display:none;
}
}
h1{
color:#f6f6;
}
p {
display: inline-block;
}
.container header .top {
display: flex;
align-items: center;
gap: 30px;
margin-top: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #2c2a6b;
}
.container header .top h1 {
color: white;
background-color: #2c2a6b;
padding: 10px 20px;
width: fit-content;
width: -moz-fit-content;
border-top-left-radius: 20px;
}
.container header .top .print-header {
display: flex;
gap: 20px;
}
.container header .top .print-header h2{
color: #2c2a6b;
align-self: flex-end;
}
.container header .print-subheader {
padding: 20px 0;
color: #2c2a6b;
}
.container main .print-content .top {
display: flex;
align-items: flex-end;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #2c2a6b;
}
.container main .print-content .top img {
width: 50px;
}
.container main .print-content .top h3 {
color: #2c2a6b;
}
.container main .print-content .content{
margin-top: 20px;
}
.container main .print-content .content .inner-box{
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}
.container main .print-content .content .inner-box p{
color: #000;
font-weight: 500;
font-size: 16px;
}
By adding the class="noPrint" you can remove what you dont want printed out!
Let me know if this is what you had in mind
here is a codepen.io link
Do you want to load the image via js?
or is that the picture?
terms.png
This should be displayed, but you can also load it separately via js and adjust it in print.css.
a.document.write('<link rel="stylesheet" type="text/css" href="./print.css">'); //loads the style
document.write('<img src="./images/terms.png"> //or
document.write('<img src="./images/terms.png" style="style for the picture">
Related
This is how it's looking
i need to make the icon and the text on the same line and close to each other, i tried usingdisplay: inline-block; but it didn't work, here's my code.
HTML:
<div className="Comment_Icon">
<img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img>
<div className="Comments">5 Class Comments</div>
</div>
CSS:
.Student_Icon {
height: 1vw;
width: 1vw;
display: inline-block;
}
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
Use flex in this case as shown below
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
.Comment_Icon {
display: flex;
flex-direction: row;
align-items: center;
}
.Student_Icon {
margin-right: 3px;
}
<div class="Comment_Icon">
<img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img>
<div class="Comments">5 Class Comments</div>
</div>
.Student_Icon {
float: left;
padding-right: 10px;
}
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
<div className="Comment_Icon">
<img src=https://via.placeholder.com/20 class="Student_Icon"></img>
<div className="Comments">5 Class Comments</div>
</div>
I made use of float: left;
So the icon/image comes left and the text next to it.
You can achieve this with flexbox styling. Note that I am changing your React structure a bit and also adding a fake image. And did you mean to use 1vw? that means 1% of the viewport width and is pretty small - esp on small screens.
Using and referencing REM units is more reliable ( REM is set in the root element and is usually 16px but can be changed. But the advantage of using rems is that it is a common size that all elements can access.
.Comment_Icon {
display: flex;
align-items: center;
}
.Student_Icon {
height: 1.5rem;
width: 1.5rem;
}
.Comments {
font-size: 1rem;
margin-left: 8px;
}
<div class="Comment_Icon">
<img src="https://hipsiti.com/uploads/default-profile.png" alt="StudentIcon" class="Student_Icon"/>
<span class="Comments">5 Class Comments</span>
</div>
So i get this above mentioned error when i click my hamburger. And after clicking the hamburger my whole page turns white and when i right click nothing appears at all. Where is the issue here?I searched a lot of similar problems on the internet. Theres only talks about putting the script tag at the bottom and writing the window.onload function. I have put the script tag at the bottom of the body still this is happening.
ERROR MESSAGE:
Error in event handler: TypeError: Cannot read property 'dataset' of null
at Jr (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:103527)
at Xr.updateState (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:105004)
at chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:105819
at chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:73161
at chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:110691
at Array.forEach ()
at wi.fire (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:110679)
at _onBgPortMessage (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:115134)
HTML
<header>
<nav class="wrapper2">
<div class="logo">
<h1>LO</h1>
</div>
<div class="navbar">
<ul>
<li><a>ABOUT</a></li>
<li>ARTICLES</li>
<li>SUBSCRIBE</li>
</ul>
</div>
</nav>
<div class="hamburger" onclick="open()">
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="hero">
<h1>LOMBOK</h1>
<h2>HOLISTIC HEALTH & MORE</h2>
<div class="bigbar"></div>
</div>
</header>
SASS
header{
background-image: url(../images/heroimg.jpg);
background-size: cover;
background-position: 65%;
height: 100vh;
margin: 10px;
nav{
display: none;
justify-content:space-between;
.logo{
font-size: 1.5rem;
position: relative;
top: -10px;
}
.navbar ul{
display: flex;
width: 480px;
justify-content: space-between;
li{
list-style: none;
cursor: pointer;
letter-spacing: 0.2rem;
a{
text-decoration: none;
color: black;
}
}
li:last-child{
border: 2px solid black;
padding: 15px 20px;
position: relative;
top:-16px;
}
}
}
.hamburger{
position: absolute;
top: 2rem;
right: 1.8rem;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 20px;
cursor: pointer;
.bar{
height: 5px;
width: 100%;
background-color:$primary-color;
border-radius: 10px;
}
}
.hero{
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.7;
h1{
font-size: $primary-size;
font-weight: 600;
}
h2{
font-size: $secondary-size;
font-weight: 500;
}
.bigbar{
display: inline-block;
height: 7px;
width: 45px;
background-color: $secondary-color;
margin-top: 20px;
}
}
}
.active{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.bgdark{
background-position: left bottom;
opacity: 0.4;
}
.inactive{
display: none;
}
JS
window.onload = function() {
const open = ()=> {
const nav = document.querySelector("nav");
const header=document.querySelector("header");
const hero=document.querySelector(".hero");
nav.classList.toggle(".active");
header.classList.toggle(".bgdark");
hero.classList.toggle(".inactive");
};
};
Ok so the issue here is that the open() function is a reserved method on the window object https://developer.mozilla.org/en-US/docs/Web/API/Window/open
So when you add open() on the onclick argument it will fire the window.open() method, which whenever executed without any arguments just opens a black page (hence no DOM to be inspected)
So one of the easy fixes is just to rename the function to anything that is not already a standard method of the window object. Or just add an anonymous function as a callback to the click event in the js file
document.querySelector('.hamburger').addEventListener('click', function(e) {
const nav = document.querySelector("nav");
const header=document.querySelector("header");
const hero=document.querySelector(".hero");
nav.classList.toggle("active");
header.classList.toggle("bgdark");
hero.classList.toggle("inactive");
});
and here's some simple fiddle
https://jsfiddle.net/5hdk1op4/
I currently am trying to code a website to animate moving across the x-axis to access different sections of the page (page content in 'tab-content'). I have a navbar that has different headers, this is fixed, I want the user to click on each header and be taken to that section. I managed to take the user to the desired section/div with some JS code however, there isn't any animation it defaults to the selected section/div just suddenly being on screen. How do I animate with pure JS or CSS. I need the clicking of the header to move (motion) the user to that div. I'm new to web dev.
here some of my code
HTML
<div class="main-info">
<div class="nav-container">
<div class="nav-bar">
<ul>
<li data-tab-target="#show" class="tab">Show</li>
<li data-tab-target="#about" class="tab">About</li>
<li data-tab-target="#lookbook" class="tab">Lookbook</li>
<li data-tab-target="#process" class="tab">Process</li>
</ul>
</div>
<div class="info overlay">
<div class="text">
MA
Coming Soon
BA
</div>
Back
</div>
</div>
<div class="tab-content">
<div id="show" data-tab-content class="active">
<p>VIDEO</p>
</div>
<div id="about" data-tab-content>
<p>About</p>
</div>
<div id="lookbook" data-tab-content>
<p>Lookbook</p>
</div>
<div id="process" data-tab-content>
<p>Process</p>
</div>
</div>
</div>
CSS
.main-info {
background-color: transparent;
height: 100vh;
overflow: hidden;
}
.nav-container {
position: fixed;
}
.nav-bar {
width: 80vw;
height: 10vh;
left: 10vw;
position: absolute;
top: 5vh;
}
.nav-bar ul {
text-transform: uppercase;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
.tab a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1rem;
color: black;
text-decoration: none;
}
.tab:hover {
cursor: pointer;
opacity: 0.6;
}
.tab.active {
background-color: whitesmoke;
}
.info {
width: 90vw;
height: 10vh;
/* border: 1px solid red; */
left: 5vw;
position: absolute;
top: 80vh;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.info a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1.1rem;
color: black;
text-decoration: none;
border: 1px solid teal;
}
.text {
width: 30%;
display: flex;
justify-content: space-between;
}
.tab-content {
border: 1px solid teal;
position: absolute;
left: 0;
top: 0;
height: 100vh;
z-index: -11;
display: flex;
flex: row nowrap;
justify-content: flex-start;
}
[data-tab-content] {
border: 1px solid blueviolet;
background-color: violet;
font-size: 3rem;
color: blue;
scroll-behavior: smooth;
display: none;
width: 100vw;
height: 100vh;
}
.active[data-tab-content] {
display: block;
}
JS
const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]')
// loop through the list to find the one tab mouse clicked
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('active')
})
tabs.forEach(tab => {
tab.classList.remove('active')
});
tab.classList.add('active')
target.classList.add('active');
});
});
You almost got it. Instead of setting the scroll-behavior on the elements that are inside a scrollable element, put it on either the element that has a scrollbar.
.tab-content {
scroll-behavior: smooth;
}
Or on the top most element to have all elements move with a smooth scrolling animation.
:root {
scroll-behavior: smooth;
}
I've got some text that is positioned center of the container and I would like to have some other text that starts where the text positioned in center starts (these divs are not having the same length so here is the problem) I tried by adding jquery to get the X position but no success, and I have no clue how to solve it only with css.
Here's my code:
<div class="graphic-icons-page">
<div class="container icons-container">
<div class="icons-software-title-left">Wide</div>
<div class="icons-software-title-center text-center"><span>Text in center</span></div>
</div>
</div>
.icons-container{
height:80vh;
background-color: black;
color:white;
}
.graphic-icons-page{
display: flex;
justify-content: center;
align-items: center}
///test
.icons-software-title-center{
width: 100%;
}
.icons-software-title-left{ font-size: 50px;}
.icons-software-title-center{
font-size:50px
}
Here's how I want to look:
I added one div and move the icons-container inside the other container. Would this work?
In this fiddle, I added bootstrap css to test https://jsfiddle.net/1aywg3Lm/
body {
background-color: black;
}
.container-center {
text-align: center;
}
.icons-container{
height:80vh;
background-color: black;
color:white;
display: inline-block;
text-align: left;
}
.graphic-icons-page{
display: flex;
justify-content: center;
align-items: center}
///test
.icons-software-title-center{
width: 100%;
}
.icons-software-title-left{ font-size: 20px;}
.icons-software-title-center{
font-size:20px
}
<div class="graphic-icons-page">
<div class="container">
<div class="icons-container">
<div class="icons-software-title-left">Wide</div>
<div class="icons-software-title-center text-center"><span>Text in center of the page</span></div>
</div>
</div>
</div>
I solved my issues using width:max-content
.container-center {
text-align: center;
width: 100%;
background-color: black;
}
.icons-container{
height:80vh;
background-color: black;
color:white;
display: inline-block;
text-align: left;
width: max-content;
}
I have one flexbox container with 2 sub-containers called "left-col" & "right-col". I want the children to fill up the entire vertical space. Setting flex:1 didn't work the way I want it do.
EDIT: I tried out all the answers, but haven't been able to accomplish my goal. I thought it might not be working, because I have different things in my actual HTML & CSS that might interfere, so I decided to upload a snippet of the actual page, below.
EDIT: I tried it with grid and it didn't work the way I wanted it to, because it's dependent on right-col's image size. I'm trying to research how to do this with JavaScript now.
:root {
--primary: #414141;
--secondary: #F2F2F2;
--accent: #9CBACD;
}
#import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans&display=swap');
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: 'Open Sans'
}
body {
background: #fff;
}
h1, h2, h3 {
font-family: 'Montserrat';
color: var(--primary)
}
h1 {
font-size: 2.5rem;
}
h2 {
padding: 1rem 0;
}
h3 {
padding: 1rem 0 0.5rem 0;
}
.title {
padding: 1rem 2rem;
background: #fff;
}
.wrapper {
margin: 0 2rem;
position: relative;
}
a {
text-decoration: none;
color: #000;
/*
cursor: pointer;
*/
}
img {
width: 100%;
}
main {
margin-top: 60px;
}
/* Hero */
main .hero {
text-align: center;
padding: 4rem 0;
background: #fff;
}
main .hero p {
font-size: 0.8rem;
}
/* Hero END */
/* Project area */
.projects {
background: var(--secondary);
padding: 0.5rem 0;
}
.projects .title {
background: var(--secondary);
}
.box {
max-width: 100%;
height: 30vh;
background: white;
margin-top: 1rem;
}
.box+p {
color: var(--primary);
margin-bottom: 1rem;
}
.button {
color: #fff;
padding: 0.5rem 1rem;
border-radius: 2rem;
text-align: center;
margin: 0 auto;
}
.projects .button {
background: var(--primary);
}
#media only screen and (min-width: 600px) {
#index-thumb {
flex-direction: row;
align-items: center;
width: 100%;
height: 70%;
margin: 0;
}
.thumbnail .left-col {
display: flex;
flex-direction: column;
}
.thumbnail .right-col {
flex-basis: 100%;
}
/* I have thumbnail classes on a different page too, that's why I have the following styling */
.thumbnail {
width: 33.33%;
padding: 1rem 0;
margin: 0 -1rem;
}
.thumbnail .thumb-container {
padding: 0 1rem;
}
}
.thumbnail {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1rem 0;
}
.thumbnail .thumb-container {
max-width: 100%;
}
<!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 rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<main>
<section class="hero">
<div class="wrapper">
<h1>Hi</h1>
<p>Text</p>
<p>See more</p>
</div>
</section>
<section class="projects">
<h2 class="title">Work</h2>
<div class="wrapper">
<div class="thumbnail" id="index-thumb">
<div class="left-col">
<div class="thumb-container">
<img src="https://i1.wp.com/mannerofspeaking.org/wp-content/uploads/2009/05/black1.gif" alt="">
<h3>Work 1</h3>
</div>
<div class="thumb-container">
<img src="https://i1.wp.com/mannerofspeaking.org/wp-content/uploads/2009/05/black1.gif" alt="">
<h3>Work 2</h3>
</div>
</div>
<div class="right-col">
<div class="thumb-container">
<img src="https://i1.wp.com/mannerofspeaking.org/wp-content/uploads/2009/05/black1.gif" alt="">
<h3>Work 3</h3>
</div>
</div>
</div>
See more
</div>
</section>
</main>
</body>
You have to remove the align-items: flex-start.
This is the code fixed.
html
<div class="thumbnail" id="index-thumb">
<div class="left-col">
<div class="thumb-container">
<img src="img/test.png" alt="">
<h3>Work 1</h3>
</div>
<div class="thumb-container">
<img src="img/test.png" alt="">
<h3>Work 2</h3>
</div>
</div>
<div class="right-col">
<div class="thumb-container">
<img src="img/test.png" alt="">
<h3>Work 3</h3>
</div>
</div>
</div>
css
.thumbnail {
display: flex;
/*align-items: flex-start;*/
padding: 1rem 0;
}
#index-thumb {
flex-direction: row;
width: 100%;
height: 70%;
margin: 0;
}
.thumbnail .left-col {
display: flex;
flex-direction: column;
}
.thumbnail .right-col {
flex-basis: 100%;
}
.thumb-container img{
background: black;
width: 200px;
height: 200px;
}
RESULT
HTML
<div class="thumbnail">
<div class="left-col">
<div class="thumb-container">
<img src="#" alt="">
<h3>Work 1</h3>
</div>
<div class="thumb-container">
<img src="#" alt="">
<h3>Work 2</h3>
</div>
</div>
<div class="right-col">
<div class="thumb-container">
<img src="#" alt="">
<h3>Work 3</h3>
</div>
</div>
</div>
CSS
.thumbnail {
display: flex;
align-items: center;
flex-direction: row;
}
/* Setting images size */
img {
background: red;
width: 20px;
height: 20px;
display: block;
}
.thumbnail .left-col {
border: 1px solid black;
display: flex;
flex-direction: column;
}
.thumbnail .right-col {
border: 1px solid black;
display: flex;
align-self: stretch; /* Filling up vertical space */
align-items: center; /* Centering content */
}
/* Setting a different size for work 3 image */
.thumbnail .right-col img {
width: 100%;
height: 50px;
}
The crudest way of doing this is a bit hacky, but it works. Set a height to your divs .right-col AND .thumb-container.
.right-col, .right-col > .thumb-container {
height: 100%;
box-sizing: border-box; /* this is so that height rendering includes any margin or padding */
}
Now, in your case, div.thumb-container contains <img> and <h3>. And, I guess you want the image to "fit" nicely to cover as much height as available. If so, you may want to set the height of <img> too, as 100% minus h3-height. The quickest, practical way to calculate <h3>'s height would be from your browser's Developer Tools.
So, finally, <img> height can be set as:
height: calc(100% - {N}px); /* where {N} is the height of <h3> */
max-height: calc(100% - {N}px); /* doesn't hurt to set this too */
Note: calc() is a CSS3 function, but so is flex, so this should not be a problem.