Home/ Questions/Q 8821201
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T05:47:36+00:00

I’m trying to loop through each tab on a page in Twitter Bootstrap and

  • 0

I’m trying to loop through each tab on a page in Twitter Bootstrap and print the contents of that tab when a button is clicked. In other words, if there’s 5 tabs, it loops through all of them and sends each page to the printer. The tabs are created dynamically on page load.

Right now I’ve got:

$("#idBtnPrint").click(function() {
        $("#idUlTab").each(function() {
            if (window.print) {
            $(this).window.print();
            return false;
            }
        });
    });

But it’s not working for me. I’m not particularly strong on query (probably evident) – can anyone offer any suggestions? I don’t see any comparable code anywhere to start.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a quick little jQuery plugin that will do what you are looking for. To use it, just do $('#id').print() in your loop. If you wish to print the container that your element is in as well, use $('#id').print({container: true});

    ;(function($) {
    $.fn.print = function(opts) {
        return this.each(function() {
            var options = $.extend({}, $.print.defaults, opts), 
                print_frame = $('<iframe id="print_content' + $.print.frame_num + '" scrolling="no" frameborder="0" name="print_frame" border="0"></iframe>'), 
                frame_doc, 
                frame_head, 
                frame_body, 
                html_base = '<!DOCTYPE html><html><head></head><body></body></html>';
            if(options.preview === true) {
                /* Create print modal and overlay */
                var overlay = $('<div id="print_overlay"></div>'), 
                    print_window = $('<div id="print_window"></div>'), 
                    print_controls = $('<div id="print_controls"><a class="print" title="Print">Print</a><a class="cancel" title="Cancel">Cancel</a></div>'), 
                    css = {
                        zIndex: options.zIndex, 
                        top: '0px'
                    };
                overlay.css({
                    width: document.documentElement.clientWidth + 'px', 
                    height: document.documentElement.clientHeight + 'px', 
                    zIndex: options.zIndex - 1
                }).appendTo('body');
                print_controls.find('a').click(function(e) {
                    e.preventDefault();
                    if($(this).hasClass('print')) {
                        print_frame[0].contentWindow.focus();
                        print_frame[0].contentWindow.print();
                    }
                    else {
                        $.print.destroy();
                    }
                });
                print_window
                    .append(print_controls)
                    .append(print_frame)
                    .css(css)
                    .appendTo('body');
                $(window).bind('resize.print', function(e) {
                    overlay.css({
                        width: document.documentElement.clientWidth + 'px', 
                        height: document.documentElement.clientHeight + 'px'
                    });
                }).bind('scroll.print', function(e) {
                    overlay.css({
                        top: document.documentElement.scrollTop + 'px', 
                        left: document.documentElement.scrollLeft + 'px'
                    });
                });
            }
            else {
                print_frame.appendTo('body');
            }

            frame_doc = $('#print_content' + $.print.frame_num)[0].contentWindow.document;
            frame_doc.open();
            frame_doc.write(html_base);
            frame_doc.close();

            /* Append the correct headers to the iframe */
            frame_head = $('head link[media="print"], head link[media="all"]').clone().each(function() {
                $(this).attr('media', 'all'); //In case a preview is being shown, show everything
            });
            if(options.container === true) {
                frame_body = $(this).clone().show();
            }
            else {
                frame_body = $(this).children().clone();
            }

            /* Append the body to the iframe */
            $(frame_doc)
                .find('head')
                    .append(frame_head)
                    .end()
                .find('body')
                    .append(frame_body)
                    .find('a').click(function(e){
                        e.preventDefault();
                        return false;
                    });
            $.print.frame_num++;
            if(options.preview === false) {
                print_frame.css({width: '0px', height: '0px'});
                print_frame[0].contentWindow.focus();
                print_frame[0].contentWindow.print();
            }
            return this;
        });
    };
    $.print = {
        frame_num: 0, 
        defaults: {
            preview: false, 
            container: false, 
            zIndex: 5000
        }, 
        destroy: function() {
            if($('#print_window').length > 0) {
                $('#print_window').remove();
                $('#print_overlay').remove();
                $(window).unbind('resize.print').unbind('scroll.print');
            }
        }
    };
})(jQuery);

    The corresponding CSS for this would be (don’t forget to change the image paths for the print and cancel icons):

    #print_overlay {
    background-color: rgb(176, 176, 176);
    opacity: 0.85;
    position: absolute;
    top: 0px;
    left: 0px;
}

#print_window {
    background: white;
    position: absolute;
    left: 50%;
    margin: 10px 0px 0px -465px; /* Re-center the preview */
    padding: 0px 75px;
    width: 794px;
    height: 100%;
    box-shadow: 0px 0px 20px black;
    -moz-box-shadow: 0px 0px 20px black;
    -webkit-box-shadow: 0px 0px 10px black;
}

#print_content {
    margin: 75px 0px;
    border: 0px;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#print_controls {
    position: fixed;
    top: 37px;
    left: 50%;
    border: 1px solid black;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    margin: 0px 0px 0px -81px;
    padding: 5px 0;
    opacity: 0.75;
}

#print_controls a {
    color: white;
    display: block;
    float: left;
    height: 24px;
    text-decoration: none;
    text-indent: -999em;
    width: 50px;
}

#print_controls a:hover {
    opacity: 0.75;
}

#print_controls a.print {
    background: url(print.png) no-repeat 50% 50%;
}
#print_controls a.cancel {
    background: url(cancel.png) no-repeat 50% 50%;
}

    UPDATE

    Here is an example:

    HTML

    <div class="print">
Print
</div>
<div class="print">
Print 2
</div>

    Javascript

    $(document).ready(function() {
    $('.print').print({container: true, preview: false});
});
    • 0