1

I can't get my style sheets to apply to my popup window. I'm probably misses something simple but I can't seem to figure out what. I use the CSS on other pages with the same link and it works fine.

CSS

.Code128 {
    font-size: 50px;
}

JQuery

$(document).ready(function () {

    $('#Print').on("click", function () {
        Popup($('#PrintDiv').html());
    });

    function Popup(data) {
        var mywindow = window.open('', 'Print Label', 'height=400,width=600');
        mywindow.document.write('<html><head><title>Print Label</title>');

        mywindow.document.write('<link rel="stylesheet" type="text/css" href="~/Content/Fonts.css"/>');
        mywindow.document.write('<link rel="stylesheet" type="text/css" href="~/Content/Label.css"/>');

        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

       // mywindow.print();
       // mywindow.close();
    }
});

HTML

<div id="PrintDiv">
    <div class="Code128">BarCode</div>
    <div class="Code128">Bar Code</div>
</div>
joetinger
  • 2,589
  • 6
  • 29
  • 43
  • 1
    Post your CSS or nobody is going to be able to help. – Nicolas Sep 26 '14 at 20:42
  • Isn't CSS loaded into the DOM before javascript is executed? – Liam Sorsby Sep 26 '14 at 20:43
  • 1
    Why don't you just add your CSS imports to the top of your HTML page instead of appending them to the page. Because if Liam is right this code will never work. Also, why in the world do you append your html, head, and body tags to your popup and not on the page itself? – Nicolas Sep 26 '14 at 20:45
  • By the looks of this @Nicolas I'm wrong: http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript – Liam Sorsby Sep 26 '14 at 20:47
  • I was working off of this post so I assumed it wasn't http://stackoverflow.com/questions/18758288/open-a-new-javascript-window-open-along-with-its-css-styling – joetinger Sep 26 '14 at 20:48
  • Thanks for the help. I'm not a 100% if I'm going to do it this way but it now works. I may just create a page instead of appending my html as @Nicolas suggested. Seems cleaner and a a lot more logical. – joetinger Sep 26 '14 at 20:59

1 Answers1

1

Do you really have '~' in your path? Try to remove it. Could you give link to your document? Also, if you want just display text - you can use with css property "position:absolute" and provide necessary coordinates to it.

EvilOrange
  • 876
  • 1
  • 9
  • 17