I am using HTML-pdf library to convert HTML page into pdf. I am getting the dynamic part on the pdf however the image is reportedly missing. I have tried to use all methods at my disposable, however, the image isn't appearing in the generated pdf. What should I do? Below is my HTML template:
<head>
<title>Certificate</title>
<!-- <link rel="stylesheet" href="../stuff/certificate.css"> -->
<style>
html,
body {
height: 100%;
width: 100%;
}
img{
height: 100%;
width: 100%;
margin:0px;
}
#name{
margin-top:-420px;
margin-left: 60px;
}
p{
font-size:40px;
color:black;
font-weight:400;
text-align: center;
}
</style>
</head>
<body>
<img src="../stuff/certificate.jpg">
<div id="name"><p><%=name%></p></div>
</body>
</html>
I am getting the name as per my wish, however the image isn't appearing at all. Kindly help. The image is in different folder as compared to the html one.
Try to use a JS library that detect when images have been loaded.
You can use it like this:
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
imagesLoaded(document.body, function() {
window.print();
});
</script>
Related
enter image description here
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript" src="Jquery Cycle Slideshow/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="Jquery Cycle Slideshow/js/cycle2.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="cssforsliding.css">
</head>
<body>
The stylesheet:
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: black;
...
I am using notepad++ and I have saved my CSS file in the notepad++ documents file as cssforsliding.css and I believe I have linked my HTML and CSS correctly but it doesn't seem to be working!
Help would be greatly appreciated.
EDIT: Sorry I should have been clearer: the CSS part in my question is the CSS for an EXTERNAL CSS file. So I actually want to link my HTML to an EXTERNAL CSS file.
EDIT2: I have moved my css file inside another folder within the folder where my HTML (and CSS) is located and specify that folder in my HTML and now it works strangely! Thanks everyone :)
enter image description here
I can't try this solution at the machine I'm on (at work), but it might work if you just close the tag
<link rel="stylesheet" type="text/css" media="screen" href="cssforsliding.css" />
If not, it looks tidier and follows HTML5 in any case.
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="cssforsliding.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: black;
}
</style>
</head>
<body>
</body>
</html>
I've got the following css file :
.h_bg{
padding:22.4% 0;
background-size:100% auto;
background-position:center top;
background-repeat:no-repeat;
position:relative;
height: 2em;
}
.h_bg h1{
width: 100%;
position:absolute;
line-height:1;
top: 23%;
color:#fff;
font-size:500%;
text-align: center;
padding-bottom: 15%;
background-size:89px 183px;
}
#media screen and (min-width:1001px)
{
.h_bg{
background-image:url(/images/bg1-desktop.png);
}
}
#media screen and (min-width:1001px) and (max-width:1300px)
{
.h_bg h1{
background-size:7% auto;
padding-bottom: 16%;
}
}
And the following html page :
<!doctype html>
<html>
<head>
<title>Beauty app</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="h_bg">
<h1>text</h1>
</div>
</body>
</html>
css link extactly to the place, where css file is. Unfortunately, text string is invisible and this code shows blank page. What can be a problem? Any help would be appreciated.
the problem is here:
color:#fff;
The #fff is forcing your H1 text in h_bg class to be white color, therefore it is invisible
Just incase you hit similar issues in future. This is how you can debug it.
Open your browser (i was using chrome) then right click on the element, for your instance its kind of difficult because you can't see it then click on inspect element.
On the bottom right corner you should see your CSS properties, try play around with it till you found your problem.
Good morning everyone,
I have a quick question about some background images in MapBox. For those who don't know MapBox, it is a online provider of custom maps that quickly create beautiful interactive maps and data visualizations. I created a map project, and wanted to put that map as a background image. I am given an embed option and here is my code so far:
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width='100%' height='800px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
</body>
</html>
However, I want the Mapbox html to take the entire background.I have tried placing the url provided into a background-image: url() in css, but it does not function.
body {
background-image: url("https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA");
}
Does anyone know how I might do this?
Thanks,
Eric
Jon here from Stack - I actually do most of the geo stuff here.
If you want to do this the proper way, you're going to have to embed it in a div and put the content that you want over it in its own container div. You can see a pretty straightforward implementation of what you want in the API docs on Mapbox. You can adjust the settings of the map using the JavaScript API (hiding the controls, setting the center, etc.).
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-background,
#map-container,
#map-overlay,
#content {
width: 100%;
min-height: 100%;
position: absolute;
}
#map-background {
z-index: -1;
}
#map-container {
z-index: 0;
}
#map-overlay {
z-index: 1;
background: none;
}
#content {
z-index: 0;
}
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map-background">
<div id="map-container">
</div>
<div id="map-overlay">
</div>
</div>
<div id="content">
<!-- This is where your regular content should be -->
<p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
</div>
</body>
</html>
Good luck Eric :)
EDIT: Restoring interactivity
I've changed the code to get rid of the overlay and some of the blocking styles. Try that.
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-container {
width: 100%;
min-height: 100%;
position: absolute;
}
#content {
position: absolute;
}
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map-container">
</div>
<div id="content">
<!-- This is where your regular content should be -->
<p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
</div>
</body>
</html>
To mimic a "background-image" effect with mapbox you could do something like the following:
<!DOCTYPE html>
<html>
<head>
#map_bg {
position:relative;
width:100%;
height:800px;
}
#map_bg iframe {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
.content {
z-index:1;
position:relative;
}
</head>
<body>
<div id="map_bg">
<iframe class="mapbox" frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
<div class="content">
This is other content on the page.
</div>
</div>
</body>
</html>
You position the map absolutely relative to it's parent which allows content to overlap it (much like a background image). By adding a z-index:1 to the other content you can ensure it appears on top of the map;
I dont think just putting link as background image will work. Mapbox might be rendering map in canvas.
I just found this. Try this. I am not much familiar with mapbox
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here
I have this simple web page, that I thought I had tested in every browser. Then I tried it in Internet Explorer, and it just showed a blank white page. I went through my CSS, looking for lines that IE didn't support, and found background = rgba(some stuff), but this is in a div not shown by IE. Does anybody have any ideas on what might be causing this? The webpage is at http://heather.sh/qr
Below is my HTML.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function ifUIWebView() {
var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var isChrome = navigator.userAgent.match('CriOS');
if (isChrome) {
var mobile_safari_div = document.getElementById('mobile_safari_div');
mobile_safari_div.innerHTML = mobile_safari_div.innerHTML + '<font size="3" color="black"><b>Chrome does not support contact card download. Please open this page (http://heather.sh/qr) in Mobile Safari.</b></font>';
}
else if (is_uiwebview) {
var mobile_safari_div = document.getElementById('mobile_safari_div');
mobile_safari_div.innerHTML = mobile_safari_div.innerHTML + '<font size="3" color="black"><b>This browser may not support contact card download. If it doesn\'t work, open this page (http://heather.sh/qr) in Mobile Safari.</b></font>';
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id='topContainer'><img src="photo.jpg" style="visibility:hidden" width="100%"/>
<div id='container'>
<div id='download_button_div'>
<img src="Download Contact.png" id='download_button'></img>
<div id='mobile_safari_div'></div>
</div>
<script>
ifUIWebView()
</script>
</div>
</div>
</body>
And here is my CSS:
html, body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#topContainer{
position: relative;
max-width:400px;
margin: auto;
}
#container{
width: 100%;
max-width: 400px;
height: 100%;
margin: auto;
background-size: 100%;
background-repeat: no-repeat;
background-image: url("photo.jpg");
position:absolute;
top:0px;
}
#download_button {
width: 100%;
}
#download_button_div {
width: 100%;
}
#mobile_safari_div {
background: rgba(255, 255, 255, 0.5);
font-family: 'helvetica';
text-align: center;
}
Any ideas on what part is incompatible with IE? As I say, I have tried going through and could only find the rgba thing, so any help appreciated.
Thanks!
You should try to use
style = "display: block " instead of style="visibility:hidden"
I am not sure this will help or not.
But try it
I found out what the problem was - I had forgotten to put <!DOCTYPE html> at the top of the html. Not sure what it does, but it fixed everything.
Thanks!
Sam