Page 2 of 8 FirstFirst 1234 ... LastLast
Results 11 to 20 of 72

Thread: Print not working as desired in Lightbox

  1. #11
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,963
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    I think I may be able to help a little here John. The common template file in a Joomla! website is located at http://www.mywebsite.com/templates/selected_template/index.php

    The folder in red is the name of the theme that is currently in use (you can download and install different Joomla! themes into the "templates" directory), and the index.php file within that selected template folder contains the main website layout/template structure - the DOCTYPE, <head> section and <body> section of the web pages with all the template/module/block hooks inside of that. This index.php file is where raihan will be able to manually edit in his own content (references to external js/CSS files, etc).

    Also, Joomla! generates dynamic page URLs from menu ids in the database, so a page that can be viewed at raihans.co.uk/homepage/contact-us doesn't actually exist there in a physical form. Nor does an actual "homepage" or "contact-us" folder exist either - those are references to dynamic 'category' names and 'section' names that Joomla! uses to generate a menu - so your way of isolating a page name with that jQuery snippet you posted earlier on would be the best way to link a specific js or CSS file to a singular page. Hope that helps. You've helped me too with that particular jQuery snippet BTW - I've been doing it with php Thank you.

    But raihan, first do what John advised in the post before this and then let John advise what to do next.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

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

    jscheuer1 (03-04-2013)

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

    Default

    That's grt.
    Just to remove any confusion in future, I am using Ubuntu Linux 12.04. Instead using directly my web server, I am using locahost at the moment. So, instead of raihans.co.uk, now is localhost and my directory for that is /opt/lampp/htdocs/joomla/components/com_chronoforms/css. Inside that folder, I have created as you suggest me: contactprint.css, with your code.

    Thank you.

  4. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Upload it to the server. Each of these steps should be done live so I can check the progress and make adjustments if any are required.
    - John
    ________________________

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

  5. #14
    Join Date
    Feb 2013
    Posts
    49
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

    Alright, I have uploaded. Thnx. Then...
    Last edited by raihan; 03-03-2013 at 10:01 PM.

  6. #15
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Great, I see it there and if I append it to the contact-us page as a print stylesheet it works. In order to get that to happen without me having to do it, follow this next step -

    Part One - Make an empty local folder for backups and download this file into it:

    raihans.co.uk/templates/raihans/script.responsive.js

    Don't use the browser, use ftp or whatever file transfer method you use for maintaining the live site.

    Part Two - download this file to a separate empty folder (right click and 'Save As'):

    script.responsive.js

    And upload it to raihans.co.uk/templates/raihans/

    Once you do that, clear the browser's cache and refresh the contact-us page. Then open the box containing the form. Then, using your browser's print preview from its menu, see what you get, it should be just the form, or just the form with a border.

    Even if that's not what happens, leave it in place for me to check.

    Once we get that part working, we are almost finished.
    - John
    ________________________

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

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

    raihan (03-07-2013)

  8. #16
    Join Date
    Feb 2013
    Posts
    49
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

    Thank u. I kept my .js file in my local drive and uploaded your .js file into my site. I used filezilla for transfers. Then cleared my Mozilla browser's cache and cookies. Finally, I tried to print, but still unfortunate. Sry, but no change. That's the update at the moment. Thanx again.

  9. #17
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    I don't know what you're seeing. I'm seeing just the form and in some browsers the box shadow, some the close button.

    If that's not what you're seeing, you're probably either looking at your local installation, or a cached copy, or some other page than:

    raihans.co.uk/homepage/contact-us

    It's possible you have an outdated browser, or some unusual setting that's making it ignore the print stylesheet, but less likely than one of the above explanations. There might even be some problem unique to your setup that I haven't thought of, again much less likely.

    BTW, the box shadow and close button can be gotten rid of by adding this (highlighted) to the contactprint.css stylesheet:

    Code:
    body * {display: none;}
    body #sbox-window, body #sbox-window * {position: static; display: inline-block;}
    #sbox-window.shadow {
    	-webkit-box-shadow: 0 0 0 #fff;
    	-moz-box-shadow: 0 0 0 #fff;
    	box-shadow: 0 0 0 #fff;
    }
    body #sbox-btn-close {display: none;}
    A thought has occurred to me while playing around with this, the Send button could be removed as well. Let me know. That would require altering the .js file again (or maybe a different .js file, I don't think that script is used by the page with the form on it) and adding another stylesheet for printing, one for the page with the form on it. Sounds a little more complicated than it probably is.

    But perhaps we're getting ahead of ourselves. Wasn't that the point? To see only the form? If you have something else in mind, we can probably do that. If so, a screen shot of what that other code you were using when it worked (without the lightbox) produced would probably help. But then again, showing only the form should be sufficient, right?
    - John
    ________________________

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

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

    raihan (03-07-2013)

  11. #18
    Join Date
    Feb 2013
    Posts
    49
    Thanks
    25
    Thanked 1 Time in 1 Post

    Default

    Hi,
    Beverleyh - thnx for ur comment and yes, u r right. I don't hv any folder like homepage/contact-us. All I have is the /joomla/templates/raihans folder. Inside raihan template there's other folders, like: css,html or library, including the index.php file. I m not sure either, which stylesheet the 'Print' button it's referring to.

    All of my browsers (IE9, Mozilla 19.0, Chrome) are fully updated. Well, different browser acting differently. At the moment IE and Mozilla prints 2 pages - 2nd is empty. Chrome prints only 1 page. But all of them prints all the contents in the page, including buttons, site name, site server address or dirtectory path. I tried, IE6 & 8 too. They doesn't shows the errors in lightbox. Even if clicked 'Send' button with empty field, it proceeds to confirmation page. Though, all of these problem happening since I start with lightbox. Just thought to arise those one-after-another.

    Anyway, thanks a lot for all of your nice comments and support me.

    Raihan

  12. #19
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Well, I'm talking about if you print the page in the browser when the address bar says:

    raihans.co.uk/homepage/contact-us

    and you have the lightbox open and have filled it out, before it's sent. If I do that, I get something like so:

    http://home.comcast.net/~jscheuer1/s...ntact%20Us.pdf

    If I hit send, then hit the print button, I get:

    http://home.comcast.net/~jscheuer1/s...0Us%20Sent.pdf

    Now that's in Chrome, and with the additions to the print stylesheet I mentioned in my last post. But the results are similar in other browsers, and without the additions the only difference is that sometimes you get a drop shadow to the form, and/or can see the close button for the lightbox.

    Ah, but I just checked in IE 8. Now that's messed up. Hopefully we can tweak it for that. Have you tried in Firefox and Chrome with bad results? Those, IE 9 and 10 are great here.
    - John
    ________________________

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

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

    raihan (03-07-2013)

  14. #20
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Rereading the last two posts, I can see now that we either need a different approach or some further tweaking to contactprint.css file.

    We could try bringing in the function from your post. I'm not sure how that could be assigned using the template system of the setup, but it can probably be added in a modified form to the raihans.co.uk/templates/raihans/script.responsive.js file and called from the pages in the iframe from their parent (which is the contact-us page). Once I have code to try on that, I'll let you know.
    - 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
  •