Forum:

HTML Pages with CSS and JavaScript

Print Text Area

Ranch Hand

Posts: 146

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I am trying to print a text area using JQuery. Here is my code, I am new to JQuery, any insight on what and how to code could really help. Thanks for your time.
Luke.

Since I am not able to attach the file(don't know why, may be security reasons) I am copy pasting the script file:

jquery.printElement.js

/// <reference path="http://code.jquery.com/jquery-1.4.1-vsdoc.js" />
/*
* Print Element Plugin 1.2
*
* Copyright (c) 2010 Erik Zaadi
*
* Inspired by PrintArea (http://plugins.jquery.com/project/PrintArea) and
* http://stackoverflow.com/questions/472951/how-do-i-print-an-iframe-from-javascript-in-safari-chrome
*
*  Home Page : http://projects.erikzaadi/jQueryPlugins/jQuery.printElement 
*  Issues (bug reporting) : http://github.com/erikzaadi/jQueryPlugins/issues/labels/printElement
*  jQuery plugin page : http://plugins.jquery.com/project/printElement 
*  
*  Thanks to David B (http://github.com/ungenio) and icgJohn (http://www.blogger.com/profile/11881116857076484100)
*  For their great contributions!
* 
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*   
*   Note, Iframe Printing is not supported in Opera and Chrome 3.0, a popup window will be shown instead
*/
; (function (window, undefined) {
    var document = window["document"];
    var $ = window["jQuery"];
    $.fn["printElement"] = function (options) {
        var mainOptions = $.extend({}, $.fn["printElement"]["defaults"], options);
        //iframe mode is not supported for opera and chrome 3.0 (it prints the entire page).
        //http://www.google.com/support/forum/p/Webmasters/thread?tid=2cb0f08dce8821c3&hl=en
        if (mainOptions["printMode"] == 'iframe') {
            if ($.browser.opera || (/chrome/.test(navigator.userAgent.toLowerCase())))
                mainOptions["printMode"] = 'popup';
        }
        //Remove previously printed iframe if exists
        $("[id^='printElement_']").remove();

return this.each(function () {
            //Support Metadata Plug-in if available
            var opts = $.meta ? $.extend({}, mainOptions, $(this).data()) : mainOptions;
            _printElement($(this), opts);
        });
    };
    $.fn["printElement"]["defaults"] = {
        "printMode": 'iframe', //Usage : iframe / popup
        "pageTitle": '', //Print Page Title
        "overrideElementCSS": null,
        /* Can be one of the following 3 options:
        * 1 : boolean (pass true for stripping all css linked)
        * 2 : array of $.fn.printElement.cssElement (s)
        * 3 : array of strings with paths to alternate css files (optimized for print)
        */
        "printBodyOptions": {
            "styleToAdd": 'padding:10px;margin:10px;', //style attributes to add to the body of print document
            "classNameToAdd": '' //css class to add to the body of print document
        },
        "leaveOpen": false, // in case of popup, leave the print page open or not
        "iframeElementOptions": {
            "styleToAdd": 'border:none;position:absolute;width:0px;height:0px;bottom:0px;left:0px;', //style attributes to add to the iframe element
            "classNameToAdd": '' //css class to add to the iframe element
        }
    };
    $.fn["printElement"]["cssElement"] = {
        "href": '',
        "media": ''
    };
    function _printElement(element, opts) {
        //Create markup to be printed
        var html = _getMarkup(element, opts);

function _callPrint(element) {
        if (element && element["printPage"])
            element["printPage"]();
        else
            setTimeout(function () {
                _callPrint(element);
            }, 50);
    }

function _getBaseHref() {
        var port = (window.location.port) ? ':' + window.location.port : '';
        return window.location.protocol + '//' + window.location.hostname + port + window.location.pathname;
    }

function _getMarkup(element, opts) {
        var $element = $(element);
        var elementHtml = _getElementHTMLIncludingFormElements(element);

return html.join('');
    };
})(window);

Bear Bibeault

Sheriff

Posts: 67528

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

What's the problem? Is that a plugin you found somewhere?

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Luke Zechariah

Ranch Hand

Posts: 146

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks for the reply Bear. My problem is I am not able to print, it is giving me javaScript errors. Not able to print. Is there any other way using jQuery how I could print a text area from a html page. The code I pasted was a script file I found online, may be I did not know how to use it.

Bear Bibeault

Sheriff

Posts: 67528

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

That's way too much script for someone to analyze for you. I suspect it would be best to either need to narrow the problem down and ask more specific questions, or contact the author of the script for help.

[Asking smart questions] [About Bear] [Books by Bear]

Luke Zechariah

Ranch Hand

Posts: 146

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks Bear, lets leave the script code. Overall, do you have any suggestions if I have to print just the text area using Jquery?

Bear Bibeault

Sheriff

Posts: 67528

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Depends how fancy you want to get. Seems pretty easy to do the basic thing:

Grab the content of a text area.

Create a hidden iframe.

Write the content to the iframe, along with a script tag that calls window.print()

[Asking smart questions] [About Bear] [Books by Bear]

Luke Zechariah

Ranch Hand

Posts: 146

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks Bear, I was able to solve this with the following code, it is working fine if I have normal javaScript but I am missing something with JQuery. Please help. Thanks, Lz.

JQuery Script Code:

Bear Bibeault

Sheriff

Posts: 67528

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This line:is not the way to deal with a jQuery wrapped set.

[Asking smart questions] [About Bear] [Books by Bear]