CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ro-E
ro-E

Reputation: 299

Expanding a div's height when printing

I have a page that has a number of divs with content inside them. The divs are wrapped with lines - one line in the top and one in the bottom to sort of give the user a frame for each div.

Now I have a problem that if those divs have a lot of content their appearance in the website and in the actual printed page are different. The actual printed page needs more lines to show the same content, and so i need to make that div higher and lower the bottom line.

I wrote some code that works in chrome:

    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function (mql) {
        if (mql.matches) {
            changeDivHeight();
        } 
    });

For FF and IE that code doesn't work. I use:

    window.onbeforeprint = function () {
        changeDivHeight();
    };

    window.onafterprint = function () {
        changeDivHeight();
    }

// i need those two because when i'm back in the web-site i want the height to be changed again because in the print mode the page what thinner..

changeDivHeight looks at all the div's child elements and adds their heights to the div height. As i said it works in chrome. In FF and IE it doesn't work and I think because they don't have the print preview, the div doesn't change to fit the actual printed page, whereas in chrome I do have a print preview so the div fits itself in the actual printed page.

How can I fix this in FF and IE?

thanks!

EDIT

function changeDivHeight() {
    $.each(".div, function(index, div) {
        var newHeight = 0;
        for (i = 0; i < div.children.length) {
             newHeight += div.children[i].clientHeight;   
         }
  
         if (newHeight > 240) {
              $(div.parent).css("height", newHeight);
          }
   }
}

and every div is just filled up with P elements may have a lot of text

EDIT

I found that because chrome has a print preview, the clientHeight of the paragraphs with a lot of text changes in the print view, and so it works. in IE and FF i don't have this feature and so the height doesn't change, and it doesn't work.

Upvotes: 1

Views: 2785

Answers (1)

IronFlare
IronFlare

Reputation: 2322

You should be able to do this without using jQuery or JavaScript. If I'm understanding your question correctly, this can be achieved using CSS, which should be compatible with all modern browsers. Just add the following to the bottom of your CSS.

@media print {
    #divtomakelarger {
        height: auto; /*or whatever value you want*/
    }
}

Upvotes: 1

Related Questions