Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Printing dialog box

    Hello,

    I'm creating a web application for a takeaway company. My problem refers to the part of the application that will only run on their systems (i am quite aware of the exploits it would cause on random websites.)

    Basically the interface where new orders appear there is a button to print. This button actually opens up a new window, with a formatted receipt (they use a STAR SP200 receipt printer.)

    and has this function excute on load:

    Code:
    function win(){
    window.print();
    window.opener.location.href="<? echo $file ?>";
    setTimeout('window.close()',2);
    window.focus();
    //-->
    }
    However the client doesn't like the print dialog box, and using touch screens to operate this application those two print/cancel buttons are quite small and close together.

    I've been reading various methods for old versions of IE and a method for Firefox, however neither of these are any good to me as i'm having to use opera due to very poor driver support from the receipt printer with xp.

    We have full control of the system which this application will be running, Any application/plugin/exploits etc can be installed or used to help with removing the print dialog box.

    The only thing that i can't seeminly change is using the browser opera.

    Any help would be much appreciated.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    javascript alone cannot overcome this problem, as a security precaution. we all know how annoying sound ads are, think how bad it would be to have your printer fire up and spit one out...
    ie and ff (and likely others) are designed to force a print button click by the user.


    so the question now becomes: what's the easiest way of getting this done?

    it's an interesting problem, and i doubt you are alone.

    i want to help solve this, but i have a few questions to facilitate an apropos solution.



    do you have access to an http server?
    -write permissions on that server?
    is this the only thing the printer will be used for?
    do you prefer firefox or IE?

    im thinking that something like saving the receipt using ajax, and using a simple .exe to send it to the printer would work. you could use a unique file extension for the html file, and associate that with the autoprint exe.
    Last edited by rnd me; 06-17-2008 at 06:48 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    copes (06-17-2008)

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    As regards to the server, Yes we have our own dedicated server.

    As regards to the printer, It is used to print out from another system apart from the one we are creating. It is a STAR SP200 which is a specialist receipt printer.

    As regards to browser preference, The only browser that prints out from html correctly is Opera 9. IE7 prints out incorrectly, and firefox doesn't print anything! This is due to the printer being very old and not having xp/vista drivers supplied.

    We have full control over the "till" computer, to install or change anything we want as long as it works in the end.

    I'm currently using php for the backend of the application, and javascript for the printing functions and a few other ui tweaks.

    I've never used Ajax before, or really know alot about it.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    you mention that ie prints it out incorectly.
    i made a working .exe last night that uses IE.
    it runs, opens the same url every time (which can be over-written from the client), prints without asking, and closes.


    i can tell you however, that it is not likely a print driver problem,
    but browser incompatibilities that produce the printing effects you note.
    if you can print from opera, you SHOULD (hehe) be able to print from any browser.
    different browsers render pages differently.



    i would be willing to bet that you could achieve a uniform look using CSS formatting.
    there is a way to use separate css for the print version.
    i believe that css is what you should be formatting.
    often i see css being used to layout the screen, and recycled for printing, which usually doesn't work very well.

    here is an example of using conditional styles.
    you should probably strip out all the css and just use the media sections to make a customized version.

    when printed, it makes forms look more like the hand-filled forms many business use.


    Code:
    <style type='text/css'>
    
    
    
    
    /*view and print  styles*/
    input { font-size: 120&#37;; padding: .2em;  background: transparent; }
    label { padding-right: 1em; }
    select { font-size: 120%; padding: .2em;  background: transparent; width: 10em;}
    
    
    /*view only styles*/
      @media screen {
    
    input {margin: .3em; -moz-border-radius : 3px; }
    select {margin: .3em; -moz-border-radius : 3px; }
    a:focus {-moz-outline: activecaption solid 4px; -moz-outline-radius: 9px;background-color: white; color: black ; padding: 4px; font-size: 130%; background-image:url('/pub/fade22.gif');   }
    input:focus {opacity: 1.0; filter: alpha(opacity=100); -moz-outline: #7f7 solid 4px; -moz-outline-radius: 6px;	background-image:url('/pub/fade22.gif') }
    select:focus {opacity: 1.0; filter: alpha(opacity=100); -moz-outline: #7f7 solid 4px; -moz-outline-radius: 6px;	background-image:url('/pub/fade22.gif') }
    }
    
    @media screen, print{
         body {	background-color:buttonface; font-family: verdana; font-size: 12pt; color: Black; 
    		overflow:hidden;padding: 5px; margin: 0px;  }
    	ul {line-height: 150%; list-style-type: none; }
            input { border: 2px solid windowframe ; background: white; color: black; margin-left: .66em; }
    	.noscreen { display: none; }
    } /* end of screen styles*/
    
    @media print{
    	.noscreen { display: block; }
    	.noprint { display: none; }
    	h1 {font-size: 30%: }
    	input { border: 0px; border-bottom: 2px solid black; padding-bottom: .2em; margin-bottom: -.2em;
    	 width: 5em; text-align: center; font-family: "courier new", serif;  background: transparent;  }
    	select { border: 0px; border-bottom: 2px solid black; 
    	 width: 7em; text-align: center; font-family: "courier new", serif;  }
           .sig u { font-size: 35pt; }
           hr {margin: 2em;}
    
    }	 /* end of print styles*/
    
    </style>
    
    
    <!--[if IE]>
    <style type='text/css'>
    a:active{-moz-outline: activecaption solid 4px; -moz-outline-radius: 9px;background-color: white; color: black ; padding: 4px; font-size: 130%; background-image:url('/pub/fade22.gif');   }
    input:active{opacity: 1.0; filter: alpha(opacity=100); -moz-outline: #7f7 solid 4px; -moz-outline-radius: 6px;	background-image:url('/pub/fade22.gif') }
    select:active{opacity: 1.0; filter: alpha(opacity=100); -moz-outline: #7f7 solid 4px; -moz-outline-radius: 6px;	background-image:url('/pub/fade22.gif') }
    </style>	
    <![endif]-->

    if you can play around with the css and get it to work in ie, i would be happy to share the exe and source ( simple vb6) of my autoprinter.
    Last edited by rnd me; 06-17-2008 at 09:09 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello again,

    Thanks for your help.

    This is the example receipt which i am trying to print.

    http://www.aligeez.co.uk/receipt.html

    It doesn't have any formatting apart from the table layout.

    The actual layout works fine in IE, the problem with IE is it makes everyline a double line whether it be <td></td>, <br> or <p></p> and it adds random spaces in between letters, e.g 'HE LLO'

    The actual receipt i haven't used css to format in font terms because the printer only prints in a single device-font.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    hmmm.
    if it is a fixed-font, it might be best to convert the table into text.
    that should print more consistently.
    spaces can be used to justify.


    i will do some research about the printer and get back to you.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    copes (06-20-2008)

  • #7
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Okay.

    I'm still thinking it may be easier to bypass the print dialog box in opera, than work out how to print correctly in IE, but i may be wrong.

  • #8
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I've tried today to get IE printing correctly.

    I've also tried printing with IE6 which had the exact same results.

    If its any consulation i've actually managed to get IE6/7 printing without the dialog box using some vbscript. However, this is useless as the IE prints are incorrect!

    If only i could find a way to get opera printing!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •