Print Webpages Problems :: Looking for Good Tutorial to Print Web Pages (Build by Jquery Ui, Jqgrid , Zend)

Print webpages problems :: looking for good tutorial to print web pages (build by Jquery ui, jqgrid , zend)

A lot of problems with printing you can solve with respect of media attribute of the stylesheet definition. You can declare

<link rel="stylesheet" type="text/css" media="screen" href="..." />

to include some css for screen only, use media="all" to define some information be displayed on both screen and printer or make a html elements be displayed only during printing. With jQuery UI for example you can find a good idea to print only a selected tab (or accordion). You can find useful not print some hidden divs like div.loadingui. So you can make a CSS like

<style  type="text/css" media="screen">
    #printableButNotVisible { display:none }
</style>
<style type="text/css" media="print">
    #accordion h3, #vcol, div.loadingui, div.ui-tabs-hide,
               ul.ui-tabs-nav li, td.HeaderRight { display:none }
    #printableButNotVisible { display:block }
</style>

It's only an example, but I hope to explain the main idea. Moreover you can dynamically create a css and insert or switch in your html document (see http://docs.jquery.com/Tutorials:5_Quick_jQuery_Tips#Switch_A_Stylesheet).

It can be a good idea to remove menus from the page during printing, but I can gives you no example, because I don't know what kind of menus you use.

If somebody knows a good CSS for print media for jQuery UI and for jqGrid it would be very interesting for me too.

How to make print of web page particular area contains with charts?

If you are using Microsoft Chart Controls you can try following code for printing :

public void PrintWebControl(Control ctrl, string Script)    
{
    StringWriter stringWrite = new StringWriter(); 
    System.Web.UI.HtmlTextWriter htmlWrite = new System.Web.UI.HtmlTextWriter(stringWrite);

    if (ctrl is WebControl)    
    {
      Unit w = new Unit(100, UnitType.Percentage);
      ((WebControl)ctrl).Width = w;
    }

    Page pg = new Page();
    pg.EnableEventValidation =false;

    if (Script != string.Empty)    
    {
      pg.ClientScript.RegisterStartupScript(pg.GetType(), "PrintJavaScript", Script);
    }

    HtmlForm frm = new HtmlForm();

    pg.Controls.Add(frm);

    frm.Attributes.Add("runat", "server");

    frm.Controls.Add(ctrl);

    pg.DesignerInitialize();

    pg.RenderControl(htmlWrite);

    string strHTML = stringWrite.ToString();

    HttpContext.Current.Response.Clear();

    HttpContext.Current.Response.Write(strHTML);

    HttpContext.Current.Response.Write("<script>window.print();</script>");

    HttpContext.Current.Response.End();

}

Calling :

PrintWebControl(Panel1);

gets you the print of the required chart.

Printing a value from javascript on a web page

That is because the DOM will change but it need to be repainted. And the loop is already finished when the dom is repainted. Try to set a timeout to loop every 100ms for example.
It will allow the DOM to be repainted.

This is a possible solution which use setTimeout to avoid blocking DOM repaint during computing.

http://jsfiddle.net/n4YYX/4/

<body>
<p id="data"></p>
<script>
    var remainingTasks;

    function doTask() {
        for (var j = 0; j < 1000; j++) {
            1 + 1;
        }
        console.log("remainingTasks=" + remainingTasks);
        document.getElementById("data").innerHTML = 100 - remainingTasks;
        remainingTasks--;
        if (remainingTasks > 0) setTimeout(doTask, 10);
    }

    function onClick() {
        remainingTasks = 100;
        doTask()
    }
</script>
<button onclick="onClick()">test</button>

Print Webpages Problems :: Looking for Good Tutorial to Print Web Pages (Build by Jquery Ui, Jqgrid , Zend)