0
我正在構建一個web應用程序，最終目的是將所有內容導入到一個pdf文件，其實際上工作完美，但theres一個問題，我不明白爲什麼會發生：每當我切換圖標的位置保存PDF格式的底部生成的PDF返回半黑這樣的：JsPDF部分balck
http://postimg.org/image/i82vu96qv/
的JSPDF部分是正確的開始：
@font-face {
\t \t font-family: 'Montserrat';
\t \t font-style: normal;
\t \t font-weight: 400;
\t \t
\t \t }
\t body {
\t \t background-color: #fff;
\t \t font-family:'Montserrat', verdana,sans-serif;
\t \t margin: 0 !important;
\t \t padding: 0 !important;
\t \t }
\t \t
\t \t html { overflow-y: scroll; }
\t \t
\t \t a:link {
\t \t text-decoration:none;
\t \t color:black;
\t \t color:#e63e4d;
\t \t }
\t \t a:visited {
\t \t text-decoration:none;
\t \t color:black;
\t \t color:#e63e4d;
\t \t }
\t \t
\t \t \t
\t \t
\t \t
\t \t h1 {
\t \t font-size: 25px;
\t \t font-weight: 200;
\t \t
\t \t
\t \t margin-top: 5px;
\t \t }
\t \t h2 {
\t \t font-size: 20px;
\t \t font-weight: 200;
\t \t
\t \t margin-top: 5px;
\t \t }
\t \t
\t \t h3 {
\t \t font-size: 15px;
\t \t font-weight: 200;
\t \t margin: 0;
\t \t margin-left: 15px;
\t \t }
\t \t
\t \t h4 {
\t \t font-size: 15px;
\t \t font-weight: 300;
\t \t margin: 0;
\t \t margin-left: 12px;
\t \t }
\t \t
\t \t #loading {
\t \t width: 100%;
\t \t height: 100%;
\t \t position: fixed;
\t \t display: none;
\t \t z-index:9999999999;
\t \t top:0;
\t \t margin: 0 auto;
\t \t opacity: 0.9;
\t \t background-color: white;
\t \t }
\t \t \t .imgload {
\t \t \t position:relative;
\t \t \t margin: 0 auto;
\t \t \t margin-top: 15%;
\t \t \t
\t \t \t text-align:center;
\t \t \t }
\t \t
\t \t #img_logo{
\t \t height: 68px;
\t \t width: 256px;
\t \t float:right;
\t \t padding-right:14px;
\t \t right: 15px;
\t \t }
\t \t
\t \t .img_logo_temp{
\t \t margin-top:-16px;
\t \t }
\t \t
\t \t #container{
\t \t width: 1024px;
\t \t height: 100%;
\t \t background-color: #fff;
\t \t position:relative;
\t \t margin: 0 auto; \t
\t \t overflow: hidden;
\t \t }
\t
\t \t
\t \t \t
\t \t .spacer {
\t \t width: 100%;
\t \t clear:both;
\t \t height: 25px; \t
\t \t }
\t \t .bottomsession {
\t \t overflow: auto;
\t \t }
\t \t
\t \t
\t \t \t \t
\t \t #pdfhtml{
\t \t }
\t \t
\t \t
\t \t
\t \t .textquestions{
\t \t width: 100%;
\t \t height: 130px;
\t \t }
\t \t .textquestions1{
\t \t width: 95%;
\t \t float:left;
\t \t height: 110px;
\t \t }
\t \t
\t \t .openquestion_temp{
\t \t display:none !important;
\t \t }
\t \t
\t \t .openquestion{
\t \t margin-bottom:30px;
\t \t width: 45%;
\t \t margin-right: 30px;
\t \t margin-left:15px;
\t \t float:left;
\t \t }
\t \t
\t \t .session_line{
\t \t margin-top: 10px;
\t \t }
\t \t
\t \t .postit:hover{
\t \t opacity: 70%;
\t \t }
\t \t \t .post_own_input{
\t \t \t width: 80%;
\t \t \t text-align:center;
\t \t \t border: none;
\t \t \t background-color: transparent;
\t \t \t text-decoration: bold;
\t \t \t font-size: 12pt;
\t \t \t
\t \t \t padding-left:4px;
\t \t \t
\t \t }
\t \t
\t \t input[type="text"] {
\t \t font-family: 'Montserrat';
\t \t font-style: normal;
\t \t font-weight: 400;
\t \t
}
\t \t .page_btn{
\t \t \t margin-left:30px;
\t \t \t width:50%;
\t \t \t clear:both;
\t \t \t float:right;
\t \t }
\t \t
\t \t .page_icon_btn {
\t \t \t \t width: 40px;
\t \t \t \t height: 40px;
\t \t \t \t background: #e63e4d;
\t \t \t \t -moz-border-radius: 20px;
\t \t \t \t -webkit-border-radius: 20px;
\t \t \t \t border-radius: 20px;
\t \t \t \t float: left;
\t \t \t \t margin-right: 5px;
\t \t \t \t text-align: center;
\t \t \t \t }
\t \t \t \t \t .page_icon_btn p {
\t \t \t \t \t color: white;
\t \t \t \t \t margin: 0 auto;
\t \t \t \t \t margin-top: -6px;
\t \t \t \t \t font-weight: 1000;
\t \t \t \t \t font-size: 45px; \t \t \t \t \t
\t \t \t \t \t }
\t \t \t \t \t
\t \t
\t \t .postnotes ul {
\t \t \t list-style: none;
\t \t }
\t \t
\t \t .ownpostnotes_div{
\t \t style="width: 100%;
\t \t clear:both;
\t \t }
\t \t .postnotes li{
\t \t
\t \t list-style: none;
\t \t float: left;
\t \t
\t \t
\t \t
\t \t margin-left: 10px;
\t \t margin-bottom: 10px;
\t \t
\t \t }
\t \t
\t \t .postnote {
\t \t width: 120px;
\t \t padding-top:40px;
\t \t height: 60px;
\t
\t \t
\t \t background-color: gold;
\t
\t \t text-align:center;
\t \t
\t \t cursor: pointer;
\t \t }
\t \t
\t
\t \t
\t \t #top_wrapper {
\t \t width: 100%;
\t \t height:65px;
\t \t padding-left:14px;
\t \t top:0;
\t \t clear: both;
\t \t overflow: hidden;
\t \t background-color: #fff;
\t \t }
\t \t .top_wrapper_temp {
\t \t height:40px !important;
\t \t }
\t \t
\t \t \t .showpdf{
\t \t \t display:none;
\t \t }
\t \t
\t \t \t .nav_back {
\t \t \t width: 150px;
\t \t \t margin-left:10px;
\t \t \t margin-top: 12px;
\t \t \t float:left;
\t \t \t cursor: pointer;
\t \t \t }
\t \t \t \t .nav_back p {
\t \t \t \t margin-top: 12px;
\t \t \t \t }
\t \t \t \t .nav_back_btn {
\t \t \t \t width: 40px;
\t \t \t \t height: 40px;
\t \t \t \t cursor: pointer;
\t \t \t \t background: #e63e4d;
\t \t \t \t -moz-border-radius: 20px;
\t \t \t \t -webkit-border-radius: 20px;
\t \t \t \t border-radius: 20px;
\t \t \t \t float: left;
\t \t \t \t margin-right: 5px;
\t \t \t \t }
\t \t \t \t \t .nav_back_btn p {
\t \t \t \t \t font-size: 20px;
\t \t \t \t \t color: white;
\t \t \t \t \t margin-left: 14px;
\t \t \t \t \t cursor: pointer;
\t \t \t \t \t margin-top: 9px;
\t \t \t \t \t font-weight: 900; \t \t \t \t
\t \t \t \t \t }
\t \t .page {
\t \t width: 1024px;
\t \t overflow: hidden;
\t \t display:block; \t \t
\t \t float:left;
\t \t }
\t \t
\t \t #images{
padding-left:22px;
overflow:hiden;
width: 100%;
}
.output { color: #888; font-size: 26px; text-align:center; margin-right: 5px; vertical-align: top; margin-left: 48%; display:none;}
html { overflow-y: scroll; }
.slider { margin: 0 auto; }
hr {
display: block;
-webkit-margin-before: 0em !important;
-webkit-margin-after: 0em !important;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
}
.dragger {
width: 36px !important;
height: 36px !important;
text-align: center;
line-height: 36px;
font-size: 19px;
font-color: white;
}
.dragger p{
color:white;
}
#situations {
list-style: none;
text-align: left;
-webkit-padding-start: 0px !important;
padding-left:0px;
-webkit-margin-start: 0px !important;
width: 100%;
margin: 0 auto;
}
#situations li {
display: inline-block;
list-style: none;
margin: 7px;
border: 4px solid white;
overflow:hidden;
z-index: 9999;
}
.situationimg {
cursor: pointer;
overflow: hidden;
opacity: 0.8;
}
.situationimg_click {
border: 4px solid #0098aa !important;
border-radius: 5px;
opacity: 1;
}
\t \t \t
\t \t .content_page {
\t \t overflow: auto; \t \t
\t \t width: 100%;
\t \t float:left;
\t \t margin-top:-50px;
\t \t }
\t \t
\t \t .content {
\t \t margin-left: 15px;
\t \t margin-right: 15px;
\t \t margin-top: 80px;
\t \t }
\t \t
\t \t .left_content{
\t \t \t width: 48%;
\t \t \t height: 100%;
\t \t \t float:left;
\t \t \t
\t \t \t }
\t \t \t .right_content{
\t \t \t width: 48%;
\t \t \t margin-left:29px;
\t \t \t height: 100%;
\t \t \t float:left;
\t \t \t
\t \t \t }
\t \t
\t \t \t .front_left{
\t \t \t width: 48%;
\t \t \t margin-right: 20px;
\t \t \t height: 100%;
\t \t \t padding-left: 15px;
\t \t \t float:left;
\t \t \t }
\t \t
\t \t
\t \t \t .front_right{
\t \t \t width: 48%;
\t \t \t height: 100%;
\t \t \t float:left;
\t \t \t }
\t \t \t
\t \t \t .bottom_arrow{
\t \t \t right: 10px;
\t \t \t bottom: 25px;
\t \t \t position: absolute;
\t \t \t z-index:999;
\t \t \t }
\t \t \t
\t \t \t .pdf_save{
\t \t \t
\t \t \t cursor: pointer;
\t \t \t }
\t \t \t
\t \t \t .pdf_save p{
\t \t \t margin-top: 10px
\t \t \t }
\t \t \t .nextpage_btn {
\t \t \t width: 90px;
\t \t \t height: 90px;
\t \t \t cursor: pointer;
\t \t \t -moz-border-radius: 45px;
\t \t \t -webkit-border-radius: 45px;
\t \t \t border-radius: 45px;
\t \t \t float: right;
\t \t \t margin-right: 20px;
\t \t \t }
\t \t \t
\t \t \t \t .nextpage_btn p {
\t \t \t \t color: #ffffff;
\t \t \t \t text-align:center;
\t \t \t \t margin-top: 18px;
\t \t \t \t font-size: 50px;
\t \t \t \t }
\t \t \t \t
\t \t \t .pdfpage_btn {
\t \t \t width: 60px;
\t \t \t height: 60px;
\t \t \t cursor: pointer;
\t \t \t -moz-border-radius: 30px;
\t \t \t -webkit-border-radius: 30px;
\t \t \t border-radius: 30px;
\t \t \t float: right;
\t \t \t margin-right: 30px;
\t \t \t }
\t \t \t
\t \t \t \t .pdfpage_btn p {
\t \t \t \t color: white;
\t \t \t \t text-align:center;
\t \t \t \t margin-top: 18px;
\t \t \t \t font-size: 20px;
\t \t \t \t font-size: 20px;
\t \t \t \t }
\t \t \t \t \t \t
\t
\t \t #page_wrapper {
\t \t width: 100%;
\t \t
\t \t overflow:hidden;
\t \t margin-bottom: 100px;
\t \t }
\t \t
\t \t .session {
\t \t display:block;
\t \t float:left;
\t \t width:100%;
\t \t height:100%;
\t \t background-color: #fff;
\t \t overflow: hidden;
\t \t }
\t \t
\t \t
\t \t textarea {
\t \t display: block;
\t \t margin: 0;
\t \t width: 100%;
\t \t font-size: 16px;
\t \t appearance: none;
\t \t box-shadow: none;
\t \t border-radius: 4px;
\t \t padding: 8px;
\t \t border: solid 5px #c9c9c9;
\t \t transition: border 0.3s;
\t \t resize: none;
\t \t overflow: hidden;
\t \t }
\t \t
\t \t textarea:focus {
\t \t outline: none;
\t \t border: solid 5px #969696;
\t \t }
\t
\t \t
\t \t .textfield_discrib {
\t \t width: 380px;
\t \t height: 185px;
\t \t float: left;
\t \t display: block;
\t \t margin-left: 10px;
\t \t margin-right: 10px; \t \t
\t \t
\t \t }
\t \t \t .s_disrib {
\t \t \t width: 100%;
\t \t \t height: 100%; \t \t \t
\t \t \t float: left;
\t \t \t display: block;
\t \t \t overflow:hidden;
\t \t \t padding: 0.5em;
\t \t }
\t \t .charNum { \t \t \t
\t \t \t float: right;
\t \t \t font-size: 12px;
\t \t \t font-weight: 200;
\t \t \t color: grey;
\t \t \t margin-top: -20px;
\t \t \t margin-right: -18px;
\t \t }
\t \t
\t \t .textfield_implement {
\t \t width: 380px;
\t \t height: 120px;
\t \t float: left;
\t \t display: block;
\t \t margin-left: 10px;
\t \t margin-right: 10px; \t \t
\t \t }
\t \t \t .s_implement {
\t \t \t width: 80%;
\t \t \t height: 100%; \t \t \t
\t \t \t float: left;
\t \t \t display: block;
\t \t \t padding: 0.5em;
\t \t \t }
\t \t \t .charNumStra { \t \t \t
\t \t \t float: right;
\t \t \t font-size: 12px;
\t \t \t font-weight: 200;
\t \t \t color: grey;
\t \t \t margin-top: -20px;
\t \t \t margin-right: -18px;
\t \t \t }
\t \t
\t \t .modal_white {
\t \t width: 100%;
\t \t height: 100%;
\t \t position: fixed;
\t \t display: none;
\t \t z-index:9999999999;
\t \t top:0;
\t \t margin: 0 auto;
\t \t opacity: 0.9;
\t \t background-color: white; \t
\t \t } \t
\t \t
\t \t #modal_intro{
\t \t position:absolute;
\t \t opacity: 1;
\t \t margin: 0 auto;
\t \t display: none;
\t \t width: 550px;
\t \t z-index: 99999999999;
\t \t padding: 15px;
\t \t top: 20%;
\t \t right: 237px;
\t \t height: 260px;
\t \t background-color: white;
\t \t border-radius: 15px;
\t \t -moz-box-shadow: 3px 3px 5px 6px #ccc;
\t \t -webkit-box-shadow: 3px 3px 5px 6px #ccc;
\t \t box-shadow: 3px 3px 5px 6px #ccc;
\t \t }
\t \t
\t \t \t #begin_session{
\t \t \t cursor: pointer;
\t \t \t
\t \t \t }
\t \t \t \t #begin_session p{
\t \t \t \t color: white;
\t \t \t \t
\t \t \t \t }
\t \t \t \t
\t \t .modal_strategy_situation{
\t \t position: absolute;
\t \t right: 10px;
\t \t max-width: 690px;
\t \t height: 97%;
\t \t top: 10px;
\t \t overflow:hiden;
\t \t display: none;
\t \t background-color: white;
\t \t border-radius: 15px;
\t \t -moz-box-shadow: 3px 3px 5px 6px #ccc;
\t \t -webkit-box-shadow: 3px 3px 5px 6px #ccc;
\t \t box-shadow: 3px 3px 5px 6px #ccc;
\t \t }
\t \t #modal_situations{
\t \t
\t \t }
\t \t \t #modal_situations ul {
\t \t \t margin: 0 auto;
\t \t \t list-style: none;
\t \t \t text-align: left;
\t \t \t -webkit-padding-start: 0px;
\t \t \t }
\t \t \t #modal_situations li {
\t \t \t display: inline-block;
\t \t \t list-style: none;
\t \t \t border-radius: 15px;
\t \t \t overflow:hidden;
\t \t \t z-index: 9999;
\t \t \t margin: 12px;
\t \t \t }
\t \t \t
\t \t \t
\t \t #modal_strategies{
\t \t
\t \t }
\t \t \t .modal_strategies {
\t \t \t margin: 0 auto;
\t \t \t list-style: none;
\t \t \t text-align: left;
\t \t \t -webkit-padding-start: 0px;
\t \t \t }
\t \t \t .modal_strategies li {
\t \t \t display: inline-block;
\t \t \t list-style: none;
\t \t \t border-radius: 15px;
\t \t \t overflow:hidden;
\t \t \t z-index: 9999;
\t \t \t margin: 12px;
\t \t \t }
\t \t \t
\t \t \t #strategy-img {
\t \t \t border-radius: 15px;
\t \t \t overflow: hidden;
\t \t }
\t \t
\t \t .modal_center{
\t \t position: absolute;
\t \t z-index: 9999999;
\t \t right: 5%;
\t \t top:5%;
\t \t bottom: 5%;
\t \t left: 5%;
\t \t background-color: white;
\t \t display: none;
\t \t border-radius: 15px;
\t \t -moz-box-shadow: 3px 3px 5px 6px #ccc;
\t \t -webkit-box-shadow: 3px 3px 5px 6px #ccc;
\t \t box-shadow: 3px 3px 5px 6px #ccc;
\t \t }
\t \t
\t \t #modal_pdf{}
\t \t #modal_help{
\t \t right: 12% !important;
\t \t top:12% !important;
\t \t bottom: 12% !important;
\t \t left: 12% !important;
\t \t }
\t \t #modal_strategies_help{}
\t \t
\t \t \t \t
\t \t \t #help_strategies_describ {
\t \t \t margin: 0 auto;
\t \t \t list-style: none;
\t \t \t text-align: left;
\t \t \t -webkit-padding-start: 0px;
\t \t \t }
\t \t \t #help_strategies_describ li {
\t \t \t display: inline-block;
\t \t \t list-style: none;
\t \t \t border-radius: 15px;
\t \t \t overflow:hidden;
\t \t \t z-index: 9999;
\t \t \t margin: 12px;
\t \t \t }
\t \t \t .strategies_help_bind{
\t \t \t clear:both;
\t \t \t
\t \t \t }
\t \t \t \t .strategies_column{
\t \t \t \t width: 31%;
\t \t \t \t float:left;
\t \t \t \t margin-bottom: 30px;
\t \t \t \t background-color:lightgrey;
\t \t \t \t margin-left:15px;
\t \t \t \t }
\t \t \t
\t \t \t \t \t .strategies_column img{
\t \t \t \t \t width: 100%;
\t \t \t \t \t }
\t \t \t \t \t .strategies_column p{
\t \t \t \t \t margin-top:-5px;
\t \t \t \t \t margin-bottom: 10px;
\t \t \t \t \t }
\t \t \t \t
\t \t \t .modal_content{
\t \t \t margin: 0 auto;
\t \t \t width: 99%;
\t \t \t height: 90%;
\t \t \t bottom: 0;
\t \t \t overflow-y: scroll;
\t \t \t overflow-x:none;
\t \t \t }
\t \t \t
\t \t \t
\t \t \t
\t \t \t \t .modal_content p{
\t \t \t \t padding-left: 10px;
\t \t \t \t padding-right: 10px;
\t \t \t \t
\t \t \t \t }
\t \t \t \t
\t \t \t .hide {
\t \t \t right: -5px;
\t \t \t margin-top: -8px;
\t \t \t position: absolute;
\t \t \t z-index: 999;
\t \t \t cursor: pointer;
\t \t \t }
\t \t \t
\t \t \t .showupload{
\t \t \t position: absolute;
\t \t \t z-index: 999;
\t \t \t right: 0px;
\t \t \t bottom: 0px;
\t \t \t }
\t \t .ranking {
\t \t width: 260px;
\t \t height: 200px;
\t \t float: left;
\t \t display: block;
\t \t margin-left: 20px;
\t \t margin-top: 20px;
\t \t }
\t \t .rating {
\t \t padding-top: 10px;
\t \t padding-left: 10px;
\t \t margin-bottom: 20px;
\t \t }
\t \t \t .rate_circle {
\t \t \t width: 60px;
\t \t \t height: 60px;
\t \t \t background: grey;
\t \t \t -moz-border-radius: 30px;
\t \t \t -webkit-border-radius: 30px;
\t \t \t border-radius: 30px;
\t \t \t float: left;
\t \t \t opacity: 0.2;
\t \t \t margin-right: 22px;
\t \t \t }
\t \t \t
\t \t \t .rate_circle_label {
\t \t \t width: 60px;
\t \t \t text-align: center;
\t \t \t float: left;
\t \t \t margin-right: 22px;
\t \t \t }
\t \t \t .rate_circle_chosen {
\t \t \t opacity: 1;
\t \t \t }
\t \t \t
\t \t \t
\t .yourimage {
\t \t min-width:299px;
\t \t min-height:199px;
\t \t max-width:350px;
\t
\t }
\t
\t .nav_page{
\t \t margin-right: 30px;
\t \t width: 155px;
\t \t margin-top: 12px;
\t \t float: left;
\t \t }
\t \t \t .nav_page p{
\t \t \t margin-top: 12px;
\t \t \t }
\t \t \t
\t \t \t .nav_page a:visited {
\t \t \t color: black;
\t \t \t text-decoration: none;
\t \t \t }
\t \t .nav_btn {
\t \t \t \t width: 40px;
\t \t \t \t height: 40px;
\t \t \t \t background: #e63e4d;
\t \t \t \t -moz-border-radius: 20px;
\t \t \t \t -webkit-border-radius: 20px;
\t \t \t \t border-radius: 20px;
\t \t \t \t float: left;
\t \t \t \t margin-right: 5px;
\t \t \t \t text-align: center;
\t \t \t \t }
\t \t \t \t \t .nav_btn p {
\t \t \t \t \t color: white;
\t \t \t \t \t margin: 0 auto;
\t \t \t \t \t margin-top: 10px;
\t \t \t \t \t font-weight: 900; \t \t \t \t
\t \t \t \t \t }
\t \t \t \t \t
\t \t \t \t \t
\t .btn {
\t \t -webkit-border-radius: 28;
\t \t -moz-border-radius: 28;
\t \t border-radius: 28px;
\t \t border:4px solid #e8e8e8;
\t \t color: #ffffff;
\t \t cursor: pointer;
\t \t font-size: 26px;
\t \t background: grey;
\t \t padding: 5px 10px 5px 10px;
\t \t text-decoration: none;
\t \t }
\t .btn:hover {
\t \t background: #000;
\t \t text-decoration: none;
\t \t }<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Motivation Tools</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
\t <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
\t \t <script type="text/javascript" src="./js/jspdf/jspdf.min.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/jspdf.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/debug.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/images.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/addimage.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/FileSaver.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/canvas.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/html2canvas.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/deflate.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/standard_fonts_metrics.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/split_text_to_size.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/blob.js"></script>
\t \t <script type="text/javascript" src="./js/jspdf/addhtml.js"></script>
\t
\t
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
\t
\t <link href="./css/style.css" rel="stylesheet">
\t <link href="./css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Include Simple Slider JavaScript and CSS -->
<script src="./js/simple-slider.js"></script>
<link href="./css/simple-slider.css" rel="stylesheet" type="text/css" />
<!-- Activate Simple Slider on your input -->
<script>
$(document).ready(function() {
$(".situationimg").click(function() {
$(this).toggleClass("situationimg_click");
});
});
\t $(document).ready(function(){
\t \t \t $('#reload_btn').click(function() {
\t \t \t if(confirm("Are you sure? All changes will be deleted"))
\t \t \t \t {
\t \t \t \t \t $("#loading").show();
\t \t \t \t \t location.reload(true); \t
\t \t \t \t \t $("#loading").hide();
\t \t \t \t }
\t \t \t \t else
\t \t \t \t {
\t \t \t \t \t if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
\t \t \t \t }
\t \t \t });
\t \t });
</script>
$(document).ready(function(){
\t \t $("#pdfhtml, .pdf_save").click(function() {
\t \t \t \t $("#img_logo").attr("class","img_logo_temp");
\t \t \t \t $("#top_wrapper").attr("class","top_wrapper_temp");
\t \t \t \t $(".showpdf").show();
\t \t \t \t $(".ignorepdf").hide();
\t \t \t \t exportPDF(); \t
\t \t });
\t \t function exportRevert() {
\t \t \t \t $(".ignorepdf").removeAttr('style');
\t \t \t \t $("#img_logo").removeAttr('class');
\t \t \t \t $("#top_wrapper").removeAttr('class');
\t \t \t \t $(".showpdf").hide();
\t \t }
\t \t
\t \t function exportPDF() { \t \t
\t \t \t \t $("#loading").show(); \t
\t \t \t var doc = new jsPDF('p','px','letter');
\t \t \t var options = {
\t \t \t pagesplit: true
\t \t \t \t };
\t \t \t \t doc.addHTML($('#container')[0], 5, 5, {
\t \t \t \t \t 'background': '#fff',
\t \t \t \t \t 'width': 1200,
\t \t \t }, function() {
\t
\t \t \t \t $("#loading").hide();
\t \t \t \t
\t \t \t \t if (navigator.userAgent.indexOf('iPad') == -1)
\t \t \t \t \t {
\t \t \t \t \t doc.save("LivingWellSession");
\t \t \t \t \t }
\t \t \t \t else {
\t \t \t \t doc.output('datauri');
\t \t \t \t
\t \t \t \t }
\t \t \t \t $("#iframepdf").attr("src", doc.output('datauristring'));
\t \t \t
\t \t \t \t $('#pdfdownloadlink').click(function() { doc.save('liwingWellsession.pdf');});
\t \t \t \t
\t \t exportRevert();
\t \t
\t \t \t });
\t \t }
\t \t
\t \t });
</script> \t \t
\t \t
<!--<![endif]-->
</head>
<body>
\t <div class="modal_white"></div>
\t <div id="loading">
\t \t <div class="imgload">
\t \t \t <h1>Creating the PDF</h1>
\t \t \t <img src="./img/loader.gif" style="width: 80px; height: 80px;">
\t </div>
\t </div>
\t <div id="container">
\t \t <div id="top_wrapper">
\t \t \t \t <img id="img_logo" src="./img/logo.jpg">
\t \t \t \t <h1 class="showpdf" style="width:50%;">Take Action on Your Hearing</h1> \t \t \t \t
\t \t \t \t <div id="nav_controls" Class="ignorepdf" >
\t \t \t \t \t
\t \t \t \t \t <div class="nav_page">
\t \t \t \t \t \t <a href="#" id="reload_btn">
\t \t \t \t \t \t <div class="nav_save_btn nav_btn">
\t \t \t \t \t \t <p><i class="icon-refresh icon-large" ></i></p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <p>Reset session</p>
\t \t \t \t \t \t </a>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="nav_page">
\t \t \t \t \t \t <a href="#" class="pdf_save" >
\t \t \t \t \t \t <div class="nav_btn">
\t \t \t \t \t \t <p><i class="icon-file-text icon-large" ></i></p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <p>Download</p>
\t \t \t \t \t \t </a>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t </div>
\t \t </div>
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t <div id="page_wrapper">
\t \t \t <div class="page">
\t \t \t \t
\t \t \t \t <div class="content_page">
\t \t \t \t \t <div class="content" style="margin-top: 75px !important;">
\t \t \t \t \t \t
\t \t \t \t \t \t
\t \t \t \t \t \t <h1 class="ignorepdf">Take Action on Your Hearing</h1>
\t \t \t \t \t \t <p>TThis activity is designed to help you think about how important it would be for you to improve your hearing in communication situations that you may find it difficult to hear in today. You can print out a copy and bring it to your first appointment, or email it to your audiologist before you meet.</p>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t </div>
\t \t \t
\t \t \t <div class="page">
\t \t \t \t <div class="content_page">
\t \t \t \t \t <div class="content">
\t \t \t \t \t \t <h2>Many people discover that they have a hearing loss because they have hearing difficulties in one or often more of the situations shown below.</h2>
\t \t \t \t \t \t Take a look at the photos. Have you experienced hearing difficulties in any of these situations? (Click to select)
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t
\t \t \t <div class="session" id="session1">
\t \t \t \t <div id="images">
<ul id="situations">
<li id="strategy1" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/1_Communicating-in-noisy-environment.jpg"></li>
<li id="strategy2" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/2_Communicating-with-family.jpg"></li>
<li id="strategy3" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/3_Communicating-with-spouse.jpg"></li>
<li id="strategy4" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/11_woman_on_the_phone.jpg"></li>
<li id="strategy5" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/7_Communicating-in-meeting,professional-events.jpg"></li>
<li id="strategy6" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/8_Watching-a-movie-in-cinema.jpg"></li>
<li id="strategy7" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/9_Communicating-in-car.jpg"></li>
<li id="strategy8" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/10_Shopping.jpg"></li>
<li id="strategy8" class="situationimg"><img style="width: 300px; height: 200px;" src="./img/situations/12_man_with_child.jpg"></li>
</ul>
</div>
\t \t \t </div>
\t \t \t
\t \t \t
\t \t \t <hr class="session_line" style="display:none;">
\t \t
\t \t \t <div class="page">
\t \t \t \t <div class="content_page" style="clear:both; margin-bottom:40px !important;">
\t \t \t \t \t <div class="content">
\t \t \t \t \t \t <div class="left_content">
\t \t \t \t \t \t \t <p> How important is it for you to improve your hearing in the selected situations? (Place the marker on the line)</p>
\t \t \t \t \t \t \t <div id="slidescale">
\t \t \t \t \t \t \t <input type="text" data-slider="true" value="5.4" data-slider-range="1,10" data-slider-step="0.1">
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div style="width:44%; float:left; padding-left:20px;">1</div>
\t \t \t \t \t \t \t <div style="width:48%; float:left; text-align: right; padding-right:15px;">10</div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="right_content">
\t \t \t \t \t What is your reason for putting the marker where you did?
\t \t \t \t \t <textarea placeholder="Please write your reasons here" id="text1" type="text" class="textquestions1"></textarea>
\t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div class="session" id="session2">
\t \t \t \t <div class="openquestion">
\t \t \t \t \t What will happen if you continue as you do today?
\t \t \t \t \t <textarea placeholder="Write here" id="text2" type="text" class="textquestions" style="margin-top:22px;"></textarea>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="openquestion">
\t \t \t \t \t What would happen if you get a hearing aid and improve your hearing right now?
\t \t \t \t \t <textarea placeholder="Write here" id="text3" type="text" class="textquestions" style="margin-top:2px;"></textarea>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t
\t \t \t </div>
<div class="session" id="session2">
\t \t \t \t <div class="openquestion">
\t \t \t \t \t What will happen if you continue as you do today?
\t \t \t \t \t <textarea placeholder="Write here" id="text2" type="text" class="textquestions" style="margin-top:22px;"></textarea>
\t \t \t \t \t
<a href="#" class="pdf_save" >
</div>
\t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t </div>
\t \t \t <div class="session ignorepdf" id="session3">
\t \t \t \t
\t \t \t \t \t <h2 style="padding-left:14px;">Hear their stories</h2>
<div style="padding-left:14px; width:49%; float:left; margin-right: 6px;">
<iframe src="https://player.vimeo.com/video/128467673" width="95%" height="270" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div style=" width:49%; float:left;"><iframe src="https://player.vimeo.com/video/138837087" width="95%" height="270" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
\t \t \t \t \t
\t \t \t </div>
\t \t \t \t
\t \t \t <div id="container">
\t \t <div id="top_wrapper">
</div>
</div>
\t \t
\t
\t </div>
</div>
\t <div class="nav_page">
\t \t \t \t \t \t <a href="#" class="pdf_save" >
\t \t \t \t \t \t <div class="nav_btn">
\t \t \t \t \t \t <p><i class="icon-file-text icon-large" ></i></p>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <p>Download</p>
\t \t \t \t \t \t </a>
\t \t \t \t \t </div>
<script>
$("[data-slider]")
.each(function() {
var input = $(this);
$("<span>")
.addClass("output")
\t .insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output")
.html(data.value.toFixed(0));
$(this).parents().find(".dragger").append("<p></p>").html(data.value.toFixed(0));
});
</script>
</body></html>