Advanced Search

Page 3 of 8 FirstFirst 12345 ... LastLast
Results 21 to 30 of 72

Thread: Print not working as desired in Lightbox

  1. #21
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    OK, let's try this version of the script.responsive.js file (right click and 'Save As'):

    script.responsive.js

    Same deal as before, make sure you have a backup, upload this version to the:

    raihans.co.uk/templates/raihans/

    folder.

    Now, as currently setup this will only work for the Print button on the page that you get to after you hit Send. That Print button will print the contents of the form on that page.

    But if you put a Print button on the first page, it will work. These print buttons no longer need to have an onclick event. They do have to be input elements with type="button" and value="Print". If you don't want them printed, they should be outside the form. The one you already have is outside the form, so that's good. If you don't want to see the other buttons, we can take care of those. Let's see if this works live. It works here if I append it to the contact-us page.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. The Following User Says Thank You to jscheuer1 For This Useful Post:

    raihan (03-07-2013)

  3. #22
    Join Date
    Feb 2013
    Posts
    49
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

    Thanks a lot jscheuer1's Avatar. Yes u r right. In chrome it's print's like ur http://home.comcast.net/~jscheuer1/s...0Us%20Sent.pdf. In IE9 or Mozilla 19 you will get nearly similar print-out, accept with a directory path on the top right.
    IE8 or lower, it' just messed-up - main problem is, it doesn't shows the errors - say,if you leave the name box empty, the error 'It is required' not be shown when Send button is clicked.

    Thank you.

  4. #23
    Join Date
    Feb 2013
    Posts
    49
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

    Grt, 'Print' button is now vanished in my print-out for each of the browser (IE9, Mozilla 19 and Chrome 25), accept IE8 or older.

    It pop's-out another window, which I have asked you at beginning jscheuer1's Avatar. But you been saying that, it's not gonna support by many browsers and there was a little technical explanation. You remember? Anyway, that's OK at the moment. Just need to vanish other two buttons and directory path at the top corner, which comes in the print-out.

    Then might step for IE8 or older versions. Why IE's just doesn't upgrade by itself and wait for user intraction? As Mozilla and Chrome updated automatically. Many low level users don't know even what is what...

    Thank you.

  5. #24
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    Users of Windows XP cannot use anything later than IE 8. Other than that, the new trend with IE as with all other browsers is to update more and more aggressively.

    As for paths and/or filenames appearing in a printout from the web, that's the browser. Javascript has no real control over that. Even with the popup print where there's no real page, the path is still known. Some browsers will use the name of the top file (contact-us). Many if not most browsers now allow you to configure whether or not paths, filenames, page numbers, dates, etc. appear when printing from the web. But that's the user of the browser who controls that, not javascript.

    I'm a little busy at the moment. But I already have a version that gets rid of the two buttons. I'll post it soon. As for warning messages not working in some browser(s). Make sure those worked in those browsers before lightbox.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    raihan (03-07-2013)

  7. #25
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    OK, here's the latest script.responsive.js file:

    script.responsive.js

    Should get rid of those buttons.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    raihan (03-05-2013)

  9. #26
    Join Date
    Feb 2013
    Posts
    49
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

    Many, many, many thanks to u, for ur time and all these discussions. As u went thrue each of the steps, I haven't got anyone like this in any discussion forum. I am totally new in web page designing and I got great help from u.

    I m not sure, is this forum only about lightbox, or I could discuss anything else as well about the web pages. But u r grt. Thnx a lot, though it's not enough for u.
    Last edited by raihan; 03-05-2013 at 10:40 PM.

  10. #27
    Join Date
    Feb 2013
    Posts
    49
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

    As u mentioned, I tried the form with normal web page, instead of lightbox. u r right. The errors doesn't appear for IE8. I know, I took lots of time already from u. If u have any suggestion please let me know. I think, it could be a new topics, as 'Making Web Page browser Independent'.

    Thanking you again. Raihan

  11. #28
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    That's (the error messages not showing in IE 8) a javascript error in MooTools:

    raihans.co.uk/media/system/js/mootools-core.js

    in that browser (two errors for IE 8 actually). I've patched the file. Keep a backup of yours just in case. Here's the patched version:

    mootools-core.js

    Use it instead.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    Last edited by jscheuer1; 03-06-2013 at 04:44 AM. Reason: patched the script
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    raihan (03-07-2013)

  13. #29
    Join Date
    Feb 2013
    Posts
    49
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

    Thank u and it's working now properly.

    Those files u posted for me: script.responsive.js and mootools-core.js, can I use them for other website too. If I can use, is there any changes I may need to do within those file, please specify. And obviuosly, I will be using Joomla, but could be Magento as well for my web sites. For Blogging could be Wordpress. And for the forums could be phpBB.

    Thanks a lot for ur time.

  14. #30
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    With mootools-core.js I would say, yes you can use it anywhere. The worst it might do is allow a script that uses it to fail without giving an error message as to why. That script would have failed anyway though.

    The script.responsive.js is different. It's tailor made to popup print a page in that iframe that has a form and an input button with the value of "Print" on it when that iframe is launched using SqueezeBox activated via an a tag with a class of modal on a page with contact-us in the URL. So, yeah, you can use it pretty much anywhere you could use the old script.responsive.js file, but it won't do anything unless it encounters that exact sort of page in that exact context/circumstances. This is the code that was added (it's independent of the rest of the script and is just tacked on at the end):

    Code:
    if(location.href.indexOf('contact-us') > -1){
    	jQuery(function($){
    		var timer, size, $iframe, $form, $print, index, iframedocref;
    		function printPage(){ 
    			var html, css, csss_file, printWin; 
    			css = "button{display:none;}"; 
    			css = "<style type='text/css'>"+css+"</style>"; 
    			css_url = ''; 
    			if ( css_url !== '' ) { 
    				css_url = "<link rel='stylesheet' type='text/css' href='"+css_url+"' media='print' />"; 
    			} 
    			html = '<html><head>'+css+css_url+'</head>'+$form.html()+'</html>'; 
    			
    			printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=no, scrollbars=yes, status=yes' ); 
    			printWin.document.write(html); 
    			printWin.document.close(); 
    			printWin.focus(); 
    			printWin.print(); 
    			printWin.close(); 
    		}
    		$('a.modal').click(function(){
    			timer = setInterval(function(){
    				size = ($iframe = $('#sbox-window iframe')).size();
    				if(size === 1){
    					clearInterval(timer);
    					index = $('iframe').index($iframe);
    					$iframe.load(function(){
    						iframedocref = window.frames[index].document;
    						$form = $(iframedocref.forms[0]);
    						$print = $('input[value="Print"]', iframedocref);
    						if($print.size()){
    							$print.unbind('click').click(printPage).get(0).onclick = function(){};
    						}
    					});
    				}
    			}, 20);
    		});
    	});
    }
    It should be pretty easy to follow. When I get more time I will annotate key variables, lines to make it clearer. It could be tweaked to popup print other things.

    I put it in that file because it uses jQuery and so does the rest of that file, so it's fairly safe to assume that jQuery will be available to it. And because that file was already in use on the contact-us page.

    Here's the annotated version:

    PHP Code:
    if(location.href.indexOf('contact-us') > -1){ //if the page has contact-us in it's address
        
    jQuery(function($){ //once the page has been parsed
            
    var timersize$iframe$form$printindexiframedocref;
            function 
    printPage(){ //function used to popup print the page, could be made standalone and/or modiied slightly to be used for other popup printing duties
                
    var htmlcsscss_urlprintWin
                
    css "button{display:none;}"//add css to not print or show the button elements in the popup (can be changed to do other stuff, or removed if not needed)
                
    css "<style type='text/css'>"+css+"</style>"
                
    css_url ''//not currently used, can add a print stylesheet url to the popup
                
    if ( css_url !== '' ) { 
                    
    css_url "<link rel='stylesheet' type='text/css' href='"+css_url+"' media='print' />"
                } 
                
    // $form.html() in the below line is the HTML of the first form on the document with 
                // the "Print" button on it, could be something else, it's what will be printed:
                
    html '<html><head>'+css+css_url+'</head>'+$form.html()+'</html>';
                
                
    printWin window.open('''''left=100, top=100, width=600, height=400, toolbar=no, scrollbars=yes, status=yes' ); 
                
    printWin.document.write(html); 
                
    printWin.document.close(); 
                
    printWin.focus(); 
                
    printWin.print(); 
                
    printWin.close(); //not executed in Opera for some reason, user can manually close easily enough
            
    }
            $(
    'a.modal').click(function(){ //when an a tag with a class of modal is clicked
                
    timer setInterval(function(){ //check repeatedly for the appearance of an iframe in the 
                    
    size = ($iframe = $('#sbox-window iframe')).size(); // SqueezeBox div
                    
    if(size === 1){ //when found
                        
    clearInterval(timer); //stop checking
                        
    index = $('iframe').index($iframe); //find out numerically which iframe element on the page it is
                        
    $iframe.load(function(){ //assign an onload event to it
                            
    iframedocref window.frames[index].document//access its document via its numerical reference in the top page's window collection
                            
    $form = $(iframedocref.forms[0]); //find the first form on that document, currently used in the printPage function above to determine what to print
                            
    $print = $('input[value="Print"]'iframedocref); //find an input button or buttons on it with a value of "Print"
                            
    if($print.size()){ //if there are any assign click behavior to it/them (the printPage function) and remove other click behaviors from it/them
                                
    $print.unbind('click').click(printPage).get(0).onclick = function(){};
                            }
                        });
                    }
                }, 
    20); //20 millisecond polling for interval once a.modal is clicked, until it launches its iframe
            
    }); // END when an a tag with a class of modal is clicked
        
    }); //END once the page has been parsed
    //END if the page has contact-us in its address 
    While I annotated I saw that:

    Code:
    var html, css, csss_file, printWin;
    should be:

    Code:
    var html, css, css_url, printWin;
    Using a text only editor like NotePad, fix that in your live copy.
    Last edited by jscheuer1; 03-07-2013 at 02:49 AM. Reason: add annotated version
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  15. The Following User Says Thank You to jscheuer1 For This Useful Post:

    raihan (03-07-2013)

Similar Threads

  1. how to move javascript to desired location on page?
    By rytis in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-20-2011, 05:25 PM
  2. print.css fot lightbox
    By lostnight in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-16-2009, 06:42 AM
  3. Lightbox Print Help
    By eld in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 04-23-2008, 07:22 PM
  4. Replies: 1
    Last Post: 12-09-2007, 11:59 PM

Bookmarks

Posting Permissions

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