Hide svg parts on print

Question

Is there any possibility to hide parts of svg at print layout.

Specialy i like to hide highstock rangeSelector and navigator will printing page.

This should work without js triggert buttons. It should work when browsers print button was used.

Is there any possibility to show / hide an element with css media=print and bind this event with jquery?

Need to hide on the yellow parts on print layout: http://i49.tinypic.com/24mbxop.png

for this example:

$(function() {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

});

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/

Answer 1

What @Bondye said.

Create a class something like

@media print {
    .unprintable {
        visibility: hidden;
    }
}

And apply the class to the svg elements you don't want to print

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="50"  cy="50"  r="40" fill="red" />
   <circle cx="150" cy="50"  r="40" fill="red" />
   <circle cx="50"  cy="150" r="40" fill="blue" class="unprintable" />
   <circle cx="150" cy="150" r="40" fill="red" />
</svg> 

And you try to print, the blue circle will be invisible.

http://jsfiddle.net/EqDGQ/

If visibility: hidden; doesn't work for you, try display: none; as well.

EDITED

If you cannot add the class when they are drawn, use Javascript to add that class after the page loads.

You can't use hide(), because it will remove the elements from screen as well. You'll have to open a new tab/window and call hide(), but as it is mentioned in the question, users may use the browser menu to print. Then, you don't have the chance to open a new tab/window and call hide() .

So, you must add the .unprintable class when the page loads. Then, on the screen everything is shown, but on print, .unprintable elements won't be printed.

If you post a link to the site, and tell me what you want to hide, I can help you write the JS code, but it will be something like: http://jsfiddle.net/EqDGQ/1/

$(function() {
    $('svg circle[fill="blue"]').attr('class', 'unprintable');
});

----------------

Edited Again! :)

I wrote this JS function (jQuery needed), that adds the ".unprintable" class to all the svg elements within a rectangular area:

setUnprintableArea = function(id, xMin, yMin, xMax, yMax, rightAligned) {
    if (rightAligned) {
        svgWidth = $('#'+id+' .highcharts-container svg')[0].getBoundingClientRect().width;
        xMin += svgWidth;
        xMax += svgWidth;
    }
    $('#'+id+' .highcharts-container svg *').filter(function() {
        rect = this.getBoundingClientRect();
        return (xMin <= rect.left && rect.right  <= xMax &&
                yMin <= rect.top  && rect.bottom <= yMax);
    }).attr('class', 'unprintable');
};

and you can call this function like this:

setUnprintableArea('container', 15, 45, 240, 70); // Zoom
setUnprintableArea('container', -55, 15, 0, 40, true); // Top-right Buttons
setUnprintableArea('container', 0, 430, Number.MAX_VALUE, Number.MAX_VALUE); // Horiz Scroll Bar

If you need to hide something that is right-aligned, set the rightAligned param to true to set the y-axis to the right edge of the svg (meaning x=0 at the right edge) and adjust xMin and xMax accordingly.

I put this on fiddle: http://jsfiddle.net/DXYne/1/

Can this be a solution?