Print Page Section

by amindunited

HTML

<div class="page">
    <div class="leftSide">
    <h1>LEFT SIDE</h1>
        <ul>
            <li>Left side item 01</li>
            <li>Left side item 02</li>
            <li>Left side item 03</li>
            <li>Left side item 04</li>
            <li>Left side item 05</li>
        </ul>
        <div id="printLeft">Print</div>
    </div>
    
    <div class="rightSide">
    <h1>RIGHT SIDE</h1>
        <ul>
            <li>Right side item 01</li>
            <li>Right side item 02</li>
            <li>Right side item 03</li>
            <li>Right side item 04</li>
            <li>Right side item 05</li>
        </ul>
        <div id="printRight">Print</div>
    </div>
</div>

CSS

.leftSide {
    text-align:center;
    float: left;
    width: 45%;
    border:solid 1px gray;
    border-radius: 5px;
}
.rightSide {
    text-align:center;
    float: right;
    width: 45%;
    border:solid 1px gray;
    border-radius: 5px;
}
.leftSide li, .rightSide li {
    background-color: #AFD0DB;
    border: inset 1px #8a8a8a;
    border-radius: 5px;
    padding-left: 5px;
    margin:5px;
    
}
#printRight, #printLeft {
    padding:5px;
    margin:5px;
    border: inset 1px #8a8a8a;
    border-radius: 5px;
    background-color: #ededed;
}

JavaScript

//http://upshots.org/javascript/jquery-copy-style-copycss
//http://jsfiddle.net/b9sN7/1/
(function($){
    $.fn.copyCSS = function (source) {
        var dom = $(source).get(0);
        var dest = {};
        var style, prop;
        if (window.getComputedStyle) {
            var camelize = function (a, b) {
                    return b.toUpperCase();
            };
            if (style = window.getComputedStyle(dom, null)) {
                var camel, val;
                if (style.length) {
                    for (var i = 0, l = style.length; i < l; i++) {
                        prop = style[i];
                        camel = prop.replace(/\-([a-z])/, camelize);
                        val = style.getPropertyValue(prop);
                        dest[camel] = val;
                    }
                } else {
                    for (prop in style) {
                        camel = prop.replace(/\-([a-z])/, camelize);
                        val = style.getPropertyValue(prop) || style[prop];
                        dest[camel] = val;
                    }
                }
                return this.css(dest);
            }
        }
        if (style = dom.currentStyle) {
            for (prop in style) {
                dest[prop] = style[prop];
            }
            return this.css(dest);
        }
        if (style = dom.style) {
            for (prop in style) {
                if (typeof style[prop] != 'function') {
                    dest[prop] = style[prop];
                }
            }
        }
        return this.css(dest);
    };
})(jQuery);


(function($){
    $.fn.printElement = function(){
        var printable = $(this).clone();
        $('body').children().hide();
        $(printable).attr('id', 'printable').appendTo('body');
        var css = $("#printable").copyCSS(this);
        window.print();
        $(printable).remove();
        $('body').children().show();
        
    }
})(jQuery);

$(function(){
   ...