javascript - How to print a hidden div content using jquery? -


i have anchor button , hidden div. write code print content of div. time shows content in print file , time blank. please me

<div class="row-fluid printdiv" id="printdiv" style="display:none;">         <div class="col-md-8 indexleft">       <div class="blog">          <!-- blog details -->         <div class="blogdetail row-fluid">           <div class="col-md-5">             <figure><img src="images/24hr-gym-logo-2014-698x198.jpg" alt="" /></figure>           </div>           <div class="col-md-7">             <div class="title">               <h2><a href="#">relief chronic pain 1</a></h2>             </div>             <div class="writer">               <label>writtern :- </label>               bev matushewski</div>           </div>         </div>         <!-- blog text -->         <div class="blogtext row-fluid">           <p>“back problems among common chronic conditions in canada. 4 out of 5 adults experience @ least 1 episode of pain @ time in lives. can highly disabling, may cause significant work loss, , reduce quality of life individual. on years have been teaching alexander technique, estimate 75% of students come because of pain. or neck pain, pain injuries have been slow recover or pain working @ computer long hours. singers, actors, musicians, dancers or people want develop more self-awareness , self-growth make rest.</p>           <p>back pain can occur @ point of spine, , characterized range of symptoms including pain, muscle tension or stiffness, weakness in legs or feet, , possible tingling or burning sensation. caused strain on muscles , ligaments support spine. lower problems common, because bears weight , physical stress. discs in lumbar spine subjected constant pressure exaggerated bending , postural distortion can impinge on spinal cord or 1 of outlet nerves. may result not in pain in pain travelling down leg. condition known “sciatica”.</p>           <p>if have pain , try alexander technique, important ask why have pain. there many causes pain such infections or injuries. please consult doctor, if pain sudden or acute. teachers of alexander technique not trained in diagnosing issue medically. if in doubt, see gp.</p>           <p>secondly, may ask yourself, if pain life-style related. in cases, is. unconsciously, develop movement habits harm our bodies, , use effort in our daily activities. instance, sitting day @ computer poor posture can contribute pain. activities in house done strain might create pain. sports activities such running, if done badly, make pain more likely. often, ongoing postural habits causing or contributing factor many problems. when alexander technique can you.</p>            </div>         </div>      </div>     <!-- side bar -->     <div class="col-md-4 blogright">        <!--<h2 class="color-text" style="color:#000000;">our features</h2>-->        <!--div>                   <div><img src="/images/yoga-add3.jpg"> </div>                 </div-->        <section id="calender" class="stag-custom-widget-area ">          <aside id="text-22" class="widget widget_text">           <div class="textwidget"><br>              <div class="row">               <div class="col-md-12" style="float:left"> <a href="http://www.whiterockcity.ca/en/main/community/leisure/leisure-guide.html"><img src="http://foreverfit.today/wp-content/uploads/2014/12/rock_ad.jpg" height="200" width="300"></a> </div>                lorem ipsum here lorem ipsumlor  sumlorem ipsuml  orem ipsumlo  rem ipsumlorem ips umlorem ipsumlorem ipsum lorem ipsum here lorem ipsumlor  sumlorem ipsuml  orem ipsumlo  rem ipsumlorem ips umlorem ipsumlorem ipsum             </div>           </div>         </aside>        </section>     </div>     <!-- end of side bar -->      </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  <script>         function printbox(){          var content = $('#printdiv').html();            var printwindow = '<html><head><title>my div</title><link rel="stylesheet" href="css/print.css" /></head><body>'+ content +'</body></html>';             mywindow = window.open('', 'print div', 'height=400,width=600');             mywindow.document.write(printwindow);            mywindow.print();            return true;     }       $(function(){         $('#printbtn').click(function(e) {           printbox();         });     }); </script> 

just delaying call of print short amount of time give browser time write content printwindow.

you can achieve replacing line

mywindow.print(); 

with

settimeout(function(){ mywindow.print() }, 100); 

this delay print() call , should solve problem.


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -