Comments (8)
My guess: Add a CSS for media: print, and you should be able to export to a PDF
"printer" (whichever one depending on your platform.
Original comment by [email protected]
on 25 Sep 2011 at 5:05
from html5slides.
I have the same need. This slide is cool, But I want the IE guy also can read
my presentation. So I think the feature to convert to pdf is very useful.
I have tested the print feature in Chrome, Firefox, Opera. Neither one can
display correctly.
Thanks.
Original comment by [email protected]
on 18 Nov 2011 at 9:08
from html5slides.
Need too.
Original comment by [email protected]
on 29 Nov 2011 at 3:51
from html5slides.
You can try that, you must include jquery :
function print() {
$("body").css("background", "none");
$("article").removeClass("far-past");
$("article").removeClass("past");
$("article").removeClass("current");
$("article").removeClass("next");
$("article").removeClass("far-next");
$("*.to-build").removeClass("to-build");
$("article").css("display", "block");
$("article").css("top", "0");
$("article").css("left", "0");
$("article").css("margin", "0 0 9em 0");
$("article").css("position", "relative");
}
Original comment by [email protected]
on 3 Dec 2011 at 9:43
from html5slides.
Using the print function worked for me. Thanks!
Original comment by [email protected]
on 1 Mar 2012 at 2:28
from html5slides.
Hmm, this only displays the first slide on the print preview.
Original comment by [email protected]
on 22 Sep 2012 at 3:36
from html5slides.
I've managed to create a print.css file with the following content:
@media print {
/* style sheet for print goes here */
.slide-area {
top: 0 !important;
left: 0% !important;
}
#prev-slide-area {
margin-left:0 !important;
}
#next-slide-area {
margin-left:0 !important;
}
article > .current{ transform: none; }
article > .far-past{ transform: none }
article > .past{ transform: none }
article > .current{ transform: none }
article > .next{ transform: none }
article > .far-next{ transform: none }
*.to-build > .to-build{ transform: none }
article
{
display: block !important;
top: 5% !important;
left: 10% !important;
margin: 0 0 9em 0 !important;
position: relative !important;
transform: none !important;
}
}
on Firefox 33 works perfectly!
Original comment by [email protected]
on 26 Nov 2014 at 9:49
from html5slides.
and for fill images, in printing mode, just do:
article.fill h3
{
position: absolute;
z-index: 100 !important;
}
article.fill img
{
position: absolute;
z-index: 0 !important;
}
Original comment by [email protected]
on 26 Nov 2014 at 10:13
from html5slides.
Related Issues (20)
- Patch for /trunk/template/index.html
- Patch for /trunk/slides.js HOT 2
- Image with position: absolute in article causes print issue
- Patch for /trunk/template/index.html
- IE 8 is not loading the presentation
- Is it still maintained ? HOT 1
- Patch for /trunk/template/index.html
- slide.js broken for 'build' class (even in google demo) HOT 5
- Patch for /trunk/template/index.html
- "someone tried to postMessage from an unknown origin"
- Patch for /trunk/template/index.html
- Remote for html5slides
- Patch for /trunk/template/index.html
- How to display page number on slides?
- Full-screen
- Patch for /trunk/template/index.html
- Patch for /trunk/template/index.html
- Patch for /trunk/template/index.html
- Patch for /trunk/template/indexDa.html
- Patch for /trunk/template/index.html
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from html5slides.